/* Theme Name: Easwari Theme URI: https://easwaristore.com/ Author: Srri Easwari Marketing Sdn Bhd Description: Storefront theme for Easwari — one WooCommerce shop serving home cooks and trade buyers. Interactive masala dabba hero, quick-add product cards, tier-aware pricing. Designed to run alongside the Easwari Trade plugin. Version: 1.5.1 Requires PHP: 7.4 License: GPL-2.0-or-later Text Domain: easwari Tags: e-commerce, two-columns, custom-menu, custom-logo, translation-ready */ /* The design system below is the one signed off in the prototypes. Deliberately light-only: a shop commits to its brand appearance rather than following the visitor's laptop into dark mode. The whole colour direction — green for trust, white so the spice is the most saturated thing on screen — depends on it. Every colour is a token on :root; never hard-code one in a component. */ :root { color-scheme: light; --paper: #FCFBF7; --surface: #FFFFFF; --sunk: #F4F2EA; --ink: #1E2A1F; --body: #3E4A3E; --muted: #6E766B; --line: #E5E3D7; --line-firm: #CBC9B9; --green: #1B8A34; --green-deep: #10592A; --green-bg: #EAF4EA; --gold: #A07C0C; --gold-bg: #FAF3D8; --yellow: #F5EC12; --sale: #A32A1A; --trade: #0E4A50; --trade-bg: #E5EFEF; --hero-ink: #F6F7EC; --hero-bg: #FFFFFF; --on-green: #F4FAF2; --r: 5px; --ui: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; --serif: "Petrona", Georgia, serif; --mono: "IBM Plex Mono", Consolas, monospace; } * { box-sizing: border-box; } body { background: var(--paper); color: var(--body); font-family: var(--ui); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; color: var(--ink); line-height: 1.2; } p { margin: 0; } a { color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible, input:focus-visible, canvas:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 2px; } .wrap { max-width: 78rem; margin: 0 auto; padding: 0 1.25rem; } .kicker { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); display: block; } /* ---------- announce + header ---------- */ .announce { background: var(--green-deep); color: var(--on-green); font-size: 0.78rem; } .announce .wrap { display: flex; flex-wrap: wrap; gap: 0.3rem 1.5rem; justify-content: center; text-align: center; padding-top: 0.5rem; padding-bottom: 0.5rem; } .announce b { font-weight: 600; } .head { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; } .head-main { display: flex; align-items: center; gap: 1.25rem; padding-top: 0.85rem; padding-bottom: 0.85rem; } .logo { flex: none; width: 132px; height: 46px; background: var(--logo) left center / contain no-repeat; text-indent: -9999px; overflow: hidden; } /* form.search, never bare .search: WordPress puts a `search` class on * for every results page, and a bare rule here turned the whole * document into a flex row — header, main and footer side by side. */ form.search { flex: 1 1 auto; max-width: 34rem; position: relative; display: flex; } form.search input { width: 100%; font-family: var(--ui); font-size: 0.92rem; padding: 0.62rem 5.4rem 0.62rem 2.2rem; border: 1px solid var(--line-firm); border-radius: var(--r); background: var(--paper); color: var(--ink); } form.search input::placeholder { color: var(--muted); } form.search .icon { position: absolute; left: 0.72rem; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); pointer-events: none; } form.search button { position: absolute; right: 4px; top: 4px; bottom: 4px; padding: 0 0.95rem; border: 0; border-radius: 3px; background: var(--green-deep); color: var(--on-green); font-family: var(--ui); font-size: 0.82rem; font-weight: 600; cursor: pointer; } form.search button:hover { background: var(--green); color: var(--on-green); } .head-act { margin-left: auto; display: flex; align-items: center; gap: 1.15rem; flex: none; } .head-act a { font-size: 0.84rem; color: var(--body); white-space: nowrap; display: flex; align-items: center; gap: 0.4rem; } .head-act a:hover { color: var(--ink); } .head-act svg { width: 17px; height: 17px; } .head-act .count { background: var(--green-deep); color: var(--on-green); font-family: var(--mono); font-size: 0.66rem; padding: 0.05rem 0.34rem; border-radius: 99px; } .catnav { border-top: 1px solid var(--line); } .catnav .wrap { display: flex; gap: 1.5rem; overflow-x: auto; scrollbar-width: none; } .catnav .wrap::-webkit-scrollbar { display: none; } .catnav a { font-size: 0.85rem; font-weight: 500; color: var(--body); padding: 0.68rem 0; white-space: nowrap; border-bottom: 2px solid transparent; } .catnav a:hover { color: var(--ink); border-bottom-color: var(--green); } .catnav a.hi { color: var(--trade); font-weight: 600; } @media (max-width: 54rem) { .head-main { flex-wrap: wrap; } form.search { order: 3; flex-basis: 100%; max-width: none; } .logo { width: 108px; height: 38px; } } /* ---------- hero: the masala dabba, on light ---------- */ .hero { position: relative; background: var(--hero-bg); overflow: hidden; border-bottom: 1px solid var(--line); } .hero .botanical { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .hero .botanical use { fill: none; stroke: var(--ink); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; opacity: 0.075; } .hero .warmth { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(72% 70% at 78% 46%, rgba(200,135,26,0.10), transparent 62%); } .hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.02fr); gap: 2rem 3rem; align-items: center; /* Fit the viewport rather than overflow it. svh accounts for the mobile browser chrome that appears and disappears as you scroll. */ min-height: min(86svh, 44rem); padding-top: clamp(1.4rem, 4vh, 3rem); padding-bottom: clamp(1.4rem, 4vh, 3rem); } .hero-copy { max-width: 30rem; } .hero .kicker { color: var(--gold); } .hero h1 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.022em; font-size: clamp(2.15rem, 5.2vw, 4rem); line-height: 1.04; color: var(--green-deep); margin-top: 1.05rem; } .hero h1 em { font-style: italic; font-weight: 400; } .hero p { margin-top: 1.1rem; font-size: 1.02rem; line-height: 1.6; color: var(--body); max-width: 34ch; } .hero .row { margin-top: 1.8rem; display: flex; gap: 0.65rem; flex-wrap: wrap; } .hero .seal { margin-top: 2.1rem; display: flex; gap: 1.4rem; flex-wrap: wrap; font-family: var(--mono); font-size: 0.67rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); } .hero .seal span { display: flex; align-items: center; gap: 0.4rem; } .hero .seal span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--green); } .dabba { display: grid; place-items: center; } .dabba .stage { position: relative; /* The tin is a circle, so capping its width by viewport height is what keeps the whole of it above the fold on a short or landscape window. */ width: min(100%, 33rem, 56svh); aspect-ratio: 1; filter: drop-shadow(0 22px 34px rgba(28,44,32,0.26)) drop-shadow(0 3px 6px rgba(28,44,32,0.14)); } .dabba canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .dabba #dabbaOverlay { cursor: pointer; border-radius: 50%; } .dabba .hint { position: absolute; left: 50%; bottom: -1.85rem; transform: translateX(-50%); font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .dabba .tip { position: absolute; z-index: 5; pointer-events: none; background: var(--green-deep); color: var(--on-green); font-size: 0.78rem; font-weight: 700; padding: 0.3rem 0.62rem; border-radius: 3px; white-space: nowrap; transform: translate(-50%, -155%); opacity: 0; transition: opacity .12s ease; } .dabba .tip[data-on="1"] { opacity: 1; } @media (max-width: 62rem) { .hero .wrap { grid-template-columns: 1fr; min-height: 0; padding-top: 1.8rem; padding-bottom: 2.4rem; gap: 1.6rem; } .hero-copy { max-width: none; } /* Stacked, the copy takes most of the height, so the tin has to give way to keep a full circle above the fold rather than a cropped one. */ .dabba .stage { width: min(100%, 23rem, 34svh); } .hero .seal { margin-top: 1.4rem; } } /* A short landscape window is where a hero most often overflows. Give the type less room rather than shrinking the tin further. */ @media (min-width: 62.01rem) and (max-height: 46rem) { .hero h1 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); margin-top: 0.8rem; } .hero p { margin-top: 0.8rem; font-size: 0.95rem; } .hero .row { margin-top: 1.2rem; } .hero .seal { margin-top: 1.3rem; } } .btn { font-family: var(--ui); font-size: 0.88rem; font-weight: 600; padding: 0.68rem 1.35rem; border-radius: var(--r); border: 1px solid transparent; cursor: pointer; display: inline-block; } .btn--gold { background: var(--green-deep); color: var(--on-green); border-color: var(--green-deep); } .btn--gold:hover { background: var(--green); border-color: var(--green); color: var(--on-green); } .btn--ghost { background: transparent; color: var(--green-deep); border-color: var(--line-firm); } .btn--ghost:hover { border-color: var(--green-deep); background: var(--green-bg); } .btn--go { background: var(--green-deep); color: var(--on-green); border-color: var(--green-deep); } .btn--go:hover { background: var(--green); border-color: var(--green); color: var(--on-green); } .btn--line { background: transparent; color: var(--ink); border-color: var(--line-firm); } .btn--line:hover { border-color: var(--ink); } /* ---------- sections ---------- */ .sec { padding: 2.8rem 0; } .sec-top { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.2rem; } .sec-top h2 { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; } .sec-top a { margin-left: auto; font-size: 0.82rem; font-weight: 600; color: var(--green-deep); white-space: nowrap; } .sec-top a:hover { text-decoration: underline; text-underline-offset: 3px; } .cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.8rem; } .cats a { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); display: flex; flex-direction: column; transition: border-color .15s ease, transform .15s ease; } .cats a:hover { border-color: var(--line-firm); transform: translateY(-2px); } .cats canvas { width: 100%; height: 78px; display: block; } .cats .t { padding: 0.65rem 0.75rem 0.75rem; display: flex; flex-direction: column; gap: 0.1rem; } .cats .n { font-size: 0.86rem; font-weight: 600; color: var(--ink); line-height: 1.25; } .cats .c { font-family: var(--mono); font-size: 0.66rem; color: var(--muted); } .prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 0.85rem; } .prod { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); display: flex; flex-direction: column; overflow: hidden; position: relative; transition: border-color .15s ease, transform .15s ease; } .prod:hover { border-color: var(--line-firm); transform: translateY(-2px); } .prod .flag { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 2; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.14rem 0.4rem; border-radius: 2px; } .flag--sale { background: var(--sale); color: #FFF6F3; } .flag--new { background: var(--gold-bg); color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); } .prod .shot { background: var(--sunk); padding: 0.9rem; display: grid; place-items: center; } .prod .shot svg { width: 100%; max-width: 6.6rem; height: auto; } .prod .info { padding: 0.7rem 0.75rem 0.75rem; display: flex; flex-direction: column; gap: 0.16rem; flex: 1; } .prod .n { font-size: 0.88rem; font-weight: 600; color: var(--ink); line-height: 1.3; } .prod .ms { font-size: 0.74rem; color: var(--muted); } .prod .sz { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); margin-top: 0.1rem; } .prod .pr { margin-top: 0.5rem; display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; } .prod .now { font-family: var(--mono); font-size: 0.95rem; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; } .prod .now.cut { color: var(--sale); } .prod .was { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); text-decoration: line-through; } .prod .add { margin-top: 0.6rem; width: 100%; font-family: var(--ui); font-size: 0.8rem; font-weight: 600; padding: 0.46rem 0.6rem; border-radius: 3px; border: 1px solid var(--line-firm); background: transparent; color: var(--ink); cursor: pointer; } .prod .add:hover { background: var(--green-deep); border-color: var(--green-deep); color: var(--on-green); } /* quick-add panel — buy without leaving the listing */ .prod .panel { position: absolute; inset: 0; z-index: 4; background: var(--surface); padding: 0.85rem 0.8rem 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease, visibility .14s; } .prod[data-open="1"] .panel { opacity: 1; visibility: visible; transform: none; } .prod .panel .close { position: absolute; top: 0.45rem; right: 0.45rem; width: 1.55rem; height: 1.55rem; border-radius: 50%; border: 1px solid var(--line); background: var(--sunk); color: var(--muted); font-size: 0.95rem; line-height: 1; cursor: pointer; padding: 0; } .prod .panel .close:hover { color: var(--ink); border-color: var(--line-firm); } .prod .panel .pname { font-size: 0.78rem; font-weight: 600; color: var(--muted); padding-right: 1.7rem; line-height: 1.3; } .prod .panel .pprice { font-family: var(--mono); font-size: 1.15rem; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; } .prod .panel .punit { font-family: var(--mono); font-size: 0.66rem; color: var(--muted); margin-top: -0.35rem; } .prod .panel .lbl { font-size: 0.68rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .chips { display: flex; flex-wrap: wrap; gap: 0.32rem; } .chips button { font-family: var(--ui); font-size: 0.76rem; font-weight: 600; padding: 0.32rem 0.55rem; border-radius: 3px; border: 1px solid var(--line-firm); background: transparent; color: var(--body); cursor: pointer; } .chips button:hover { border-color: var(--ink); color: var(--ink); } .chips button[aria-checked="true"] { border-color: var(--green-deep); border-width: 2px; padding: calc(0.32rem - 1px) calc(0.55rem - 1px); color: var(--green-deep); background: var(--green-bg); } .qrow { display: flex; align-items: stretch; border: 1px solid var(--line-firm); border-radius: 3px; width: fit-content; } .qrow button { width: 1.9rem; border: 0; background: transparent; color: var(--ink); font-family: var(--mono); font-size: 0.95rem; cursor: pointer; } .qrow input { width: 2.3rem; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: transparent; color: var(--ink); text-align: center; font-family: var(--mono); font-size: 0.82rem; padding: 0.3rem 0; } /* The prototype pinned this to the bottom so buttons lined up across a row of cards. That reasoning does not survive contact with a real catalogue: only one panel is ever open at a time, and on a tall card the auto margin leaves a hundred pixels of nothing above the button. Top-aligned reads as a compact form instead. */ .prod .panel .confirm { margin-top: 0.35rem; width: 100%; font-family: var(--ui); font-size: 0.82rem; font-weight: 700; padding: 0.5rem 0.6rem; border-radius: 3px; border: 1px solid var(--green-deep); background: var(--green-deep); color: var(--on-green); cursor: pointer; } .prod .panel .confirm:hover { background: var(--green); border-color: var(--green); } .prod .panel .confirm[data-done="1"], .prod .add[data-done="1"] { background: var(--gold); border-color: var(--gold); color: var(--on-green); } .prod .add[disabled], .prod .panel .confirm[disabled] { opacity: 0.75; cursor: progress; } .prod .panel .full { font-size: 0.7rem; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; text-align: center; } .prod .panel .full:hover { color: var(--ink); } .prod .panel .moq { font-family: var(--mono); font-size: 0.63rem; color: var(--muted); } .fresh { background: var(--sunk); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .fresh .wrap { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 2.5rem; align-items: center; padding-top: 2.8rem; padding-bottom: 2.8rem; } @media (max-width: 52rem) { .fresh .wrap { grid-template-columns: 1fr; gap: 1.6rem; } } .fresh h2 { font-family: var(--serif); font-size: 1.75rem; font-weight: 500; letter-spacing: -0.012em; } .fresh p { margin-top: 0.8rem; font-size: 0.95rem; } .fresh .facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } .fresh .fact { border-left: 2px solid var(--green); padding-left: 0.85rem; } .fresh .fact b { display: block; font-family: var(--serif); font-size: 1.5rem; color: var(--ink); font-weight: 500; line-height: 1.1; } .fresh .fact span { font-size: 0.78rem; color: var(--muted); display: block; margin-top: 0.15rem; line-height: 1.4; } .trust .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.1rem 1.6rem; padding-top: 1.6rem; padding-bottom: 1.6rem; } .trust div { display: flex; gap: 0.65rem; align-items: flex-start; } .trust svg { width: 19px; height: 19px; flex: none; color: var(--green-deep); margin-top: 1px; } .trust .t { font-size: 0.83rem; font-weight: 600; color: var(--ink); display: block; } .trust .d { font-size: 0.76rem; color: var(--muted); display: block; line-height: 1.4; } .recs { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.85rem; } .rec { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); display: flex; flex-direction: column; transition: border-color .15s ease, transform .15s ease; } .rec:hover { border-color: var(--line-firm); transform: translateY(-2px); } .rec canvas { width: 100%; height: 92px; display: block; } .rec .t { padding: 0.75rem 0.85rem 0.9rem; display: flex; flex-direction: column; gap: 0.15rem; } .rec .m { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); } .rec .n { font-size: 0.9rem; font-weight: 600; color: var(--ink); } .doors { border-top: 1px solid var(--line); } .doors .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0; } .door { padding: 2.2rem 1.5rem 2.2rem 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; } .door + .door { border-left: 1px solid var(--line); padding-left: 2.5rem; } @media (max-width: 40rem) { .door + .door { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; } } .door h2 { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; } .door p { font-size: 0.86rem; color: var(--muted); max-width: 40ch; } .door .btn { margin-top: 0.7rem; } .foot { background: var(--surface); border-top: 1px solid var(--line); padding: 2.4rem 0 1.6rem; } .fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1.8rem; } .fcol { display: flex; flex-direction: column; gap: 0.42rem; } .fcol .h { font-size: 0.82rem; font-weight: 700; color: var(--ink); margin-bottom: 0.15rem; } .fcol a, .fcol span { font-size: 0.82rem; color: var(--muted); line-height: 1.45; } .fcol a:hover { color: var(--ink); } .legal { margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.6rem 2rem; font-size: 0.74rem; color: var(--muted); line-height: 1.5; } .legal b { color: var(--body); font-weight: 600; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ============================================================ * Theme layer — WordPress and WooCommerce structures the * prototypes did not have to account for. * ========================================================== */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; z-index: 999; background: var(--green-deep); color: var(--on-green); padding: 0.6rem 1rem; border-radius: 0 0 3px 0; } .skip-link:focus { left: 0; top: 0; } .logo img { display: block; width: 132px; height: auto; } @media (max-width: 54rem) { .logo img { width: 108px; } } /* WooCommerce notices */ .woocommerce-notices-wrapper .woocommerce-message, .woocommerce-notices-wrapper .woocommerce-info, .woocommerce-notices-wrapper .woocommerce-error { list-style: none; margin: 1rem 0; padding: 0.85rem 1.1rem; border-radius: var(--r); font-size: 0.9rem; background: var(--green-bg); border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); color: var(--ink); } .woocommerce-notices-wrapper .woocommerce-error { background: var(--gold-bg); border-color: color-mix(in srgb, var(--gold) 40%, transparent); } .woocommerce-notices-wrapper .button { margin-left: 0.6rem; } /* Generic page + post content */ .entry { padding: 2.2rem 0 3rem; } .entry h1 { font-family: var(--serif); font-size: clamp(1.9rem,4vw,2.6rem); font-weight: 500; letter-spacing: -0.018em; color: var(--green-deep); } /* Prose keeps a readable measure, but the measure belongs on the children — * putting it on the container traps wide blocks inside it. The WooCommerce * Cart and Checkout blocks are the ones that matter: capped at 66ch they never * reach the width at which they lay their summary out beside the items, so * everything stacks in a narrow column and the rest of the page sits empty. */ .entry-content { max-width: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin-top: 1.2rem; } .entry-content > * { width: 100%; max-width: 66ch; } .entry-content > .alignwide, .entry-content > .alignfull, .entry-content > [class*="wp-block-woocommerce-"], .entry-content > .wc-block-all-products, .entry-content > .woocommerce { max-width: none; } .entry-content h2 { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; } .entry-content ul, .entry-content ol { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; } .entry-content a { color: var(--green-deep); text-decoration: underline; text-underline-offset: 2px; } /* ...but a button is not a prose link. Without this the green link colour wins * on specificity and paints the label the same green as the button behind it, * which is why "Proceed to Checkout" and "Place Order" rendered blank. */ .entry-content a.button, .entry-content a.wp-element-button, .entry-content a.wc-block-components-button, .entry-content .wc-block-components-button, .entry-content .wc-block-components-button__text, .entry-content .wp-block-button__link { color: var(--on-green); text-decoration: none; } .entry-content .wc-block-components-button.outlined, .entry-content .wc-block-components-button.is-link { color: var(--green-deep); } .entry-content img { max-width: 100%; height: auto; border-radius: var(--r); } /* Shop archive */ .shop-head { padding: 1.2rem 0 1.4rem; } .shop-head h1 { font-family: var(--serif); font-size: clamp(1.9rem,4vw,2.7rem); font-weight: 500; letter-spacing: -0.018em; color: var(--green-deep); } .shop-head .term-desc { margin-top: 0.6rem; max-width: 58ch; font-size: 0.95rem; } .shop-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1rem; padding: 0.75rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 1.4rem; } .shop-bar .woocommerce-result-count { margin: 0; font-size: 0.84rem; color: var(--muted); } .shop-bar .woocommerce-ordering { margin: 0 0 0 auto; } .shop-bar select { font-family: var(--ui); font-size: 0.82rem; padding: 0.42rem 0.65rem; border: 1px solid var(--line-firm); border-radius: 3px; background: var(--surface); color: var(--ink); } /* WooCommerce's layout stylesheet lays the loop out with floats and percentage widths — `li.product { float: left; width: 22.05% }`. Inside a grid container that 22% is taken of the grid area, which collapses every card to a sliver. Its selectors carry `.woocommerce`, so ours have to match that specificity to win rather than relying on source order. */ ul.products, body.woocommerce ul.products, body.woocommerce-page ul.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 0.85rem; clear: none; } ul.products li.product, body.woocommerce ul.products li.product, body.woocommerce-page ul.products li.product { width: auto; margin: 0; float: none; clear: none; } /* The float clearfix leaves stray pseudo-elements that become grid items. */ body.woocommerce ul.products::before, body.woocommerce ul.products::after, body.woocommerce-page ul.products::before, body.woocommerce-page ul.products::after { content: none; display: none; } /* WooCommerce also floats the single-product columns. */ body.woocommerce div.product div.images, body.woocommerce div.product div.summary, body.woocommerce #content div.product div.images, body.woocommerce #content div.product div.summary { width: auto; float: none; margin: 0; } /* And its price markup carries margins that fight the design's rhythm. */ body.woocommerce div.product p.price, body.woocommerce div.product span.price { margin: 0; color: inherit; } /* Pagination */ .woocommerce-pagination ul { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; gap: 0.35rem; justify-content: center; flex-wrap: wrap; } .woocommerce-pagination a, .woocommerce-pagination span { display: block; min-width: 2.2rem; text-align: center; padding: 0.4rem 0.6rem; border: 1px solid var(--line-firm); border-radius: 3px; font-family: var(--mono); font-size: 0.82rem; } .woocommerce-pagination .current { background: var(--green-deep); color: var(--on-green); border-color: var(--green-deep); } /* Single product */ .pdp { display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,1fr); gap: 2.75rem; padding: 1.4rem 0 2.5rem; align-items: start; } @media (max-width: 60rem) { .pdp { grid-template-columns: 1fr; gap: 1.8rem; } } .pdp .images { position: sticky; top: 1.5rem; } @media (max-width: 60rem) { .pdp .images { position: static; } } .pdp .images img { width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--line); background: var(--sunk); } .pdp .placeholder { aspect-ratio: 4/3.3; background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r); display: grid; place-items: center; padding: 2rem; } .pdp .placeholder canvas { width: 100%; height: 100%; border-radius: 3px; } .pdp .summary { display: flex; flex-direction: column; gap: 1rem; } .pdp .summary h1 { font-family: var(--serif); font-size: clamp(1.9rem,3.6vw,2.6rem); font-weight: 500; letter-spacing: -0.018em; color: var(--green-deep); } .pdp .prov { font-size: 0.83rem; color: var(--muted); } .pdp .prov a { color: var(--green-deep); text-decoration: underline; text-underline-offset: 2px; } .pdp .price { font-family: var(--mono); font-size: 1.5rem; font-weight: 500; color: var(--ink); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); padding: 0.9rem 0; } .pdp .price del { font-size: 0.95rem; color: var(--muted); margin-right: 0.5rem; } .pdp .price ins { text-decoration: none; } .pdp .easwari-unit { font-size: 0.78rem; color: var(--muted); } .pdp form.cart { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-start; } .pdp form.cart .quantity { display: flex; border: 1px solid var(--line-firm); border-radius: 3px; overflow: hidden; } .pdp form.cart input.qty { width: 4rem; border: 0; background: var(--surface); color: var(--ink); text-align: center; font-family: var(--mono); font-size: 0.9rem; padding: 0.6rem 0; } .pdp .easwari-moq { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); } .pdp .variations { width: 100%; } .pdp .variations td { padding: 0.3rem 0; } .pdp .variations select { font-family: var(--ui); font-size: 0.88rem; padding: 0.5rem 0.65rem; width: 100%; border: 1px solid var(--line-firm); border-radius: 3px; background: var(--surface); color: var(--ink); } .pdp .trust3 { display: grid; grid-template-columns: repeat(auto-fit,minmax(9rem,1fr)); gap: 0.9rem; border-top: 1px solid var(--line); padding-top: 1rem; } .pdp .trust3 .t { font-size: 0.8rem; font-weight: 700; color: var(--ink); display: block; } .pdp .trust3 .d { font-size: 0.74rem; color: var(--muted); display: block; line-height: 1.4; } /* Buttons — WooCommerce reuses .button everywhere */ .button, button.button, a.button, .woocommerce a.button, input.button, .wp-element-button, .single_add_to_cart_button { font-family: var(--ui); font-size: 0.88rem; font-weight: 600; padding: 0.68rem 1.35rem; border-radius: var(--r); border: 1px solid var(--green-deep); background: var(--green-deep); color: var(--on-green); cursor: pointer; display: inline-block; text-decoration: none; line-height: 1.3; } .button:hover, a.button:hover, .single_add_to_cart_button:hover { background: var(--green); border-color: var(--green); color: var(--on-green); } .button.alt-outline { background: transparent; color: var(--ink); border-color: var(--line-firm); } /* Specification table, rendered by the Easwari Trade plugin */ .easwari-spec { border: 1px solid var(--line-firm); border-radius: var(--r); background: var(--surface); overflow: hidden; margin: 1.6rem 0; } .easwari-spec__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 1.5rem; padding: 0.75rem 1rem; background: var(--sunk); border-bottom: 1px solid var(--line-firm); } .easwari-spec__top .who { font-size: 0.82rem; font-weight: 700; color: var(--ink); } .easwari-spec__top .meta { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); } .easwari-spec__scroll { overflow-x: auto; } .easwari-spec table { border-collapse: collapse; width: 100%; min-width: 30rem; } .easwari-spec th, .easwari-spec td { text-align: left; padding: 0.52rem 1rem; border-bottom: 1px solid var(--line); font-size: 0.83rem; } .easwari-spec tbody tr:last-child td { border-bottom: 0; } .easwari-spec th { font-family: var(--mono); font-weight: 400; color: var(--muted); width: 42%; } .easwari-spec td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); } .easwari-spec td.word { color: var(--ink); } .easwari-spec__foot { padding: 0.7rem 1rem; border-top: 1px solid var(--line-firm); background: var(--sunk); font-size: 0.75rem; color: var(--muted); } .easwari-product-docs { margin: 1.2rem 0; } .easwari-product-docs ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(14rem,1fr)); gap: 0.6rem; } .easwari-product-docs li a { display: block; padding: 0.8rem 1rem; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--r); font-size: 0.85rem; font-weight: 600; color: var(--ink); text-decoration: none; } .easwari-product-docs li a:hover { border-color: var(--line-firm); border-left-color: var(--gold); } /* Cart / checkout / account — light touches so they inherit the palette */ .woocommerce table.shop_table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } .woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); font-size: 0.88rem; text-align: left; } .woocommerce form .form-row { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; } .woocommerce form .form-row label { font-size: 0.8rem; font-weight: 600; color: var(--ink); } .woocommerce form .form-row input:not([type="checkbox"]):not([type="radio"]), .woocommerce form .form-row textarea, .woocommerce form .form-row select { font-family: var(--ui); font-size: 0.9rem; padding: 0.55rem 0.7rem; border: 1px solid var(--line-firm); border-radius: 3px; background: var(--surface); color: var(--ink); width: 100%; } .easwari-tier-panel { background: var(--green-bg); border: 1px solid color-mix(in srgb, var(--green) 30%, transparent); border-radius: var(--r); padding: 1.1rem 1.2rem; margin-bottom: 1.4rem; } .easwari-tier-panel h3 { font-family: var(--serif); font-size: 1.15rem; font-weight: 500; color: var(--green-deep); } .easwari-tier-panel p { font-size: 0.88rem; margin-top: 0.35rem; } /* Front page sections reuse the prototype classes; only the outer rhythm lives here */ .home-sec { padding: 2.8rem 0; } .home-sec.tight { padding-top: 0; } /* ------------------------------------------------------------------ * Corrections where WordPress markup differs from the prototype * --------------------------------------------------------------- */ /* The prototype painted the logo as a CSS background; the theme ships a real so it can be swapped in the Customizer without editing code. */ .logo { background: none; text-indent: 0; width: auto; height: auto; overflow: visible; } /* Product media is a photo when there is one and a generated texture when there is not, so both need the same box. */ .prod .shot img, .prod .shot canvas { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; border-radius: 2px; } .cats a .catimg, .cats a canvas { width: 100%; height: 78px; object-fit: cover; display: block; } .crumbs { font-size: 0.78rem; color: var(--muted); padding-bottom: 0.5rem; } .crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; } .empty-state { padding: 3rem 1rem; text-align: center; color: var(--muted); border: 1px dashed var(--line-firm); border-radius: var(--r); } /* The quick-add panel submits a real form, so the form itself must not introduce a second layout context inside the panel's flex column. */ .prod .panel form { display: contents; } .prod .info form { display: contents; } /* WooCommerce sale badge, if any theme part still outputs one */ .prod .onsale { display: none; } /* ------------------------------------------------------------------ * Video and photographs * --------------------------------------------------------------- */ .filmstrip { padding: 2.8rem 0; } .film { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); border: 1px solid var(--line); background: var(--sunk); } .film video, .film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* Click-to-play facade. The player only loads when someone asks for it. */ .film--facade .playbtn { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; display: block; } .film--facade img, .film--facade canvas { width: 100%; height: 100%; object-fit: cover; display: block; } .film--facade::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(12,26,15,0.05), rgba(12,26,15,0.35)); } .film--facade .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 72px; height: 51px; z-index: 2; pointer-events: none; transition: transform .15s ease; } .film--facade .play svg { width: 100%; height: 100%; display: block; } .film--facade .play .bg { fill: rgba(16,89,42,0.88); } .film--facade .play .tri { fill: #FFFFFF; } .film--facade .playbtn:hover .play { transform: translate(-50%,-50%) scale(1.06); } .film--facade .playbtn:hover .play .bg { fill: var(--green-deep); } .film--facade .playbtn:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; } .filmcap { margin-top: 0.7rem; font-size: 0.86rem; color: var(--muted); max-width: 60ch; } .shots { padding: 0 0 2.8rem; } .shotgrid { display: grid; gap: 0.7rem; grid-template-columns: repeat(3, 1fr); } .shotgrid figure { margin: 0; position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--sunk); } .shotgrid img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .shotgrid figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 0.8rem 0.6rem; font-size: 0.76rem; color: #FFFFFF; background: linear-gradient(180deg, transparent, rgba(12,26,15,0.72)); } /* The first picture earns more room when there are enough to make a mosaic. */ .shotgrid[data-count="5"] figure:first-child, .shotgrid[data-count="6"] figure:first-child { grid-column: span 2; grid-row: span 2; } .shotgrid[data-count="5"] figure:first-child img, .shotgrid[data-count="6"] figure:first-child img { aspect-ratio: auto; height: 100%; } .shotgrid[data-count="1"] { grid-template-columns: 1fr; } .shotgrid[data-count="2"], .shotgrid[data-count="4"] { grid-template-columns: repeat(2, 1fr); } @media (max-width: 46rem) { .shotgrid, .shotgrid[data-count="5"], .shotgrid[data-count="6"] { grid-template-columns: repeat(2, 1fr); } .shotgrid figure:first-child { grid-column: auto !important; grid-row: auto !important; } .shotgrid figure:first-child img { aspect-ratio: 4 / 3 !important; } } /* ------------------------------------------------------------------ * My Account, cart and checkout * * WooCommerce floats these into columns. Its own stylesheet handles the * structure; what follows is the theme's typography and spacing on top, * plus a grid for the account page that behaves better than the float. * --------------------------------------------------------------- */ body.logged-in.woocommerce-account .woocommerce { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 2.5rem; align-items: start; } @media (max-width: 52rem) { body.logged-in.woocommerce-account .woocommerce { grid-template-columns: 1fr; gap: 1.4rem; } } /* The float would otherwise fight the grid and leave the content column empty. */ body.woocommerce-account .woocommerce-MyAccount-navigation, body.woocommerce-account .woocommerce-MyAccount-content { width: auto; float: none; margin: 0; } body .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; } @media (max-width: 52rem) { body .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; } } body .woocommerce-MyAccount-navigation li { margin: 0; } body .woocommerce-MyAccount-navigation a { display: block; padding: 0.55rem 0.9rem; border: 1px solid var(--line); border-radius: var(--r); font-size: 0.88rem; color: var(--body); text-decoration: none; background: var(--surface); } body .woocommerce-MyAccount-navigation a:hover { border-color: var(--line-firm); color: var(--ink); } body .woocommerce-MyAccount-navigation .is-active a { background: var(--green-deep); color: var(--on-green); border-color: var(--green-deep); font-weight: 600; } body .woocommerce-MyAccount-content > :first-child { margin-top: 0; } body .woocommerce-MyAccount-content p { margin-bottom: 0.9rem; } /* ---- tables: cart, order details, account orders ---- */ .woocommerce table.shop_table, body .woocommerce-page table.shop_table { width: 100%; border-collapse: collapse; table-layout: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin: 0 0 1.6rem; } .woocommerce table.shop_table th, body .woocommerce table.shop_table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); font-size: 0.88rem; text-align: left; vertical-align: middle; } body .woocommerce table.shop_table thead th { font-family: var(--mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: var(--sunk); white-space: nowrap; } body .woocommerce table.shop_table tbody tr:last-child td, body .woocommerce table.shop_table tbody tr:last-child th { border-bottom: 0; } /* Let the product name take the slack and keep the numbers tight. */ body .woocommerce table.shop_table .product-name { width: 42%; } .woocommerce table.shop_table .product-price, .woocommerce table.shop_table .product-subtotal, body .woocommerce table.shop_table .product-total { width: 1%; white-space: nowrap; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; } body .woocommerce table.shop_table .product-quantity { width: 1%; white-space: nowrap; } body .woocommerce table.shop_table .product-thumbnail { width: 1%; white-space: nowrap; } body .woocommerce table.shop_table .product-thumbnail img { width: 60px; height: 60px; object-fit: cover; border-radius: 3px; display: block; } body .woocommerce table.shop_table .product-remove { width: 1%; white-space: nowrap; text-align: center; padding-right: 0.4rem; } body .woocommerce table.shop_table .product-name a { color: var(--ink); font-weight: 600; text-decoration: none; } body .woocommerce table.shop_table .product-name a:hover { text-decoration: underline; text-underline-offset: 2px; } body .woocommerce table.shop_table .variation { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--muted); } body .woocommerce table.shop_table .variation dt, body .woocommerce table.shop_table .variation dd { display: inline; margin: 0; } body .woocommerce table.shop_table .variation dt { margin-right: 0.3rem; } body .woocommerce table.shop_table .variation dd { margin-right: 0.6rem; } body .woocommerce table.shop_table .variation p { margin: 0; display: inline; } body .woocommerce a.remove { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--sunk); color: var(--muted); font-size: 1rem; line-height: 1; text-decoration: none; } body .woocommerce a.remove:hover { background: var(--gold-bg); color: var(--gold); } body .woocommerce .quantity .qty { width: 4rem; padding: 0.45rem 0.35rem; text-align: center; font-family: var(--mono); font-size: 0.85rem; border: 1px solid var(--line-firm); border-radius: 3px; background: var(--surface); color: var(--ink); } body .woocommerce .cart-collaterals { display: flex; justify-content: flex-end; } body .woocommerce .cart-collaterals .cart_totals { float: none; width: min(100%, 26rem); } body .woocommerce .cart-collaterals .cart_totals h2 { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; margin-bottom: 0.7rem; } body .woocommerce .cart-collaterals .cart_totals table.shop_table th { background: transparent; font-family: var(--ui); font-size: 0.85rem; text-transform: none; letter-spacing: 0; color: var(--body); } body .woocommerce .cart-collaterals .cart_totals .order-total td { font-family: var(--mono); font-size: 1.05rem; color: var(--ink); } body .woocommerce .wc-proceed-to-checkout { margin-top: 0.9rem; display: flex; } body .woocommerce .wc-proceed-to-checkout .button { width: 100%; text-align: center; } body .woocommerce .coupon { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; } body .woocommerce .coupon input[type="text"] { font-family: var(--ui); font-size: 0.88rem; padding: 0.55rem 0.7rem; border: 1px solid var(--line-firm); border-radius: 3px; background: var(--surface); color: var(--ink); } /* ---- checkout ---- */ /* Two named columns, so lay out two columns. * * This was auto-fit with a minimum track size, which sizes tracks from the * container rather than from how many items there are — a 1248px container * produced four 288px tracks for two cards. */ body .woocommerce .col2-set { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem 2rem; } @media (min-width: 48rem) { body .woocommerce .col2-set { grid-template-columns: repeat(2, minmax(0, 1fr)); } } body.woocommerce-checkout .col2-set .col-1, body.woocommerce-checkout .col2-set .col-2 { width: auto; float: none; } body #customer_details { margin-bottom: 2rem; } /* A 1400px-wide two-column order table reads as empty space; cap it. */ body.woocommerce-checkout form.checkout { max-width: 64rem; } /* Login and register sit side by side; WooCommerce floats them at 48%. */ body .woocommerce .u-columns.col2-set { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem 2rem; max-width: 48rem; } @media (min-width: 48rem) { body .woocommerce .u-columns.col2-set { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* WooCommerce clears its floats with ::before / ::after on these containers. * A pseudo-element on a grid or flex container is a real item and takes a * cell — which is why Login sat in column two and Register wrapped onto a * second row, doubling the height of the sign-in page. */ body .woocommerce .col2-set::before, body .woocommerce .col2-set::after, body .woocommerce .u-columns::before, body .woocommerce .u-columns::after, body .woocommerce ul.products::before, body .woocommerce ul.products::after, body .woocommerce .cart-collaterals::before, body .woocommerce .cart-collaterals::after, body.logged-in.woocommerce-account .woocommerce::before, body.logged-in.woocommerce-account .woocommerce::after { content: none; } body .woocommerce .u-columns .u-column1, body .woocommerce .u-columns .u-column2 { width: auto; float: none; } body .woocommerce form.login, body .woocommerce form.register { border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem 1.5rem; background: var(--surface); margin: 0; } body .woocommerce form .form-row label.woocommerce-form-login__rememberme, body .woocommerce-form-login__rememberme { display: flex; align-items: center; justify-content: flex-start; gap: 0.45rem; width: auto; margin: 0.2rem 0 0.6rem; font-weight: 400; } body .woocommerce-form-login__rememberme input[type="checkbox"] { margin: 0; flex: 0 0 auto; } body .woocommerce-privacy-policy-text { font-size: 0.8rem; color: var(--muted); margin-bottom: 0.9rem; } body .woocommerce .lost_password { font-size: 0.85rem; margin: 0.6rem 0 0; } body .woocommerce form .form-row { align-items: stretch; } /* Empty cart */ body .cart-empty, body .woocommerce .cart-empty { font-family: var(--serif); font-size: 1.35rem; color: var(--ink); padding: 2.5rem 0 1rem; margin: 0; } body .return-to-shop { margin-bottom: 3rem; } body .woocommerce h3, body .woocommerce-billing-fields h3, body #order_review_heading { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; color: var(--ink); margin: 0 0 0.8rem; } body #payment { background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.2rem; } body #payment ul.payment_methods { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } body #payment .payment_box { background: var(--surface); border: 1px solid var(--line); border-radius: 3px; padding: 0.7rem 0.9rem; font-size: 0.85rem; } body #payment .form-row.place-order { margin: 0; } /* Order-received and order details */ body .woocommerce-order .woocommerce-thankyou-order-received { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; color: var(--green-deep); } body .woocommerce ul.order_details { list-style: none; margin: 1.2rem 0; padding: 1rem 1.2rem; background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r); display: flex; flex-wrap: wrap; gap: 1rem 2rem; } body .woocommerce ul.order_details li { font-size: 0.76rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } body .woocommerce ul.order_details li strong { display: block; margin-top: 0.2rem; font-family: var(--mono); font-size: 0.95rem; color: var(--ink); text-transform: none; letter-spacing: 0; } /* ------------------------------------------------------------------ * Tables on a phone * * A six-column cart table cannot fit 390px, so each row becomes a small * card and every cell carries its own label. WooCommerce puts the label in * data-title on the responsive tables; where it is missing the cell simply * shows without one. * --------------------------------------------------------------- */ @media (max-width: 48rem) { .woocommerce table.shop_table_responsive, .woocommerce table.shop_table_responsive tbody, .woocommerce table.shop_table_responsive tr, body .woocommerce table.shop_table_responsive td { display: block; width: auto !important; } body .woocommerce table.shop_table_responsive thead { display: none; } body .woocommerce table.shop_table_responsive tr { padding: 0.9rem 1rem; border-bottom: 1px solid var(--line); position: relative; } body .woocommerce table.shop_table_responsive tr:last-child { border-bottom: 0; } body .woocommerce table.shop_table_responsive td { padding: 0.28rem 0; border: 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: right; white-space: normal !important; } body .woocommerce table.shop_table_responsive td::before { content: attr(data-title); flex: 0 0 auto; font-family: var(--mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .woocommerce table.shop_table_responsive td[data-title=""]::before, body .woocommerce table.shop_table_responsive td:not([data-title])::before { content: none; } /* Name and picture read better full width, with the remove button floated. */ .woocommerce table.shop_table_responsive td.product-name, body .woocommerce table.shop_table_responsive td.product-thumbnail { display: block; text-align: left; padding-right: 2rem; } .woocommerce table.shop_table_responsive td.product-name::before, body .woocommerce table.shop_table_responsive td.product-thumbnail::before { content: none; } body .woocommerce table.shop_table_responsive td.product-thumbnail img { width: 56px; height: 56px; } body .woocommerce table.shop_table_responsive td.product-remove { position: absolute; top: 0.8rem; right: 0.8rem; padding: 0; display: block; } body .woocommerce table.shop_table_responsive td.product-remove::before { content: none; } /* Order tables (account, order-received) are 4–5 columns; same treatment. */ body .woocommerce table.shop_table_responsive tfoot tr { padding: 0.6rem 1rem; } body .woocommerce table.shop_table_responsive tfoot th { display: none; } body .woocommerce .cart-collaterals .cart_totals { float: none; width: 100%; } body .woocommerce .cart-collaterals { display: block; } body .woocommerce .coupon { flex-direction: column; align-items: stretch; } body .woocommerce .coupon input[type="text"], body .woocommerce .coupon .button { width: 100%; } } /* Checkboxes and radios are not text fields; the width rule above must never * reach them or the label beside them is pushed off the card. */ body .woocommerce input[type="checkbox"], body .woocommerce input[type="radio"], body .woocommerce form .form-row input[type="checkbox"], body .woocommerce form .form-row input[type="radio"] { width: auto; flex: 0 0 auto; margin: 0; } /* ------------------------------------------------------------------ * The cart and checkout summary panel follows you down the page. * * With a dozen order lines the totals and the checkout button scroll away * exactly when a buyer is adjusting quantities and wants to watch the number * move. Pinning the panel keeps the total, the coupon field and the button in * view while the left column scrolls under it. * * --head-h is measured in easwari.js because the header wraps to two rows at * narrower widths; the fallback covers the moment before that script runs. * * align-self is the part that is easy to miss: the sidebar layout is a flex * row, so the panel is stretched to the full height of the items column by * default, and a sticky element as tall as its scroll container never moves. * --------------------------------------------------------------- */ @media (min-width: 62rem) { body .wc-block-cart__sidebar, body .wc-block-checkout__sidebar { position: sticky; top: calc(var(--head-h, 8.5rem) + 1rem); align-self: flex-start; /* A very long order summary scrolls inside the panel rather than * disappearing off the bottom of the screen. */ max-height: calc(100svh - var(--head-h, 8.5rem) - 2rem); overflow-y: auto; overscroll-behavior: contain; } /* Classic-cart equivalent, in case those pages are ever used again. */ body .woocommerce .cart-collaterals .cart_totals { position: sticky; top: calc(var(--head-h, 8.5rem) + 1rem); } } /* ------------------------------------------------------------------ * Trade account application * * The form ships from the plugin using WooCommerce's .form-row class names, * but it renders on an ordinary page, outside any .woocommerce wrapper — so * none of the checkout form styling above reaches it and every label sat * inline against its input. It gets its own treatment here. * * This is the form a restaurant group fills in before trusting you with a * standing order, so it is worth looking like a credit application rather * than a contact form. * --------------------------------------------------------------- */ .easwari-trade-registration { /* Wider than the prose measure its page inherits: paired fields need room. */ max-width: 46rem; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(1.3rem, 3vw, 2.1rem); } .easwari-trade-registration form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem 1.4rem; align-items: start; } .easwari-trade-registration .form-row { margin: 0; display: flex; flex-direction: column; gap: 0.35rem; grid-column: 1 / -1; } .easwari-trade-registration .form-row-first { grid-column: 1; } .easwari-trade-registration .form-row-last { grid-column: 2; } @media (max-width: 40rem) { .easwari-trade-registration form { grid-template-columns: minmax(0, 1fr); } .easwari-trade-registration .form-row-first, .easwari-trade-registration .form-row-last { grid-column: 1 / -1; } } .easwari-trade-registration label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; color: var(--ink); } .easwari-trade-registration .required { color: var(--sale); font-weight: 400; text-decoration: none; } .easwari-trade-registration input[type="text"], .easwari-trade-registration input[type="tel"], .easwari-trade-registration input[type="email"], .easwari-trade-registration select, .easwari-trade-registration textarea { width: 100%; font-family: var(--ui); font-size: 0.92rem; padding: 0.6rem 0.75rem; border: 1px solid var(--line-firm); border-radius: 3px; background: var(--paper); color: var(--ink); } .easwari-trade-registration textarea { resize: vertical; min-height: 5.5rem; } .easwari-trade-registration input:focus, .easwari-trade-registration select:focus, .easwari-trade-registration textarea:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); background: var(--surface); } /* Hints belong under the field they explain, not beside it. */ .easwari-trade-registration .description { font-size: 0.78rem; line-height: 1.45; color: var(--muted); } .easwari-trade-registration button.button { /* The row is a column flex container, so the cross axis is the horizontal * one — align-self is what stops the button spanning the whole card. */ align-self: flex-start; padding: 0.72rem 1.6rem; font-size: 0.92rem; border-radius: var(--r); } /* The closing note is guidance about the process, not a field hint. */ .easwari-trade-registration form > .description:last-child { grid-column: 1 / -1; margin: 0.2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.82rem; } /* A section break inside the form: the address block gets a heading so the * card reads as two parts rather than eleven fields in a row. */ .easwari-trade-registration .easwari-fieldset-head { gap: 0.25rem; margin-top: 0.6rem; padding-top: 1.1rem; border-top: 1px solid var(--line); } .easwari-trade-registration .easwari-legend { font-family: var(--serif); font-size: 1.12rem; font-weight: 500; color: var(--ink); } .easwari-trade-registration input[type="file"] { width: 100%; font-family: var(--ui); font-size: 0.86rem; padding: 0.55rem 0.7rem; border: 1px dashed var(--line-firm); border-radius: 3px; background: var(--sunk); color: var(--body); cursor: pointer; } .easwari-trade-registration input[type="file"]::file-selector-button { font-family: var(--ui); font-size: 0.82rem; font-weight: 600; margin-right: 0.7rem; padding: 0.4rem 0.9rem; border: 1px solid var(--line-firm); border-radius: 3px; background: var(--surface); color: var(--ink); cursor: pointer; } .easwari-trade-registration input[type="file"]:hover { border-color: var(--green); } .easwari-trade-registration input[type="file"]::file-selector-button:hover { background: var(--green-bg); border-color: var(--green); color: var(--green-deep); } .easwari-trade-registration input:disabled { background: var(--sunk); color: var(--muted); cursor: not-allowed; } /* A rejected application is a problem, not a notice — it should not wear the * same calm green as a confirmation. */ .easwari-trade-registration .easwari-form-error { grid-column: 1 / -1; background: #FDF1EE; border: 1px solid color-mix(in srgb, var(--sale) 35%, transparent); border-left: 3px solid var(--sale); border-radius: var(--r); padding: 0.85rem 1rem; margin-bottom: 1.2rem; font-size: 0.89rem; line-height: 1.5; color: #7A2114; } .easwari-trade-registration .woocommerce-info { grid-column: 1 / -1; background: var(--green-bg); border: 1px solid color-mix(in srgb, var(--green) 30%, transparent); border-radius: var(--r); padding: 0.8rem 1rem; margin-bottom: 1.2rem; font-size: 0.9rem; color: var(--green-deep); } /* ------------------------------------------------------------------ * Shop filter rail * * The rail is visible by default and JavaScript collapses it on small * screens — not the other way round. If the script fails, a phone gets the * filters sitting above the products, which is untidy; the alternative is a * button that does nothing and filters nobody can reach. * --------------------------------------------------------------- */ .shop-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; align-items: start; } @media (min-width: 62rem) { .shop-layout { grid-template-columns: 13.5rem minmax(0, 1fr); gap: 2.2rem; } .shop-layout .woocommerce-notices-wrapper { grid-column: 1 / -1; } } .shop-results { min-width: 0; } .filter-toggle { justify-self: start; font-family: var(--ui); font-size: 0.86rem; font-weight: 600; padding: 0.5rem 1rem; border: 1px solid var(--line-firm); border-radius: 99px; background: var(--surface); color: var(--ink); cursor: pointer; } .filter-toggle::before { content: "☰"; margin-right: 0.45rem; } .filter-toggle[aria-expanded="true"] { background: var(--green-deep); color: var(--on-green); border-color: var(--green-deep); } @media (min-width: 62rem) { .filter-toggle { display: none !important; } } .filters { display: flex; flex-direction: column; gap: 1.5rem; } .filters[hidden] { display: none; } .filter-group h2 { font-family: var(--mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.6rem; } .filter-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; } .filter-group li { margin: 0; } .filter-group li a { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; padding: 0.4rem 0.6rem; border-radius: 3px; font-size: 0.9rem; color: var(--body); text-decoration: none; } .filter-group li a:hover { background: var(--sunk); color: var(--ink); } .filter-group li.is-on a { background: var(--green-bg); color: var(--green-deep); font-weight: 600; } .filter-group .n { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); } .filter-group li.is-on .n { color: var(--green-deep); } .price-filter .price-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; } .price-filter input { width: 100%; min-width: 0; font-family: var(--mono); font-size: 0.85rem; padding: 0.45rem 0.5rem; border: 1px solid var(--line-firm); border-radius: 3px; background: var(--surface); color: var(--ink); } .price-filter button { width: 100%; font-family: var(--ui); font-size: 0.84rem; font-weight: 600; padding: 0.48rem 0.9rem; border: 1px solid var(--line-firm); border-radius: 3px; background: var(--surface); color: var(--ink); cursor: pointer; } .price-filter button:hover { background: var(--green-deep); color: var(--on-green); border-color: var(--green-deep); } .filter-clear { margin: 0; font-size: 0.83rem; } .filter-clear a { color: var(--sale); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------ * WooCommerce buttons * * WooCommerce ships `.woocommerce button.button { background: #ebe9eb }` — * two classes and an element, which beats a plain `button.button` and loaded * after this file besides. The result was a grey "Log in" that reads as * disabled. Matching its shape and adding `body` settles it either way. * --------------------------------------------------------------- */ body .woocommerce #respond input#submit, body .woocommerce a.button, body .woocommerce button.button, body .woocommerce input.button, body .woocommerce button.button.alt, body .woocommerce input.button.alt { background-color: var(--green-deep); color: var(--on-green); font-family: var(--ui); font-weight: 600; border-radius: var(--r); border: 0; } body .woocommerce #respond input#submit:hover, body .woocommerce a.button:hover, body .woocommerce button.button:hover, body .woocommerce input.button:hover, body .woocommerce button.button.alt:hover, body .woocommerce input.button.alt:hover { background-color: var(--green); color: var(--on-green); } /* ------------------------------------------------------------------ * Sign in with an emailed code * * The alternative sits inside the password form, under the Log in button — * one column, one decision point, rather than two competing sign-in boxes. * --------------------------------------------------------------- */ .easwari-otp-alt { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); } .easwari-otp-alt__or { align-self: center; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } /* Deliberately quieter than Log in: the password remains the main path. */ .easwari-otp-alt__button { width: 100%; font-family: var(--ui); font-size: 0.88rem; font-weight: 600; padding: 0.6rem 1rem; border: 1px solid var(--green-deep); border-radius: var(--r); background: var(--surface); color: var(--green-deep); cursor: pointer; } .easwari-otp-alt__button:hover { background: var(--green-bg); } .easwari-otp-alt__button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .easwari-otp-alt__hint { font-size: 0.76rem; line-height: 1.45; color: var(--muted); } .easwari-otp { max-width: 24rem; margin: 0 0 2rem; border: 1px solid var(--green-deep); border-radius: var(--r); background: var(--surface); padding: 1.3rem 1.4rem; } .easwari-otp h2 { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; color: var(--ink); margin: 0 0 0.7rem; } .easwari-otp__form { display: flex; flex-direction: column; align-items: stretch; gap: 0.45rem; } .easwari-otp__form label { font-size: 0.8rem; font-weight: 600; color: var(--ink); } .easwari-otp__form input { width: 100%; font-family: var(--ui); font-size: 0.92rem; padding: 0.58rem 0.7rem; border: 1px solid var(--line-firm); border-radius: 3px; background: var(--paper); color: var(--ink); } .easwari-otp__form input:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); background: var(--surface); } /* Read off a screen and typed digit by digit; give it room. */ .easwari-otp__code { font-family: var(--mono) !important; font-size: 1.3rem !important; letter-spacing: 0.35em; text-align: center; } .easwari-otp__form button.button { width: 100%; margin-top: 0.35rem; } .easwari-otp__hint { margin: 0.3rem 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--muted); } .easwari-otp__notice { background: var(--green-bg); border: 1px solid color-mix(in srgb, var(--green) 30%, transparent); border-radius: var(--r); padding: 0.7rem 0.9rem; margin: 0 0 1rem; font-size: 0.85rem; line-height: 1.5; color: var(--green-deep); } /* ------------------------------------------------------------------ * WhatsApp chat button * * Sits above the safe-area inset so it clears the home indicator on a * phone, and is suppressed on checkout by the plugin — a floating button * next to Place Order is a misclick that costs an order. * * Keep this block last, or at least never truncate the file above it: an * earlier release removed these rules by rewriting everything after a * comment further up, which left the button unstyled and stranded at the * very bottom of the page. * --------------------------------------------------------------- */ .easwari-chat { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 60; display: inline-flex; align-items: center; gap: 0.5rem; width: auto; padding: 0.7rem 1.05rem; border-radius: 99px; background: #1FA855; /* WhatsApp's own green: people recognise it instantly. */ color: #FFFFFF; font-family: var(--ui); font-size: 0.88rem; font-weight: 600; text-decoration: none; box-shadow: 0 6px 20px rgba(16, 89, 42, 0.28); transition: transform 0.15s ease, box-shadow 0.15s ease; } .easwari-chat:hover, .easwari-chat:focus-visible { color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16, 89, 42, 0.34); } .easwari-chat:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .easwari-chat svg { width: 21px; height: 21px; fill: currentColor; flex: 0 0 auto; } /* The trade desk wears the house green, so an approved account can tell at a * glance that it is reaching its own desk and not the retail line. */ .easwari-chat.is-trade { background: var(--green-deep); } @media (max-width: 30rem) { /* Icon only on a small phone: the label costs more width than it earns. */ .easwari-chat span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } .easwari-chat { padding: 0.8rem; gap: 0; } .easwari-chat svg { width: 23px; height: 23px; } } @media (prefers-reduced-motion: reduce) { .easwari-chat { transition: none; } .easwari-chat:hover, .easwari-chat:focus-visible { transform: none; } }