/* Theme Name: Astra Child Theme URI: https://zewaltstore.local/ Description: Astra child theme for Zewalt Store. Provides a hand-coded, WooCommerce-driven homepage (front-page.php) matching the Zewalt Store design. All other pages inherit Astra. Author: Zewalt Store Template: astra Version: 1.0.0 Text Domain: astra-child */ /* ========================================================================== Design tokens (ported from the Zewalt Store design mockup) ========================================================================== */ :root { --bg-page: #F6F0E4; --bg-card: #E8DFCC; --bg-surface: #FFFFFF; --text-primary: #2B241E; --text-secondary: #7A6F60; --text-muted: #9A8D7C; --color-amber: #D98F52; --color-rust: #8C4A35; --border-default: #D6CBB6; --radius-md: 10px; --radius-lg: 20px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(43, 36, 30, 0.06), 0 1px 1px rgba(43, 36, 30, 0.04); --shadow-md: 0 4px 12px rgba(43, 36, 30, 0.08), 0 2px 4px rgba(43, 36, 30, 0.05); --font-serif-display: 'Lora', 'Georgia', serif; --font-sans-ui: 'Jost', 'Helvetica Neue', sans-serif; --duration-standard: 200ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --maxw: 1280px; } /* ========================================================================== Base (scoped to the custom homepage via .zw-home on ) ========================================================================== */ .zw-home * { margin: 0; padding: 0; box-sizing: border-box; } .zw-home { background: var(--bg-page); color: var(--text-primary); font-family: var(--font-sans-ui); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } .zw-home img { max-width: 100%; display: block; } .zw-home a { color: inherit; text-decoration: none; } .zw-home h1, .zw-home h2, .zw-home h3 { font-family: var(--font-serif-display); font-weight: 600; color: var(--text-primary); line-height: 1.2; } .zw-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .zw-section { padding: 72px 0; } .zw-eyebrow { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--color-rust); margin-bottom: 12px; } .zw-icon { width: 24px; height: 24px; display: inline-block; vertical-align: middle; } /* Buttons */ .zw-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans-ui); font-weight: 600; font-size: 15px; padding: 13px 28px; border-radius: var(--radius-pill); border: 1px solid transparent; cursor: pointer; transition: all var(--duration-standard) var(--ease-standard); } .zw-btn--primary { background: var(--color-amber); color: #fff; } .zw-btn--primary:hover { background: #c97e42; box-shadow: var(--shadow-md); } .zw-btn--ghost { background: transparent; color: var(--text-primary); border-color: var(--border-default); } .zw-btn--ghost:hover { background: var(--bg-card); } /* ========================================================================== Header ========================================================================== */ .zw-header { position: sticky; top: 0; z-index: 100; background: var(--bg-page); border-bottom: 1px solid var(--border-default); } .zw-header__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 96px; } .zw-logo { display: flex; align-items: center; gap: 8px; } .zw-logo img { height: 80px; width: auto; } .zw-logo__text { display: none; font-family: var(--font-serif-display); font-style: italic; font-size: 16px; color: var(--text-primary); white-space: nowrap; } .zw-nav { display: flex; align-items: center; gap: 28px; } .zw-nav a { font-size: 15px; font-weight: 500; color: var(--text-primary); transition: color var(--duration-standard); position: relative; } .zw-nav a:hover { color: var(--color-rust); } .zw-header__actions { display: flex; align-items: center; gap: 16px; } .zw-header__actions a { color: var(--text-primary); display: inline-flex; } .zw-header__actions a:hover { color: var(--color-rust); } .zw-burger { display: none; background: none; border: none; color: var(--text-primary); cursor: pointer; } .zw-nav-toggle { display: none; } /* ========================================================================== Hero ========================================================================== */ .zw-hero { background: var(--bg-page); } .zw-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .zw-hero__eyebrow { font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--color-rust); margin-bottom: 18px; } .zw-hero h1 { font-size: 52px; line-height: 1.1; margin-bottom: 22px; } .zw-hero__lead { font-size: 18px; color: var(--text-secondary); max-width: 34em; margin-bottom: 18px; } .zw-hero__est { font-size: 14px; color: var(--text-secondary); font-style: italic; margin-bottom: 30px; } .zw-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; } .zw-hero__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); aspect-ratio: 1/1; object-fit: cover; } /* ========================================================================== Categories ========================================================================== */ .zw-heading-center { text-align: center; margin-bottom: 44px; } .zw-heading-center h2 { font-size: 34px; } .zw-cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; } .zw-cat { text-align: center; transition: transform var(--duration-standard) var(--ease-standard); } .zw-cat:hover { transform: translateY(-4px); } .zw-cat__img { border-radius: var(--radius-md); overflow: hidden; background: var(--bg-card); box-shadow: var(--shadow-sm); margin-bottom: 14px; } .zw-cat__img img { width: 100%; aspect-ratio: 1/1; object-fit: cover; } .zw-cat__label { font-family: var(--font-serif-display); font-size: 16px; font-weight: 500; } /* ========================================================================== Rich text block (SEO intro / What is) ========================================================================== */ .zw-rich { max-width: 860px; margin: 0 auto; text-align: center; } .zw-rich h2 { font-size: 32px; margin-bottom: 22px; } .zw-rich p { color: var(--text-secondary); font-size: 17px; margin-bottom: 18px; } /* ========================================================================== Category landing page (breadcrumb, H1/subtitle, long-form SEO article) ========================================================================== */ .zw-category-head { padding: 28px 0 8px; } .zw-breadcrumb { font-size: 13px; color: var(--text-secondary); margin-bottom: 14px; } .zw-breadcrumb a { color: var(--color-rust); } .zw-breadcrumb .zw-sep { margin: 0 6px; } .zw-category__h1 { font-size: 32px; margin: 0 0 8px; } .zw-category__sub { font-size: 15px; color: var(--text-secondary); margin: 0; } .zw-article { max-width: 860px; margin: 0 auto; } .zw-article h2 { font-size: 26px; margin: 40px 0 14px; } .zw-article h2:first-child { margin-top: 0; } .zw-article h3 { font-size: 19px; margin: 24px 0 10px; } .zw-article p { color: var(--text-secondary); font-size: 16px; margin-bottom: 16px; } .zw-article ul, .zw-article ol { color: var(--text-secondary); font-size: 16px; margin: 0 0 16px 22px; } .zw-article li { margin-bottom: 8px; } .zw-article a { color: var(--color-rust); text-decoration: underline; } .zw-article table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 14px; } .zw-article table td { border: 1px solid var(--border-default); padding: 10px 12px; text-align: left; vertical-align: top; white-space: nowrap; } .zw-article table tr:first-child td { font-weight: 600; background: var(--bg-card); } .zw-article details.zw-faq__item summary .zw-icon { color: var(--color-rust); } /* ========================================================================== Legal / policy pages (Privacy, Shipping, Return — cards; Terms — numbered) ========================================================================== */ .zw-legal { max-width: 900px; margin: 0 auto; } .zw-legal__h1 { font-size: 34px; margin: 0 0 16px; } .zw-legal__intro p { font-size: 16px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 12px; } /* Cards layout */ .zw-legal__cards { display: flex; flex-direction: column; gap: 20px; } .zw-legal__card { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 26px 28px; box-shadow: var(--shadow-sm); } .zw-legal__card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .zw-legal__card-icon { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-default); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .zw-legal__card-icon .zw-icon { color: var(--color-rust); } .zw-legal__card-head h2 { font-size: 19px; margin: 0; } .zw-legal__card-body { display: flex; flex-direction: column; gap: 10px; } .zw-legal__row { display: flex; gap: 10px; align-items: flex-start; } .zw-legal__row .zw-icon { color: var(--color-rust); flex-shrink: 0; margin-top: 5px; } .zw-legal__row span { font-size: 14.5px; line-height: 1.65; color: var(--text-secondary); } /* Numbered layout */ .zw-legal__numbered { display: flex; flex-direction: column; gap: 16px; } .zw-legal__num-item { border-bottom: 1px solid var(--border-default); padding-bottom: 22px; } .zw-legal__num-item:last-child { border-bottom: none; } .zw-legal__num-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; } .zw-legal__num { font-family: var(--font-serif-display); font-size: 16px; color: var(--color-rust); flex-shrink: 0; } .zw-legal__num-head h2 { font-size: 18px; margin: 0; } .zw-legal__num-body { display: flex; flex-direction: column; gap: 8px; padding-left: 26px; } .zw-legal__num-body p { font-size: 14.5px; line-height: 1.65; color: var(--text-secondary); margin: 0; } /* ========================================================================== About page ========================================================================== */ .zw-about__intro { max-width: 900px; margin: 0 auto; text-align: center; } .zw-about__h1 { font-size: 38px; text-align: center; margin: 0 0 20px; } .zw-about__intro p { font-size: 17px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 16px; } .zw-about__stats { display: flex; justify-content: center; gap: 56px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 32px; max-width: 900px; margin: 0 auto; flex-wrap: wrap; } .zw-about__stat { text-align: center; } .zw-about__stat-num { font-family: var(--font-serif-display); font-size: 26px; color: var(--color-rust); font-weight: 600; } .zw-about__stat-label { font-size: 13px; color: var(--text-secondary); margin-top: 4px; } .zw-about__offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1000px; margin: 0 auto; } .zw-about__offer-card { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 24px; box-shadow: var(--shadow-sm); } .zw-about__offer-icon { width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-default); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .zw-about__offer-icon .zw-icon { color: var(--color-rust); } .zw-about__offer-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; } .zw-about__offer-card p { font-size: 14px; line-height: 1.6; color: var(--text-secondary); } .zw-about__why-list { display: flex; flex-direction: column; gap: 1px; background: var(--border-default); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; max-width: 900px; margin: 0 auto; } .zw-about__why-row { display: flex; gap: 18px; align-items: flex-start; padding: 22px 24px; background: var(--bg-page); } .zw-about__why-row .zw-icon { color: var(--color-rust); flex-shrink: 0; margin-top: 2px; width: 22px; height: 22px; } .zw-about__why-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; } .zw-about__why-row p { font-size: 14px; line-height: 1.6; color: var(--text-secondary); } .zw-about__commit-list { display: flex; flex-direction: column; gap: 18px; text-align: left; max-width: 640px; margin: 0 auto; } .zw-about__commit-row { display: flex; gap: 14px; align-items: flex-start; } .zw-about__commit-row .zw-icon { color: var(--color-rust); flex-shrink: 0; margin-top: 1px; width: 20px; height: 20px; } .zw-about__commit-row span { font-size: 16px; line-height: 1.6; color: var(--text-secondary); } /* ========================================================================== Contact page ========================================================================== */ .zw-contact__h1 { font-size: 36px; text-align: center; margin: 0 0 16px; } .zw-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } .zw-contact__form-panel { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-sm); } .zw-contact__form-panel h2 { font-size: 22px; margin: 0 0 24px; } /* Restyle WPForms' own markup (form #127) to match the design instead of replacing it */ .zw-contact__form-panel .wpforms-field-container { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 18px; } .zw-contact__form-panel .wpforms-field-container > .wpforms-field:nth-child(n+3) { grid-column: 1 / -1; } .zw-contact__form-panel .wpforms-field { margin: 0 !important; } .zw-contact__form-panel .wpforms-field-label { position: static !important; clip: auto !important; clip-path: none !important; height: auto !important; width: auto !important; overflow: visible !important; display: block; font-size: 13px; font-weight: 500; color: var(--text-primary); margin: 0 0 6px; } .zw-contact__form-panel .wpforms-required-label { color: var(--color-rust); } .zw-contact__form-panel input[type="text"], .zw-contact__form-panel input[type="email"], .zw-contact__form-panel input[type="tel"], .zw-contact__form-panel select, .zw-contact__form-panel textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 14px; background: var(--bg-page); color: var(--text-primary); font-family: var(--font-sans-ui); } .zw-contact__form-panel textarea { resize: vertical; } .zw-contact__form-panel .wpforms-field-hp { display: none !important; } .zw-contact__form-panel .wpforms-error-noscript { display: none; } .zw-contact__form-panel .wpforms-submit-container { margin-top: 4px; } .zw-contact__form-panel .wpforms-submit { background: var(--color-amber); color: #fff; border: none; border-radius: var(--radius-pill); padding: 15px 28px; font-size: 15px; font-weight: 600; font-family: var(--font-sans-ui); text-transform: none; letter-spacing: normal; cursor: pointer; transition: background var(--duration-standard); } .zw-contact__form-panel .wpforms-submit:hover { background: #c97e42; } .zw-contact__info { display: flex; flex-direction: column; gap: 20px; } .zw-contact__whatsapp { display: flex; align-items: center; gap: 14px; background: #259954; color: #fff; border-radius: var(--radius-md); padding: 20px 22px; box-shadow: var(--shadow-sm); } .zw-contact__whatsapp:hover { background: #1f7f46; } .zw-contact__whatsapp .zw-icon { flex-shrink: 0; } .zw-contact__whatsapp strong { display: block; font-size: 15px; font-weight: 600; } .zw-contact__whatsapp small { display: block; font-size: 13px; opacity: 0.9; margin-top: 2px; } .zw-contact__row { display: flex; align-items: center; gap: 14px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 18px 20px; } .zw-contact__row-icon { width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-default); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .zw-contact__row-icon .zw-icon { color: var(--color-rust); } .zw-contact__row-label { font-size: 12px; color: var(--text-muted); } .zw-contact__row-value { font-size: 15px; font-weight: 500; color: var(--text-primary); display: block; } .zw-contact__hours { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 20px 22px; } .zw-contact__hours-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; } .zw-contact__hours-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--text-secondary); margin-bottom: 6px; } .zw-contact__hours-row:last-child { margin-bottom: 0; } .zw-contact__hours-row span:last-child { color: var(--text-primary); font-weight: 500; } /* ========================================================================== Product grid (Featured) ========================================================================== */ .zw-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; } .zw-pcard { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow var(--duration-standard) var(--ease-standard), transform var(--duration-standard) var(--ease-standard); } .zw-pcard:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .zw-pcard__media { position: relative; } .zw-pcard__media img { width: 100%; aspect-ratio: 1/1; object-fit: cover; } .zw-badge { position: absolute; top: 12px; left: 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; background: var(--color-amber); color: #fff; border-radius: var(--radius-pill); padding: 4px 10px; } .zw-pcard__body { padding: 18px; } .zw-pcard__name { font-family: var(--font-serif-display); font-size: 15px; margin-bottom: 4px; line-height: 1.35; } .zw-pcard--compact .zw-pcard__name { min-height: 40px; margin-bottom: 10px; } .zw-pcard__sub { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; } .zw-pcard__price { font-size: 16px; font-weight: 700; color: var(--text-primary); } .zw-pcard__price del { color: var(--text-secondary); font-weight: 400; font-size: 14px; margin-left: 8px; } .zw-pcard__price ins { text-decoration: none; } /* ========================================================================== Benefits ========================================================================== */ .zw-benefits__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; } .zw-benefits__media { position: sticky; top: 100px; } .zw-benefits__media .zw-figure { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); } .zw-benefits__media img { width: 100%; aspect-ratio: 1/1; object-fit: cover; } .zw-benefits__cap { position: absolute; left: 20px; bottom: 18px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); } .zw-benefits__cap strong { display: block; font-family: var(--font-serif-display); font-size: 18px; } .zw-benefits__cap span { font-size: 13px; opacity: .9; } .zw-benefit { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--border-default); } .zw-benefit:last-child { border-bottom: none; } .zw-benefit__num { font-family: var(--font-serif-display); font-size: 15px; color: var(--color-amber); font-weight: 600; display: flex; align-items: center; gap: 10px; } .zw-benefit__icon { color: var(--color-rust); } .zw-benefit h3 { font-size: 20px; margin-bottom: 8px; } .zw-benefit p { color: var(--text-secondary); font-size: 15px; } /* ========================================================================== Explore More (shapes) ========================================================================== */ .zw-shapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; } .zw-shape { text-align: center; transition: transform var(--duration-standard) var(--ease-standard); } .zw-shape:hover { transform: translateY(-4px); } .zw-shape__img { border-radius: var(--radius-md); overflow: hidden; background: var(--bg-card); box-shadow: var(--shadow-sm); margin-bottom: 12px; } .zw-shape__img img { width: 100%; aspect-ratio: 1/1; object-fit: cover; } .zw-shape__label { font-size: 14px; font-family: var(--font-serif-display); } /* ========================================================================== Loved by customers (testimonials, masonry) ========================================================================== */ .zw-loved__intro { max-width: 680px; margin: 0 auto 40px; text-align: center; color: var(--text-secondary); } .zw-masonry { column-count: 5; column-gap: 18px; } .zw-tcard { break-inside: avoid; margin-bottom: 18px; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--bg-card); border: 1px solid var(--border-default); position: relative; display: block; } .zw-tcard img { width: 100%; height: auto; } .zw-tcard--video .zw-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(43,36,30,0.28); transition: background var(--duration-standard); } .zw-tcard--video:hover .zw-play { background: rgba(43,36,30,0.12); } .zw-play__btn { width: 62px; height: 62px; border-radius: 50%; background: rgba(255,255,255,0.92); color: var(--color-rust); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); } .zw-play__btn svg { width: 26px; height: 26px; margin-left: 3px; } /* Lightbox */ .zw-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(20,16,12,0.9); display: none; align-items: center; justify-content: center; padding: 24px; } .zw-lightbox.is-open { display: flex; } .zw-lightbox__frame { width: min(960px, 100%); aspect-ratio: 16/9; } .zw-lightbox__frame iframe { width: 100%; height: 100%; border: 0; border-radius: var(--radius-md); } .zw-lightbox__close { position: absolute; top: 20px; right: 26px; background: none; border: none; color: #fff; font-size: 34px; cursor: pointer; line-height: 1; } /* ========================================================================== Wholesale (dark band) ========================================================================== */ .zw-wholesale { background: var(--text-primary); color: var(--bg-page); } .zw-wholesale h2 { color: var(--bg-page); font-size: 34px; margin-bottom: 18px; } .zw-wholesale .zw-eyebrow { color: var(--color-amber); } .zw-wholesale__lead { max-width: 640px; color: rgba(246,240,228,0.82); font-size: 17px; margin-bottom: 26px; } .zw-wholesale__feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 46px; } .zw-feat { display: flex; gap: 14px; align-items: flex-start; } .zw-feat__icon { color: var(--color-amber); flex-shrink: 0; } .zw-feat strong { display: block; font-family: var(--font-serif-display); font-size: 17px; margin-bottom: 4px; } .zw-feat span { color: rgba(246,240,228,0.72); font-size: 14px; } /* ========================================================================== FAQ ========================================================================== */ .zw-faq { max-width: 820px; margin: 0 auto; } .zw-faq__item { border-bottom: 1px solid var(--border-default); } .zw-faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 4px; font-family: var(--font-serif-display); font-size: 18px; } .zw-faq__item summary::-webkit-details-marker { display: none; } .zw-faq__item summary .zw-icon { transition: transform var(--duration-standard); color: var(--color-rust); flex-shrink: 0; } .zw-faq__item[open] summary .zw-icon { transform: rotate(180deg); } .zw-faq__item p { color: var(--text-secondary); padding: 0 4px 24px; font-size: 16px; } /* ========================================================================== Trust badges ========================================================================== */ .zw-trust { display: flex; justify-content: center; gap: 56px; flex-wrap: wrap; max-width: 1000px; margin: 0 auto; padding: 32px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); } .zw-trust__item { display: flex; align-items: center; gap: 12px; } .zw-trust__icon { color: var(--color-rust); flex-shrink: 0; } .zw-trust strong { display: block; font-family: var(--font-serif-display); font-size: 16px; } .zw-trust span { font-size: 13px; color: var(--text-secondary); } /* ========================================================================== Footer ========================================================================== */ .zw-footer { background: var(--text-primary); color: var(--bg-page); padding: 64px 0 0; } .zw-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(246,240,228,0.15); } .zw-footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .zw-footer__brand img { height: 36px; width: 36px; object-fit: contain; filter: brightness(0) invert(1); opacity: .95; } .zw-footer__wordmark { font-family: var(--font-serif-display); font-style: italic; font-size: 18px; } .zw-footer__about { color: rgba(246,240,228,0.75); font-size: 14px; line-height: 1.65; margin-bottom: 16px; max-width: 280px; } .zw-footer__est { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(246,240,228,0.55); } .zw-footer h4 { font-family: var(--font-sans-ui); font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 18px; color: rgba(246,240,228,0.55); } .zw-footer ul { list-style: none; } .zw-footer li { margin-bottom: 11px; } .zw-footer li a { color: rgba(246,240,228,0.8); font-size: 14px; transition: color var(--duration-standard); } .zw-footer li a:hover { color: var(--color-amber); } .zw-footer__contact-line { font-size: 14px; opacity: .8; margin-bottom: 8px; } .zw-footer__contact-line a { color: inherit; transition: color var(--duration-standard); } .zw-footer__contact-line a:hover { color: var(--color-amber); } .zw-footer__whatsapp { display: inline-flex; align-items: center; gap: 8px; background: #259954; color: #fff; border-radius: var(--radius-pill); padding: 10px 18px; font-size: 13px; font-weight: 600; margin-top: 6px; width: fit-content; } .zw-footer__whatsapp:hover { background: #1f7f46; } .zw-footer__social { display: flex; gap: 14px; margin-top: 12px; font-size: 13px; } .zw-footer__social a { color: var(--bg-page); opacity: .65; transition: opacity var(--duration-standard); } .zw-footer__social a:hover { opacity: 1; } .zw-footer__bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 20px 0 24px; font-size: 12px; color: rgba(246,240,228,0.55); } /* ========================================================================== Single product page ========================================================================== */ .zw-pdp__hero { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; } .zw-pdp__hero > .zw-pdp__gallery, .zw-pdp__hero > .zw-pdp__summary { min-width: 0; } /* Gallery */ .zw-pdp__gallery-main { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-card); box-shadow: var(--shadow-md); margin-bottom: 14px; } .zw-pdp__gallery-main img { width: 100%; aspect-ratio: 1/1; object-fit: cover; cursor: pointer; } .zw-pdp__gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(255,255,255,0.9); color: var(--text-primary); cursor: pointer; box-shadow: var(--shadow-sm); } .zw-pdp__gallery-arrow:hover { background: #fff; } .zw-pdp__gallery-arrow--prev { left: 12px; } .zw-pdp__gallery-arrow--next { right: 12px; transform: translateY(-50%) scaleX(-1); } .zw-pdp__gallery-thumbs { display: flex; gap: 12px; } .zw-pdp__gallery-thumbs button { padding: 0; border: 2px solid transparent; border-radius: var(--radius-md); overflow: hidden; background: none; cursor: pointer; width: 72px; height: 72px; flex-shrink: 0; transition: border-color var(--duration-standard); } .zw-pdp__gallery-thumbs button.is-active { border-color: var(--color-rust); } .zw-pdp__gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Summary column */ .zw-pdp__eyebrow { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--color-rust); margin-bottom: 10px; } .zw-pdp__title { font-size: 30px; margin-bottom: 14px; } .zw-pdp__price-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; } .zw-pdp__price-now { font-family: var(--font-serif-display); font-size: 26px; font-weight: 600; color: var(--text-primary); } .zw-pdp__price-was { font-size: 16px; color: var(--text-secondary); text-decoration: line-through; } .zw-pdp__delivery-note { font-size: 13px; color: var(--text-secondary); margin-bottom: 20px; } .zw-pdp__short-desc { color: var(--text-secondary); font-size: 16px; margin-bottom: 24px; } .zw-spec-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-bottom: 26px; } .zw-spec-table tr { border-bottom: 1px solid var(--border-default); } .zw-spec-table tr:first-child { border-top: 1px solid var(--border-default); } .zw-spec-table td { padding: 11px 4px; font-size: 15px; word-wrap: break-word; } .zw-spec-table td:first-child { color: var(--text-secondary); width: 40%; } .zw-spec-table td:last-child { font-weight: 500; } .zw-pdp__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; } .zw-btn--whatsapp { background: #259954; color: #fff; } .zw-btn--whatsapp:hover { background: #1f7f46; } .zw-pdp__call { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--text-primary); } .zw-pdp__call:hover { color: var(--color-rust); } .zw-pdp__trust-lines { list-style: none; } .zw-pdp__trust-lines li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-secondary); padding: 8px 0; border-top: 1px solid var(--border-default); } .zw-pdp__trust-lines li:first-child { border-top: none; } .zw-pdp__trust-lines .zw-icon { color: var(--color-rust); flex-shrink: 0; width: 18px; height: 18px; } /* Why-cards */ .zw-why-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .zw-why-card { text-align: center; padding: 8px; } .zw-why-card h3 { font-size: 17px; margin-bottom: 8px; } .zw-why-card p { font-size: 14px; color: var(--text-secondary); } /* Mobile sticky order bar (shown only on mobile — see responsive block) */ .zw-pdp__stickybar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; background: var(--bg-page); border-top: 1px solid var(--border-default); padding: 10px 16px; align-items: center; justify-content: space-between; gap: 12px; box-shadow: 0 -4px 16px rgba(43,36,30,0.08); } .zw-pdp__stickybar-name { font-size: 10.5px; color: var(--text-secondary); } .zw-pdp__stickybar-price { font-size: 16px; font-weight: 600; font-family: var(--font-serif-display); } .zw-pdp__stickybar .zw-btn { padding: 10px 20px; font-size: 14px; } /* ========================================================================== Wholesale & Export page ========================================================================== */ .zw-ws__hero-section { background: var(--bg-surface); } .zw-ws__hero { display: grid; grid-template-columns: 584fr 529fr; gap: 56px; align-items: center; } .zw-ws__hero-copy h1 { font-size: 42px; margin: 0 0 18px; } .zw-ws__hero-lead { font-size: 17px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 26px; } .zw-ws__hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; } .zw-ws__hero-media { position: relative; } .zw-ws__hero-media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); aspect-ratio: 1/1; object-fit: cover; } .zw-ws__badge { position: absolute; left: -24px; bottom: -24px; display: flex; align-items: center; gap: 10px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 18px; box-shadow: var(--shadow-md); font-size: 14px; font-weight: 600; color: var(--text-primary); } .zw-ws__badge-icon { color: var(--color-rust); display: inline-flex; } .zw-ws__highlights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .zw-ws__hcard { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); } .zw-ws__hcard-img { aspect-ratio: 1/1; background: var(--bg-surface); } .zw-ws__hcard-img img { width: 100%; height: 100%; object-fit: cover; } .zw-ws__hcard-title { font-size: 15px; font-weight: 600; color: var(--text-primary); padding: 16px 18px 4px; } .zw-ws__hcard p { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); padding: 0 18px 18px; margin: 0; } .zw-ws__about-section { background: var(--bg-surface); } .zw-ws__about { display: grid; grid-template-columns: 456fr 616fr; gap: 48px; align-items: center; } .zw-ws__about-media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); object-fit: cover; } .zw-ws__about-copy p { font-size: 16px; line-height: 1.65; color: var(--text-secondary); margin-bottom: 16px; } .zw-ws__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .zw-ws__step { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); padding-bottom: 18px; } .zw-ws__step-img { aspect-ratio: 4/3; background: var(--bg-surface); } .zw-ws__step-img img { width: 100%; height: 100%; object-fit: cover; } .zw-ws__step-num { font-family: var(--font-serif-display); font-size: 15px; color: var(--color-rust); font-weight: 600; padding: 14px 18px 0; } .zw-ws__step-title { font-size: 15px; font-weight: 600; color: var(--text-primary); padding: 4px 18px 4px; } .zw-ws__step p { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); padding: 0 18px; margin: 0; } .zw-ws__reach-section { background: var(--text-primary); } .zw-ws__reach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .zw-ws__reach-card { background: rgba(246,240,228,.06); border: 1px solid rgba(246,240,228,.15); border-radius: var(--radius-md); padding: 24px; } .zw-ws__reach-icon { color: var(--color-amber); display: inline-flex; margin-bottom: 14px; } .zw-ws__reach-title { font-size: 15px; font-weight: 600; color: var(--bg-page); margin-bottom: 8px; } .zw-ws__reach-card p { font-size: 13.5px; line-height: 1.6; color: var(--text-muted); margin: 0; } .zw-ws__quote .zw-heading-center p { max-width: 46em; margin: 12px auto 0; color: var(--text-secondary); } .zw-ws__form-panel { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-sm); max-width: 760px; margin: 0 auto; } /* Restyle WPForms' own markup (form #6214) — same override technique as the Contact page's .zw-contact__form-panel, but paired Name|Company, Email|Country, Product|Volume, with only the trailing Message field spanning full width. */ .zw-ws__form-panel .wpforms-field-container { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 18px; } .zw-ws__form-panel .wpforms-field-container > .wpforms-field:last-child { grid-column: 1 / -1; } .zw-ws__form-panel .wpforms-field { margin: 0 !important; } .zw-ws__form-panel .wpforms-field-label { position: static !important; clip: auto !important; clip-path: none !important; height: auto !important; width: auto !important; overflow: visible !important; display: block; font-size: 13px; font-weight: 500; color: var(--text-primary); margin: 0 0 6px; } .zw-ws__form-panel .wpforms-required-label { color: var(--color-rust); } .zw-ws__form-panel input[type="text"], .zw-ws__form-panel input[type="email"], .zw-ws__form-panel select, .zw-ws__form-panel textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 14px; background: var(--bg-page); color: var(--text-primary); font-family: var(--font-sans-ui); } .zw-ws__form-panel textarea { resize: vertical; } .zw-ws__form-panel .wpforms-field-hp { display: none !important; } .zw-ws__form-panel .wpforms-error-noscript { display: none; } .zw-ws__form-panel .wpforms-submit-container { margin-top: 4px; } .zw-ws__form-panel .wpforms-submit { background: var(--color-amber); color: #fff; border: none; border-radius: var(--radius-pill); padding: 15px 28px; font-size: 15px; font-weight: 600; font-family: var(--font-sans-ui); text-transform: none; letter-spacing: normal; cursor: pointer; transition: background var(--duration-standard); } .zw-ws__form-panel .wpforms-submit:hover { background: #c97e42; } .zw-ws__form-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: 13px; color: var(--text-muted); } .zw-ws__form-note .zw-icon { color: var(--color-rust); flex-shrink: 0; margin-top: 1px; } /* ========================================================================== Blog ========================================================================== */ .zw-blog__post-head h1 { font-size: 38px; margin: 0 0 14px; } .zw-blog__post-meta { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; } .zw-blog__back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--color-rust); } .zw-blog__back:hover { text-decoration: underline; } .zw-blog__back .zw-icon { flex-shrink: 0; } .zw-blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .zw-blog__card { display: block; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow var(--duration-standard) var(--ease-standard), transform var(--duration-standard) var(--ease-standard); } .zw-blog__card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .zw-blog__card-img { aspect-ratio: 16/9; background: var(--bg-surface); } .zw-blog__card-img img { width: 100%; height: 100%; object-fit: cover; } .zw-blog__card-body { padding: 20px 22px 24px; } .zw-blog__card-date { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; } .zw-blog__card-title { font-family: var(--font-serif-display); font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; line-height: 1.3; } .zw-blog__card p { font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 14px; } .zw-blog__card-more { font-size: 13.5px; font-weight: 600; color: var(--color-rust); } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1024px) { .zw-cats { grid-template-columns: repeat(3, 1fr); } .zw-masonry { column-count: 3; } .zw-footer__grid { grid-template-columns: 1fr 1fr; } /* Wholesale page */ .zw-ws__highlights { grid-template-columns: repeat(2, 1fr); } .zw-ws__steps { grid-template-columns: repeat(2, 1fr); } .zw-ws__reach-grid { grid-template-columns: repeat(2, 1fr); } /* Blog */ .zw-blog__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 860px) { .zw-hero__grid { grid-template-columns: 1fr; gap: 32px; } .zw-hero__media { order: -1; } .zw-hero h1 { font-size: 40px; } .zw-benefits__grid { grid-template-columns: 1fr; gap: 32px; } .zw-benefits__media { position: static; } .zw-wholesale__feats { grid-template-columns: 1fr; gap: 20px; } .zw-section { padding: 56px 0; } /* Mobile nav: burger pinned to the standard left position, logo centered, search pushed right */ .zw-burger { display: inline-flex; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .zw-header__actions { margin-left: auto; } .zw-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .zw-nav { position: fixed; top: 96px; left: 0; right: 0; background: var(--bg-page); flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 24px 20px; border-bottom: 1px solid var(--border-default); box-shadow: var(--shadow-md); transform: translateY(-120%); transition: transform var(--duration-standard) var(--ease-standard); } .zw-nav a { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--border-default); } .zw-nav-toggle:checked ~ .zw-nav { transform: translateY(0); } /* Product page */ .zw-pdp__hero { grid-template-columns: 1fr; gap: 28px; } .zw-why-cards { grid-template-columns: repeat(2, 1fr); } /* About page */ .zw-about__offer-grid { grid-template-columns: 1fr; } .zw-about__stats { gap: 32px; } /* Contact page */ .zw-contact__grid { grid-template-columns: 1fr; gap: 32px; } .zw-contact__form-panel .wpforms-field-container { grid-template-columns: 1fr; } .zw-contact__form-panel .wpforms-field-container > .wpforms-field:nth-child(n+3) { grid-column: 1; } /* Wholesale page */ .zw-ws__hero { grid-template-columns: 1fr; gap: 32px; } .zw-ws__hero-media { order: -1; } .zw-ws__hero-copy h1 { font-size: 34px; } .zw-ws__about { grid-template-columns: 1fr; gap: 28px; } .zw-ws__about-media { order: -1; } .zw-ws__form-panel .wpforms-field-container { grid-template-columns: 1fr; } .zw-ws__form-panel .wpforms-field-container > .wpforms-field:last-child { grid-column: 1; } /* Blog */ .zw-blog__post-head h1 { font-size: 30px; } } @media (max-width: 560px) { .zw-masonry { column-count: 2; } .zw-footer__grid { grid-template-columns: 1fr; } .zw-trust { gap: 28px; } .zw-category__h1 { font-size: 26px; } .zw-products--category { grid-template-columns: repeat(2, 1fr); } /* Compact mobile header: bigger logo mark + text wordmark, centered in the header bar */ .zw-header__inner { height: 72px; } .zw-nav { top: 72px; } .zw-logo img { width: 44px; height: 44px; object-fit: contain; } .zw-logo__text { display: inline-block; } /* Hero: image above the (shorter) heading, capped height instead of a full square */ .zw-hero h1 { font-size: 30px; } .zw-hero__media img { aspect-ratio: auto; height: 260px; } /* Our Categories: 2-column grid, stacked in rows instead of scrolling */ .zw-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } /* Explore More Shapes: horizontal scroller, with a peek of the next item */ .zw-shapes { display: flex; overflow-x: auto; gap: 14px; padding-bottom: 8px; padding-right: 18px; scrollbar-width: none; } .zw-shapes::-webkit-scrollbar { display: none; } .zw-shapes .zw-shape { flex: 0 0 120px; } /* Featured Products: exactly 2 columns (auto-fit would collapse to 1 at this width) */ .zw-products:not(.zw-products--category) { grid-template-columns: repeat(2, 1fr); gap: 14px; } /* Product page: compact header handled by shared .zw-header rules above; add the sticky order bar */ .zw-pdp__stickybar { display: flex; } .zw-pdp__gallery-thumbs button { width: 56px; height: 56px; } .zw-pdp__gallery-thumbs { gap: 10px; } .zw-pdp { padding-bottom: 76px; } /* clearance so the sticky bar never covers the last section */ .zw-why-cards { grid-template-columns: 1fr 1fr; } /* Wholesale page: single-column stack, no mobile-only components (matches the mockup's own mobile version — plain responsive CSS, not a second layout) */ .zw-ws__hero-copy h1 { font-size: 28px; } .zw-ws__hero-media img { aspect-ratio: auto; height: 260px; } .zw-ws__badge { left: 12px; bottom: 12px; padding: 10px 14px; font-size: 12.5px; } .zw-ws__highlights { grid-template-columns: 1fr 1fr; gap: 14px; } .zw-ws__steps { grid-template-columns: 1fr 1fr; gap: 14px; } .zw-ws__reach-grid { grid-template-columns: 1fr; gap: 14px; } .zw-ws__form-panel { padding: 24px; } /* Blog */ .zw-blog__grid { grid-template-columns: 1fr; } }