/* ========================================================================= Boof — storefront styles. Mobile first, RTL. Pink = brand moments · Black = text & secondary actions · Yellow = the one action that moves money (add to cart / pay). ========================================================================= */ :root { --pink: #E31D6C; --sun: #FBBC34; --ink: #161115; --pink-ink: color-mix(in srgb, var(--pink) 78%, #000); --pink-50: color-mix(in srgb, var(--pink) 7%, #fff); --pink-100: color-mix(in srgb, var(--pink) 16%, #fff); --sun-press: color-mix(in srgb, var(--sun) 88%, #000); --sun-ink: #1B1400; /* 2.4.1: the "money" buttons (add to cart / pay). Black by default, yellow by choice (Boof ← צבעים). On dark cards the black button turns white. */ --btn: var(--ink); --btn-ink: #fff; --btn-press: color-mix(in srgb, var(--btn) 82%, #fff); --btn-shadow: 0 2px 8px rgba(22,17,21,.18); --btn-dark: #fff; --btn-dark-ink: var(--ink); --ink-2: color-mix(in srgb, var(--ink) 76%, #fff); --ink-3: color-mix(in srgb, var(--ink) 52%, #fff); --line: color-mix(in srgb, var(--pink) 6%, #ECE8EA); --shelf: color-mix(in srgb, var(--pink) 3%, #F7F5F6); --paper: #fff; --ok: #157A43; --ok-50: #EAF7EF; --err: #B42323; --hero-bg: var(--pink); --scrim: rgba(22, 17, 21, .42); --f: "Rubik", "Arial Hebrew", Arial, sans-serif; --r-s: 10px; --r-m: 16px; --r-l: 24px; --r-pill: 999px; --shadow-1: 0 1px 2px rgba(22,17,21,.06), 0 2px 8px rgba(22,17,21,.05); --shadow-2: 0 12px 40px rgba(22,17,21,.18), 0 2px 8px rgba(22,17,21,.08); --gutter: 16px; --cols-m: 2; --cols-d: 4; --hdr-h: 112px; --tabbar-h: 0px; } @media (min-width: 768px) { :root { --gutter: 28px; } } /* Site width per device (Boof → פרטי האתר ורוחב) */ :root { --gutter: var(--g-m, 16px); --wrap-max: 100%; } @media (min-width: 768px) { :root { --gutter: var(--g-t, 28px); --wrap-max: var(--w-t, 100%); } } @media (min-width: 1200px) { :root { --gutter: var(--g-d, 28px); --wrap-max: var(--w-d, 1240px); } } body.has-tabbar { --tabbar-h: 64px; } @media (min-width: 768px) { body.has-tabbar { --tabbar-h: 0px; } } /* ---------- Base ---------- */ [hidden] { display: none !important; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 12px); } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); } img { max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; text-wrap: balance; } p { margin: 0 0 1em; } :focus-visible { outline: 3px solid color-mix(in srgb, var(--pink) 55%, transparent); outline-offset: 2px; border-radius: 8px; } .screen-reader-text, .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; top: -60px; inset-inline-start: 12px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-pill); } .skip-link:focus { top: 12px; } .num, .price, .amount { font-variant-numeric: tabular-nums; } .wrap { width: 100%; max-width: var(--wrap-max, 1240px); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); } .muted { color: var(--ink-3); } @media (max-width: 767px) { .hide-m { display: none !important; } } .ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ico-xl { width: 44px; height: 44px; color: var(--ink-3); } .spacer { flex: 1; } /* Type scale — tracking tightens as size grows */ .h-page { font-size: clamp(26px, 5vw, 36px); font-weight: 800; letter-spacing: -0.02em; margin: 4px 0 6px; } .h-section { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; margin: 0; } @media (min-width: 768px) { .h-section { font-size: 24px; } } .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--pink-ink); } .eyebrow-sun { color: var(--sun); } .link { color: var(--pink-ink); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; } .link .ico { width: 16px; height: 16px; } .link.center { justify-content: center; } /* ---------- Buttons: feedback on press, instantly ---------- */ .btn, .button, button.button, input.button, a.button, .wc-block-components-button { --bg: var(--ink); --fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--r-pill); border: 0; background: var(--bg); color: var(--fg); font-weight: 700; font-size: 16px; line-height: 1.2; text-align: center; transition: transform 100ms ease-out, background-color 120ms ease-out, opacity 120ms; user-select: none; touch-action: manipulation; cursor: pointer; } .btn:active, .button:active { transform: scale(.97); } .btn .ico, .button .ico { width: 20px; height: 20px; } .btn-buy, .single_add_to_cart_button.button, .checkout-button.button, #place_order, .woocommerce-mini-cart__buttons .checkout { --bg: var(--btn); --fg: var(--btn-ink); box-shadow: var(--btn-shadow); } .btn-buy:hover, .single_add_to_cart_button.button:hover, #place_order:hover, .checkout-button.button:hover { --bg: var(--btn-press); } .feature.ink .btn-buy, .acc-last .btn-buy { --bg: var(--btn-dark); --fg: var(--btn-dark-ink); box-shadow: none; } .feature.ink .btn-buy:hover, .acc-last .btn-buy:hover { --bg: color-mix(in srgb, var(--btn-dark) 88%, #000); } .btn-ghost { --bg: transparent; --fg: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); } .btn-ghost-light { --bg: transparent; --fg: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); } .btn-block { width: 100%; } .btn-sm { min-height: 42px; font-size: 15px; padding: 0 18px; } .btn-lg { min-height: 56px; font-size: 17px; } .button.disabled, .button:disabled, .btn[disabled] { opacity: .45; pointer-events: none; box-shadow: none; } .button.loading { opacity: .7; } .button.added::after { content: none; } .added_to_cart { display: none !important; } .icon-btn { width: 44px; height: 44px; border-radius: var(--r-pill); display: inline-grid; place-items: center; position: relative; flex: none; transition: transform 100ms ease-out, background-color 120ms; } .icon-btn:active { transform: scale(.92); background: var(--shelf); } .dot, .boof-cart-count.dot { position: absolute; top: 2px; inset-inline-start: calc(50% + 4px); min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--pink); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; will-change: transform; } .chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-height: 38px; padding: 0 14px; border-radius: var(--r-pill); background: var(--shelf); color: var(--ink-2); font-size: 14px; font-weight: 500; transition: transform 100ms ease-out, background-color 120ms; } .chip:active { transform: scale(.96); } .chip[aria-current="page"], .chip[aria-pressed="true"] { background: var(--ink); color: #fff; } .chip .count { font-size: 12px; color: var(--ink-3); } .scroller { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); padding-block: 2px; } .scroller::-webkit-scrollbar { display: none; } .scroller > * { scroll-snap-align: start; flex: none; } /* ---------- Header: translucent material, content scrolls under ---------- */ .hdr { position: sticky; top: 0; z-index: 40; background: #fff; transition: box-shadow 200ms ease-out; } .boof-glass .hdr { background: rgba(255,255,255,.76); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); } .admin-bar .hdr { top: 46px; } @media (min-width: 783px) { .admin-bar .hdr { top: 32px; } } @media (max-width: 600px) { .admin-bar .hdr { top: 0; } } .hdr.is-scrolled { box-shadow: 0 1px 0 rgba(22,17,21,.06), 0 8px 24px -12px rgba(22,17,21,.18); } .hdr-row { display: flex; align-items: center; gap: 6px; padding-block: 8px; } .logo { display: inline-flex; align-items: center; flex: none; } .logo img, .woocommerce .logo img { height: var(--logo-h-m, 40px) !important; width: auto !important; max-width: min(240px, 52vw); object-fit: contain; display: block; } .hdr-row .logo { margin-inline-end: auto; } .hdr-actions { display: flex; align-items: center; gap: 2px; } .hdr-search-d { display: none; } .hdr-search-m { padding-bottom: 10px; } .cart-pill { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: var(--r-pill); background: var(--pink); color: #fff; font-weight: 700; font-size: 14px; transition: transform 100ms ease-out; margin-inline-start: 4px; } .cart-pill:active { transform: scale(.96); } .cart-pill .ico { width: 20px; height: 20px; } .cart-pill .boof-cart-total:empty { display: none; } .cart-pill .boof-cart-total .amount { color: inherit; } .boof-cart-count.badge { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #fff; color: var(--pink-ink); font-size: 12px; line-height: 20px; text-align: center; will-change: transform; } .boof-search { position: relative; display: flex; align-items: center; gap: 8px; height: 46px; padding-inline: 14px; border-radius: var(--r-pill); background: rgba(22,17,21,.055); color: var(--ink-3); } .boof-search input[type="search"] { border: 0; background: none; outline: 0; flex: 1; min-width: 0; height: 100%; font-size: 16px; color: var(--ink); } .boof-search input::placeholder { color: var(--ink-3); } .boof-search input::-webkit-search-cancel-button { display: none; } .boof-search:focus-within { background: #fff; box-shadow: 0 0 0 2px var(--ink); } .live-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50; background: #fff; border-radius: var(--r-m); box-shadow: var(--shadow-2); padding: 6px; display: grid; gap: 2px; max-height: 70vh; overflow-y: auto; color: var(--ink); } .live-results a { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 12px; font-size: 14px; } .live-results a:hover, .live-results a[aria-selected="true"] { background: var(--shelf); } .live-results img { width: 48px; height: 48px; object-fit: contain; background: var(--shelf); border-radius: 10px; mix-blend-mode: multiply; } .live-results .lr-price { font-weight: 700; white-space: nowrap; } .live-results .lr-oos { color: var(--ink-3); font-size: 12px; } .live-results .lr-all { display: block; text-align: center; padding: 10px; color: var(--pink-ink); font-weight: 600; grid-template-columns: none; } .live-results .lr-empty { padding: 14px; color: var(--ink-3); text-align: center; } .pet-nav, .main-nav { display: none; } @media (min-width: 1024px) { .hdr-row { gap: 20px; padding-block: 12px; } .hdr-row .logo { margin-inline-end: 0; } .hdr-search-d { display: block; flex: 1; max-width: 560px; margin-inline-end: auto; } .hdr-search-m { display: none; } .menu-btn { display: none; } .hdr .logo img { height: var(--logo-h, 48px) !important; max-width: 320px; } .pet-nav { display: flex; gap: 4px; padding-bottom: 8px; overflow-x: auto; scrollbar-width: none; } .pet-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 6px; border-radius: var(--r-pill); font-weight: 600; font-size: 15px; color: var(--ink-2); white-space: nowrap; transition: background-color 120ms, transform 100ms; } .pet-nav a img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; } .pet-nav a:hover, .pet-nav a[aria-current] { background: var(--shelf); color: var(--ink); } .pet-nav a:active { transform: scale(.97); } .main-nav { display: block; padding-bottom: 6px; } .main-nav .menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px; } .main-nav .menu > li { position: relative; } .main-nav .menu > li > a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-pill); font-weight: 600; color: var(--ink-2); } .main-nav .menu > li > a:hover, .main-nav .current-menu-item > a, .main-nav .current-menu-ancestor > a { background: var(--shelf); color: var(--ink); } .main-nav .sub-menu { list-style: none; margin: 0; padding: 8px; position: absolute; top: 100%; inset-inline-start: 0; min-width: 240px; background: #fff; border-radius: var(--r-m); box-shadow: var(--shadow-2); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 140ms, transform 180ms, visibility 0s 180ms; z-index: 60; } .main-nav li:hover > .sub-menu, .main-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; transition: opacity 140ms, transform 180ms; } .main-nav .sub-menu a { display: block; padding: 8px 12px; border-radius: 10px; font-size: 14px; color: var(--ink-2); } .main-nav .sub-menu a:hover { background: var(--shelf); color: var(--ink); } .main-nav .sub-menu .sub-menu { position: static; box-shadow: none; opacity: 1; visibility: visible; transform: none; padding: 0 12px 0 0; min-width: 0; } } .trust { background: var(--ink); color: #F7EFF3; font-size: 13px; } .trust .scroller { gap: 22px; padding-block: 9px; margin-inline: 0; padding-inline: 0; } .trust span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .trust .ico { width: 17px; height: 17px; stroke: var(--sun); } @media (min-width: 1024px) { .trust .scroller { justify-content: center; gap: 44px; } } /* Minimal checkout header */ .co-hdr { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 1px 0 var(--line); } .co-hdr .wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-block: 10px; } .secure { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ok); } .secure .ico { width: 18px; height: 18px; } /* ---------- Sections ---------- */ .section { padding-block: 28px 8px; display: grid; gap: 14px; } @media (min-width: 768px) { .section { padding-block: 44px 8px; gap: 18px; } } .section-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; } .admin-hint { border: 1.5px dashed var(--pink-100); border-radius: var(--r-m); padding: 14px; color: var(--ink-2); font-size: 14px; } /* Hero */ .hero { display: grid; gap: 12px; padding-top: 14px; } .hero-main { position: relative; overflow: hidden; border-radius: var(--r-l); background: var(--hero-bg); color: #fff; display: grid; padding: 22px 20px 0; } .hero-main .copy { display: grid; gap: 10px; align-content: start; position: relative; z-index: 1; } .hero-main .tag { justify-self: start; font-size: 12px; font-weight: 700; letter-spacing: .03em; background: rgba(255,255,255,.18); padding: 5px 10px; border-radius: var(--r-pill); } .hero-main .big { font-weight: 800; font-size: clamp(64px, 19vw, 132px); line-height: .86; letter-spacing: -0.045em; display: inline-flex; align-items: baseline; } .hero-main .big small { font-size: .42em; letter-spacing: -0.02em; margin-inline-start: 6px; } .h-hero { font-weight: 800; font-size: clamp(26px, 6vw, 40px); line-height: 1.05; letter-spacing: -0.02em; margin: 0; } .hero-main p { margin: 0; font-size: 15px; color: rgba(255,255,255,.88); max-width: 36ch; } .hero-main .actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 6px; } .hero-art { position: relative; height: 210px; margin-top: 4px; } .hero-art .art-main { position: absolute; inset-inline-start: -10px; bottom: -18px; width: 230px; height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.22)); } .hero-art .art-main.is-round { border-radius: 50%; clip-path: circle(48.5%); aspect-ratio: 1; object-fit: cover; } .hero-art .art-pack { position: absolute; inset-inline-end: 6px; bottom: 14px; width: 130px; transform: rotate(-6deg); background: #fff; padding: 8px; border-radius: 16px; filter: drop-shadow(0 16px 22px rgba(0,0,0,.25)); } .hero-side { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .mini-promo { position: relative; overflow: hidden; border-radius: var(--r-m); padding: 14px; display: grid; gap: 6px; align-content: space-between; min-height: 150px; background: var(--shelf); transition: transform 100ms ease-out; } .mini-promo:active { transform: scale(.98); } .mini-promo b { font-size: 16px; line-height: 1.2; letter-spacing: -0.01em; max-width: 12ch; position: relative; z-index: 1; } .mini-promo .p { font-weight: 800; font-size: 26px; letter-spacing: -0.03em; position: relative; z-index: 1; color: var(--pink-ink); } .mini-promo img { position: absolute; inset-inline-end: 10px; bottom: 10px; width: 84px; mix-blend-mode: multiply; } .mini-promo.dark { background: var(--ink); color: #fff; } .mini-promo.dark .eyebrow { color: #C9BFC6; } .mini-promo.dark .p { color: #fff; } .mini-promo.dark img { mix-blend-mode: normal; background: #fff; border-radius: 14px; padding: 6px; } @media (min-width: 900px) { .hero { grid-template-columns: 1.7fr 1fr; padding-top: 22px; } .hero.hero-solo { grid-template-columns: 1fr; } .hero-main { grid-template-columns: 1.1fr 1fr; padding: 40px 40px 0; min-height: 380px; } .hero-main .copy { padding-bottom: 40px; } .hero-art { height: auto; } .hero-art .art-main { width: 340px; bottom: -24px; } .hero-art .art-pack { width: 160px; bottom: 30px; } .hero-side { grid-template-columns: 1fr; } .mini-promo img { width: 110px; } } /* Pets */ .pets { gap: 14px; } .pet { display: grid; justify-items: center; gap: 6px; width: 78px; font-size: 13px; font-weight: 600; color: var(--ink-2); text-align: center; transition: transform 100ms ease-out; } .pet:active { transform: scale(.95); } .pet img, .pet-ph { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; } .pet-ph { display: grid; place-items: center; background: var(--pink-50); color: var(--pink-ink); font-weight: 800; font-size: 28px; } @media (min-width: 900px) { .pets.scroller { justify-content: space-between; overflow: visible; margin-inline: 0; padding-inline: 0; } .pet { width: 120px; font-size: 15px; } .pet img, .pet-ph { width: 112px; height: 112px; } } /* Segmented tabs with a spring-driven indicator */ .seg-wrap { overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); } .seg { position: relative; display: inline-flex; padding: 4px; border-radius: var(--r-pill); background: var(--shelf); } .seg button { position: relative; z-index: 1; height: 38px; padding: 0 16px; border-radius: var(--r-pill); font-weight: 600; font-size: 14px; color: var(--ink-2); white-space: nowrap; transition: color 160ms; } .seg button[aria-selected="true"] { color: #fff; } .seg .thumb { position: absolute; top: 4px; left: 0; height: 38px; width: 0; border-radius: var(--r-pill); background: var(--ink); will-change: transform, width; } /* ---------- Product cards ---------- */ .products-grid { display: grid; grid-template-columns: repeat(var(--cols-m), minmax(0, 1fr)); gap: 20px 12px; } @media (min-width: 768px) { .products-grid { grid-template-columns: repeat(var(--cols-t, 3), minmax(0, 1fr)); gap: 28px 20px; } } @media (min-width: 1100px) { .products-grid { grid-template-columns: repeat(var(--cols-d), minmax(0, 1fr)); } } /* Product sliders: how many cards are visible (Boof → שורות מוצרים) */ .scroller.rail { --rg: 12px; --rv: var(--rv-m, 2.2); gap: var(--rg); } .rail > .card { width: calc((100% - (var(--rv) - 1) * var(--rg)) / var(--rv)); flex: none; } @media (min-width: 768px) { .scroller.rail { --rg: 16px; --rv: var(--rv-t, 3.5); } } @media (min-width: 1100px) { .scroller.rail { --rg: 20px; --rv: var(--rv-d, 5); } } .card { position: relative; display: grid; gap: 8px; align-content: start; min-width: 0; } .card .well { position: relative; aspect-ratio: 1; border-radius: var(--r-m); background: var(--shelf); overflow: hidden; display: grid; place-items: center; transition: transform 100ms ease-out; } .card .well:active { transform: scale(.98); } .card .well img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; } .card .badges { position: absolute; top: 8px; inset-inline-start: 8px; display: grid; gap: 4px; justify-items: start; } .badge-sale { background: var(--pink); color: #fff; font-weight: 700; font-size: 12px; padding: 3px 8px; border-radius: var(--r-pill); } .badge-deal { background: #fff; color: var(--pink-ink); font-weight: 700; font-size: 11.5px; padding: 3px 8px; border-radius: var(--r-pill); box-shadow: var(--shadow-1); } .badge-oos { background: rgba(22,17,21,.8); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: var(--r-pill); } .card .fav { position: absolute; top: 4px; inset-inline-end: 4px; width: 40px; height: 40px; color: var(--ink-3); } .fav[aria-pressed="true"] { color: var(--pink); } .fav[aria-pressed="true"] .ico { fill: var(--pink); } .card .name { font-size: 14px; line-height: 1.35; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; } .card .meta { font-size: 12.5px; color: var(--ink-3); margin-top: -4px; } .card .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .card .price, .mini .num { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--ink); } .price .from { font-size: 12px; font-weight: 500; color: var(--ink-3); margin-inline-end: 3px; } .price del { font-size: 13px; color: var(--ink-3); font-weight: 400; margin-inline-start: 6px; } .price ins { text-decoration: none; } .add { width: 42px; height: 42px; border-radius: 50%; background: var(--btn); color: var(--btn-ink); display: grid; place-items: center; flex: none; transition: transform 100ms ease-out, background-color 120ms; box-shadow: var(--btn-shadow); } .add:active { transform: scale(.9); background: var(--btn-press); } .add .ico { stroke-width: 2.4; width: 20px; height: 20px; } .add.loading { opacity: .6; pointer-events: none; } .add.added { background: var(--ok); color: #fff; } .card.is-oos .well img { opacity: .45; filter: grayscale(.6); } .notify { font-size: 13px; font-weight: 600; color: var(--pink-ink); } /* ---------- Deals ---------- */ .deal-list { display: grid; gap: 12px; } @media (min-width: 768px) { .deal-list { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; } } .deal { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 18px; border-radius: var(--r-m); background: var(--pink-50); } .deal-copy { display: grid; gap: 6px; min-width: 0; } .deal h3 { margin: 0; font-size: 18px; letter-spacing: -0.01em; } .deal .terms { margin: 0; font-size: 13px; color: var(--ink-2); } .deal .unit { font-size: 12px; font-weight: 700; color: var(--pink-ink); } .deal img { width: 100px; height: 100px; object-fit: contain; mix-blend-mode: multiply; } /* ---------- Features ---------- */ .two { display: grid; gap: 12px; } @media (min-width: 768px) { .two { grid-template-columns: 1fr 1fr; gap: 20px; } } .feature { border-radius: var(--r-l); padding: 22px; display: grid; gap: 10px; align-content: start; background: var(--shelf); } .feature p { margin: 0; } .feature.ink { background: var(--ink); color: #fff; } .feature.ink .muted { color: #C2B8BF; } .copyline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 15px; } .copyline .ico { color: var(--pink-ink); } .copyline .val { font-weight: 700; } .small-btn { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: var(--r-pill); background: #fff; box-shadow: var(--shadow-1); } /* Brands, blog */ .brands { gap: 8px; } .brand { display: inline-grid; place-items: center; min-height: 48px; padding: 8px 18px; border-radius: var(--r-m); background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-weight: 700; font-size: 14px; color: var(--ink-2); white-space: nowrap; } .brand img { max-height: 32px; width: auto; } .posts > .post-card { width: 260px; } .post-grid { display: grid; gap: 22px 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .post-card { display: grid; gap: 8px; align-content: start; } .post-img { position: relative; display: block; aspect-ratio: 16/11; border-radius: var(--r-m); overflow: hidden; background: var(--shelf); } .post-img img { width: 100%; height: 100%; object-fit: cover; } .post-img .date { position: absolute; top: 10px; inset-inline-start: 10px; background: #fff; border-radius: 12px; padding: 4px 10px; font-weight: 800; font-size: 18px; line-height: 1.1; text-align: center; display: grid; } .post-img .date small { font-size: 11px; font-weight: 600; color: var(--ink-3); } .post-cat { justify-self: start; font-size: 12px; font-weight: 700; color: var(--pink-ink); } .post-card h3 { font-size: 16px; margin: 0; line-height: 1.35; } /* SEO text */ .seo-text details summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; } .seo-text details summary::-webkit-details-marker { display: none; } .seo-text .more { color: var(--pink-ink); font-weight: 600; font-size: 14px; } .seo-text details[open] .more { display: none; } .seo-text .entry { color: var(--ink-2); padding-top: 10px; } /* ---------- Footer ---------- */ .ftr { margin-top: 48px; background: var(--ink); color: #E9E1E6; padding-block: 36px 24px; font-size: 14px; } .ftr .cols { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; } .ftr-about { grid-column: 1 / -1; display: grid; gap: 10px; } .ftr-logo img { height: 48px; background: #fff; border-radius: 12px; padding: 4px 10px; } .ftr p { margin: 0; color: #C2B8BF; max-width: 40ch; } .ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: #C2B8BF; } .ftr ul li { display: flex; align-items: center; gap: 8px; } .ftr ul .ico { width: 18px; height: 18px; color: var(--sun); } .ftr a:hover { color: #fff; } .ftr-col h2 { font-size: 14px; color: #fff; margin: 0 0 10px; } .ftr-bottom { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; color: #9A8E96; font-size: 13px; } @media (min-width: 900px) { .ftr .cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .ftr-about { grid-column: auto; } } /* ---------- Bottom tab bar — translucent material ---------- */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 6px max(6px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px)); background: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border-top: 1px solid rgba(255,255,255,.6); box-shadow: 0 -10px 30px -18px rgba(22,17,21,.35); transition: transform 260ms cubic-bezier(.2,.8,.2,1); } .tabbar > * { position: relative; display: grid; justify-items: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--ink-3); padding: 4px 0; transition: transform 100ms ease-out; } .tabbar > *:active { transform: scale(.92); } .tabbar [aria-current="page"] { color: var(--pink-ink); } .tabbar.is-hidden { transform: translateY(110%); } @media (min-width: 768px) { .tabbar { display: none; } } .wa-float { position: fixed; z-index: 44; inset-inline-end: 16px; bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-2); } /* ---------- Overlays: drawers & sheet ---------- */ .scrim { position: fixed; inset: 0; z-index: 90; background: var(--scrim); opacity: 0; } .panel { position: fixed; z-index: 91; background: #fff; display: flex; flex-direction: column; will-change: transform; outline: 0; } .panel[hidden] { display: none; } .drawer { top: 0; bottom: 0; width: min(420px, 92vw); box-shadow: var(--shadow-2); touch-action: pan-y; } .drawer-start { left: 0; border-radius: 0 22px 22px 0; } /* RTL: cart icon sits on the left → drawer comes from the left */ .drawer-end { right: 0; border-radius: 22px 0 0 22px; } .sheet { left: 0; right: 0; bottom: 0; max-height: 88vh; border-radius: 22px 22px 0 0; box-shadow: var(--shadow-2); } @media (min-width: 768px) { .sheet { left: 50%; right: auto; width: 540px; margin-left: -270px; } } .grabber { flex: none; padding: 8px 0 4px; display: grid; place-items: center; cursor: grab; touch-action: none; } .grabber i { width: 40px; height: 5px; border-radius: 3px; background: #DCD2D8; } .panel-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 18px; touch-action: none; } .panel-head h2 { margin: 0; font-size: 19px; letter-spacing: -0.01em; } .panel-head .logo img { height: 34px; } .panel-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 4px 18px 18px; display: grid; gap: 16px; align-content: start; } .panel-foot { flex: none; padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); display: grid; gap: 10px; background: #fff; } .panel-foot[hidden] { display: none; } .boof-cart-inner { flex: 1; min-height: 0; display: flex; flex-direction: column; } .m-cats { display: grid; } .m-cats a { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; font-weight: 600; font-size: 16px; border-bottom: 1px solid var(--line); } .m-cats img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; } .m-cats .ico { width: 18px; height: 18px; color: var(--ink-3); } .m-menu ul, .m-top ul { list-style: none; margin: 0; padding: 0; } .m-menu > ul > li > a { display: block; padding: 12px 0; font-weight: 600; font-size: 16px; border-bottom: 1px solid var(--line); } .m-menu .sub-menu a { display: block; padding: 8px 14px 8px 0; color: var(--ink-2); } .m-top ul { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 8px; color: var(--ink-3); font-size: 14px; } /* Cart drawer content */ .ship-meter { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r-m); background: var(--shelf); font-size: 14px; } .ship-meter.done { background: var(--ok-50); color: var(--ok); font-weight: 600; } .ship-meter .ico { width: 18px; height: 18px; vertical-align: -4px; } .ship-meter-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; } .city-pick { border: 0; background: none; padding: 2px 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--pink-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; min-height: 28px; } .ship-meter.done .city-pick { color: var(--ok); } .city-sheet { display: grid; gap: 12px; } .city-sheet > p { margin: 0; } .city-search { background: var(--shelf); } .city-opts { display: grid; gap: 2px; min-height: 120px; align-content: start; } .city-opt { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border: 0; border-radius: 12px; background: none; font: inherit; font-size: 16px; color: var(--ink); text-align: start; cursor: pointer; transition: background-color 120ms; } .city-opt:hover, .city-opt:focus-visible { background: var(--shelf); } .city-opt:active { background: var(--pink-50); } .city-opt small { font-size: 13px; color: var(--ok); font-weight: 600; } .city-opt.other small { color: var(--ink-3); font-weight: 500; } .city-empty { padding: 12px; margin: 0; text-align: center; } .meter { height: 8px; border-radius: 4px; background: rgba(22,17,21,.08); overflow: hidden; } .meter i { display: block; height: 100%; width: 100%; background: var(--pink); border-radius: 4px; transform-origin: right center; transform: scaleX(var(--p, 0)); will-change: transform; } .done .meter i { background: var(--ok); } .lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .line { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; transition: opacity 160ms; } .line.is-busy { opacity: .5; pointer-events: none; } .line-img img { width: 64px; height: 64px; object-fit: contain; background: var(--shelf); border-radius: 12px; mix-blend-mode: multiply; } .line-main { min-width: 0; display: grid; gap: 2px; } .line .n { font-size: 14px; line-height: 1.3; } .line .v { font-size: 12.5px; color: var(--ink-3); } .line .r { display: grid; justify-items: end; gap: 6px; } .line .rm { font-size: 12.5px; color: var(--ink-3); text-decoration: underline; padding: 2px; } /* Quantity stepper — same look everywhere; input fits 3 digits and can be typed */ .qty, .quantity.qty-ready { display: inline-flex; align-items: center; gap: 2px; height: 48px; padding: 4px; border-radius: var(--r-pill); background: var(--shelf); box-shadow: none; flex: none; } .qty button, .quantity.qty-ready button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); font-size: 20px; font-weight: 500; line-height: 1; box-shadow: 0 1px 2px rgba(22,17,21,.1), 0 1px 6px rgba(22,17,21,.06); transition: transform 100ms ease-out, background-color 120ms; } .qty button:active, .quantity.qty-ready button:active { transform: scale(.88); background: var(--pink-50); } .qty button:disabled { opacity: .35; box-shadow: none; } .qty input, .qty output, .quantity.qty-ready input.qty { width: 3.4ch; min-width: 46px; height: 40px; padding: 0 2px; border: 0; border-radius: 10px; background: transparent; text-align: center; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--ink); -moz-appearance: textfield; outline: 0; } .qty input:focus, .quantity.qty-ready input.qty:focus { background: #fff; box-shadow: inset 0 0 0 2px var(--ink); } .qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button, .quantity input::-webkit-outer-spin-button, .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .qty.sm, .cart-line .quantity.qty-ready { height: 40px; padding: 3px; } .qty.sm button, .cart-line .quantity.qty-ready button { width: 34px; height: 34px; font-size: 18px; } .qty.sm input, .cart-line .quantity.qty-ready input.qty { height: 34px; min-width: 42px; } .addons { display: grid; gap: 10px; } .addons > b { font-size: 15px; } .mini-rail > .mini { width: 132px; display: grid; gap: 4px; font-size: 13px; position: relative; } .mini .well { aspect-ratio: 1; background: var(--shelf); border-radius: 12px; display: grid; place-items: center; overflow: hidden; } .mini .well img { width: 78%; height: 78%; object-fit: contain; mix-blend-mode: multiply; } .mini .add { position: absolute; top: 92px; inset-inline-start: 6px; width: 34px; height: 34px; } .mini-n { line-height: 1.3; } .mini .num { font-size: 14px; } .totals { display: grid; gap: 6px; font-size: 14px; } .totals > div { display: flex; justify-content: space-between; gap: 10px; } .totals .disc { color: var(--ok); } .totals .muted-row { color: var(--ink-3); } .empty { text-align: center; padding: 40px 10px; color: var(--ink-3); display: grid; gap: 12px; justify-items: center; } .empty b { color: var(--ink); font-size: 17px; } /* Quick-add sheet */ .qa-head { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; } .qa-head img { width: 76px; height: 76px; object-fit: contain; background: var(--shelf); border-radius: 14px; mix-blend-mode: multiply; } .qa-head .n { font-weight: 600; line-height: 1.3; } .qa-head .price { font-weight: 800; font-size: 20px; margin-top: 4px; display: block; } .sw-group { display: grid; gap: 8px; } .sw-label { font-size: 14px; font-weight: 600; display: flex; gap: 6px; } .sw-label span { font-weight: 400; color: var(--ink-2); } .sw-opts { display: flex; flex-wrap: wrap; gap: 8px; } .sw-opt { min-height: 44px; padding: 8px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 14px; font-weight: 600; transition: transform 100ms ease-out, box-shadow 140ms; text-align: start; display: grid; gap: 1px; } .sw-opt:active { transform: scale(.97); } .sw-opt[aria-pressed="true"] { box-shadow: inset 0 0 0 2.5px var(--ink); } .sw-opt.is-oos { color: var(--ink-3); background: repeating-linear-gradient(135deg, #fff 0 6px, var(--shelf) 6px 12px); text-decoration: line-through; text-decoration-color: var(--ink-3); } .sw-opt:disabled { opacity: .35; cursor: not-allowed; } .sw-opt small { font-weight: 400; color: var(--ink-3); font-size: 12px; text-decoration: none; } /* Toast */ .toast { position: fixed; z-index: 95; left: 50%; bottom: calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; max-width: calc(100vw - 32px); background: rgba(22,17,21,.92); color: #fff; border-radius: var(--r-pill); padding: 10px 10px 10px 18px; display: flex; gap: 14px; align-items: center; font-size: 14px; box-shadow: var(--shadow-2); transition: transform 260ms cubic-bezier(.2,.8,.2,1), opacity 200ms; } .toast.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; } .toast #toastMsg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .toast button { color: var(--sun); font-weight: 700; padding: 6px 10px; border-radius: var(--r-pill); white-space: nowrap; } /* ---------- Archive ---------- */ .wc-main { padding-bottom: 20px; } .crumbs { font-size: 13px; color: var(--ink-3); padding-top: 14px; display: flex; gap: 6px; flex-wrap: wrap; } .crumbs a { color: var(--ink-2); } .cat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .chips { padding-block: 6px 2px; gap: 8px; } .toolbar { position: sticky; top: var(--hdr-h); z-index: 30; display: flex; gap: 8px; align-items: center; padding-block: 10px; margin-block: 4px 8px; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .toolbar .chip { background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); } .toolbar .chip .ico { width: 18px; height: 18px; } .woocommerce-ordering { margin: 0; } .woocommerce-ordering select { appearance: none; border: 0; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); border-radius: var(--r-pill); min-height: 38px; padding: 0 14px; font-size: 14px; font-weight: 500; max-width: 52vw; } .woocommerce-result-count { margin: 0; font-size: 13px; } .cat-layout { display: grid; gap: 16px; } .side-filters { display: none; } @media (min-width: 1024px) { .cat-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 36px; } .side-filters { display: block; position: sticky; top: calc(var(--hdr-h) + 72px); align-self: start; max-height: calc(100vh - var(--hdr-h) - 90px); overflow-y: auto; } .toolbar .filter-btn { display: none; } } .filters { display: grid; gap: 22px; } .fgroup { display: grid; gap: 8px; } .fgroup h3 { margin: 0; font-size: 14px; } .check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); min-height: 34px; cursor: pointer; } .check input { width: 20px; height: 20px; accent-color: var(--pink); margin: 0; } .check .count { margin-inline-start: auto; color: var(--ink-3); font-size: 12px; } .switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 600; min-height: 40px; cursor: pointer; } .switch input { appearance: none; width: 50px; height: 30px; border-radius: 15px; background: #DDD3D9; position: relative; transition: background-color 180ms; margin: 0; flex: none; cursor: pointer; } .switch input::after { content: ""; position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform 260ms cubic-bezier(.2,.9,.3,1.1); } .switch input:checked { background: var(--ok); } .switch input:checked::after { transform: translateX(-20px); } .range-row { display: flex; gap: 8px; align-items: center; } .range-row input { width: 100%; min-width: 0; height: 42px; border-radius: var(--r-s); border: 1.5px solid var(--line); padding: 0 10px; font-size: 16px; } .filters-actions { display: grid; gap: 10px; justify-items: center; } .sheet .filters-actions { position: sticky; bottom: -18px; background: #fff; padding-block: 10px; } .woocommerce-pagination { margin-top: 28px; } .woocommerce-pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 0; margin: 0; border: 0; } .woocommerce-pagination li { border: 0 !important; } .woocommerce-pagination a, .woocommerce-pagination span { display: grid; place-items: center; min-width: 42px; height: 42px; border-radius: var(--r-pill); background: var(--shelf); font-weight: 600; padding: 0 12px; } .woocommerce-pagination .current { background: var(--ink); color: #fff; } .woocommerce-info, .woocommerce-message, .woocommerce-error, .woocommerce-notices-wrapper > * { list-style: none; margin: 0 0 16px; padding: 14px 16px; border-radius: var(--r-m); background: var(--shelf); border: 0; font-size: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: space-between; } .woocommerce-message { background: var(--ok-50); } .woocommerce-error { background: #FDECEC; color: var(--err); } .woocommerce-info::before, .woocommerce-message::before, .woocommerce-error::before { content: none; } .woocommerce-message .button, .woocommerce-info .button { min-height: 38px; font-size: 14px; order: 2; } /* ---------- Single product ---------- */ .single-product div.product { position: relative; display: grid; gap: 18px; padding-top: 6px; } .pdp-badges { position: absolute; top: 18px; inset-inline-start: 14px; z-index: 5; display: flex; gap: 6px; pointer-events: none; } .woocommerce-product-gallery { position: relative; margin: 0; opacity: 1 !important; } .woocommerce-product-gallery__wrapper { margin: 0; } .woocommerce-product-gallery__image { background: var(--shelf); border-radius: var(--r-l); overflow: hidden; } .woocommerce-product-gallery__image a { display: grid; place-items: center; aspect-ratio: 1; } .woocommerce-product-gallery__image img:not(.zoomImg) { width: 80% !important; height: 80% !important; object-fit: contain; mix-blend-mode: multiply; } .woocommerce-product-gallery__image .zoomImg { width: auto !important; height: auto !important; max-width: none !important; background: #fff; mix-blend-mode: normal; image-rendering: auto; } .woocommerce-product-gallery .flex-control-thumbs { list-style: none; display: flex; gap: 8px; padding: 10px 0 0; margin: 0; overflow-x: auto; } .woocommerce-product-gallery .flex-control-thumbs li { flex: none; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--shelf); } .woocommerce-product-gallery .flex-control-thumbs img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; opacity: .6; cursor: pointer; transition: opacity 120ms; } .woocommerce-product-gallery .flex-control-thumbs img.flex-active { opacity: 1; } .woocommerce-product-gallery__trigger { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 4; width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow-1); font-size: 0; } .woocommerce-product-gallery__trigger::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--ink); border-radius: 50%; } .summary { display: grid; gap: 14px; align-content: start; min-width: 0; } .summary > * { margin: 0; } .product_title { font-size: clamp(22px, 5.4vw, 32px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; } .summary .eyebrow { justify-self: start; } .summary .woocommerce-product-rating { display: flex; gap: 8px; align-items: center; font-size: 13px; } .first-review { font-size: 13px; justify-self: start; } .summary > .price { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1.1; } .summary > .price del { font-size: 17px; } .unit-price { display: inline-block; margin-inline-start: 10px; font-size: 14px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; } .unit-save { display: inline-block; margin-inline-start: 8px; font-size: 12.5px; font-weight: 700; color: var(--ok); background: var(--ok-50); padding: 2px 8px; border-radius: var(--r-pill); letter-spacing: 0; vertical-align: 2px; } .woocommerce-product-details__short-description { color: var(--ink-2); } .stock { font-weight: 600; font-size: 14px; margin: 0; } .stock.in-stock { color: var(--ok); } .stock.out-of-stock { color: var(--err); } form.cart { display: grid; gap: 14px; margin: 0; } form.cart:not(.variations_form), .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } form.cart .single_add_to_cart_button { flex: 1; min-height: 52px; font-size: 17px; } .fav-pdp { width: 52px; height: 52px; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink-3); } .quantity { display: inline-flex; align-items: center; } .quantity:not(.qty-ready) input.qty { width: 72px; height: 52px; border-radius: var(--r-pill); border: 1.5px solid var(--line); text-align: center; font-weight: 700; font-size: 16px; } table.variations { width: 100%; border: 0; border-collapse: collapse; margin: 0; } table.variations th, table.variations td { display: block; padding: 0; text-align: start; border: 0; } table.variations th label { font-size: 14px; font-weight: 600; } table.variations td { padding-bottom: 12px; } table.variations select { width: 100%; min-height: 48px; border-radius: 12px; border: 1.5px solid var(--line); padding: 0 12px; font-size: 16px; background: #fff; } table.variations.has-swatches select { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; } .reset_variations { font-size: 13px; color: var(--ink-3); } .woocommerce-variation-price .price { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; } .woocommerce-variation-availability { font-size: 14px; } .assure { list-style: none; margin: 4px 0 0; padding: 0; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line); } .assure li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding: 12px 14px; font-size: 14px; align-items: start; } .assure li + li { border-top: 1px solid var(--line); } .assure .ico { width: 22px; height: 22px; color: var(--pink-ink); } .assure strong { display: block; font-weight: 600; } .assure small { display: block; color: var(--ink-3); font-size: 12.5px; } .assure a { text-decoration: underline; } .product_meta { font-size: 13px; color: var(--ink-3); display: grid; gap: 4px; } .accordions { display: grid; } details.acc { border-top: 1px solid var(--line); } details.acc:last-of-type { border-bottom: 1px solid var(--line); } details.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding-block: 16px; font-weight: 700; font-size: 16px; } details.acc summary::-webkit-details-marker { display: none; } details.acc summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--ink-3); transition: transform 200ms; } details.acc[open] summary::after { transform: rotate(45deg); } .acc-body { padding-bottom: 18px; color: var(--ink-2); font-size: 14.5px; } .acc-body h2:first-child { display: none; } .tbl-wrap { overflow-x: auto; } table.feed, .woocommerce-product-attributes { border-collapse: collapse; width: 100%; font-size: 14px; } table.feed th, table.feed td, .woocommerce-product-attributes th, .woocommerce-product-attributes td { text-align: start; padding: 8px 10px; border-bottom: 1px solid var(--line); } table.feed th, .woocommerce-product-attributes th { font-weight: 600; color: var(--ink-3); font-size: 13px; } .woocommerce-product-attributes td p { margin: 0; } .calc { margin-top: 14px; border-radius: var(--r-m); background: var(--ok-50); padding: 14px; display: grid; gap: 8px; font-size: 14px; color: var(--ink); } .calc select { border: 0; border-radius: var(--r-s); padding: 6px 10px; background: #fff; font-weight: 600; justify-self: start; } .calc-out { margin: 0; font-size: 15px; } .calc-out b { font-size: 18px; } .fbt { grid-column: 1 / -1; } .fbt-box { display: grid; gap: 10px; border-radius: var(--r-m); background: var(--shelf); padding: 14px; } .fbt-item { display: grid; grid-template-columns: auto 52px 1fr auto; gap: 10px; align-items: center; font-size: 14px; cursor: pointer; } .fbt-item img { width: 52px; height: 52px; object-fit: contain; background: #fff; border-radius: 10px; mix-blend-mode: multiply; } .fbt-item input { width: 20px; height: 20px; accent-color: var(--pink); margin: 0; } .fbt-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 4px; flex-wrap: wrap; } section.related, section.upsells { display: grid; gap: 14px; padding-top: 28px; min-width: 0; } section.related > h2, section.upsells > h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; margin: 0; } .sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 46; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); box-shadow: 0 -10px 30px -16px rgba(22,17,21,.35); transform: translateY(110%); will-change: transform; } .sticky-buy .t { font-size: 13px; color: var(--ink-3); line-height: 1.3; min-width: 0; } .sticky-buy .t span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sticky-buy .t b { display: block; color: var(--ink); font-size: 17px; } @media (min-width: 768px) { .sticky-buy { display: none; } } @media (min-width: 900px) { .single-product div.product { grid-template-columns: minmax(0, calc(var(--pdp-media, 52%) - 24px)) minmax(0, 1fr); column-gap: 48px; row-gap: 8px; padding-top: 16px; align-items: start; } .single-product div.product > .woocommerce-product-gallery { grid-column: 1; grid-row: 1 / span 3; position: sticky; top: calc(var(--hdr-h) + 16px); align-self: start; } .single-product div.product > .summary { grid-column: 2; grid-row: 1; } .single-product div.product > .accordions { grid-column: 2; grid-row: 2; } .single-product div.product > .fbt { grid-column: 2; grid-row: 3; padding-top: 18px; } .single-product div.product > section.related, .single-product div.product > section.upsells { grid-column: 1 / -1; } } /* ---------- Cart & checkout pages ---------- */ .wc-page .entry { max-width: none; } .woocommerce-cart-form { overflow-x: auto; } table.shop_table { width: 100%; border-collapse: collapse; border: 0; font-size: 14px; } table.shop_table th, table.shop_table td { padding: 12px 8px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: middle; } table.shop_table th { color: var(--ink-3); font-weight: 600; font-size: 13px; } table.shop_table img { width: 64px; height: 64px; object-fit: contain; background: var(--shelf); border-radius: 12px; mix-blend-mode: multiply; } table.shop_table .product-remove a { font-size: 22px; color: var(--ink-3); } table.cart td.actions { padding-top: 16px; } .coupon { display: flex; gap: 8px; flex-wrap: wrap; } .coupon input.input-text { min-height: 46px; border-radius: var(--r-pill); border: 1.5px solid var(--line); padding: 0 16px; font-size: 16px; } .cart-collaterals { margin-top: 24px; } .cart_totals { background: var(--shelf); border-radius: var(--r-m); padding: 18px; } .cart_totals h2 { font-size: 18px; } .wc-proceed-to-checkout .checkout-button { width: 100%; min-height: 56px; font-size: 17px; } .woocommerce form .form-row { margin: 0 0 14px; padding: 0; display: grid; gap: 4px; } .woocommerce form .form-row label { font-size: 13px; font-weight: 600; color: var(--ink-2); } .woocommerce form .form-row .optional { font-weight: 400; color: var(--ink-3); } .woocommerce form .form-row .required { color: var(--pink-ink); text-decoration: none; border: 0; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .select2-container .select2-selection--single { width: 100%; min-height: 50px; border-radius: 12px; border: 1.5px solid var(--line); padding: 0 14px; font-size: 16px; background: #fff; outline: 0; transition: border-color 120ms, box-shadow 120ms; } .woocommerce form .form-row textarea { padding: 12px 14px; min-height: 90px; } .select2-container .select2-selection--single .select2-selection__rendered { line-height: 48px; padding: 0; } .select2-container .select2-selection--single .select2-selection__arrow { height: 48px; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(22,17,21,.06); } .woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: #C42B2B; } .woocommerce form .form-row.woocommerce-validated input.input-text { border-color: var(--ok); } .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; float: none; } @media (min-width: 600px) { .woocommerce form .woocommerce-billing-fields__field-wrapper, .woocommerce form .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; } .woocommerce form .form-row-wide, .woocommerce form #billing_address_1_field, .woocommerce form #billing_country_field { grid-column: 1 / -1; } } .woocommerce-checkout h3 { font-size: 18px; letter-spacing: -0.01em; } form.checkout { display: grid; gap: 24px; padding-top: 12px; } @media (min-width: 900px) { form.checkout { grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; align-items: start; } form.checkout > #customer_details { grid-column: 1; grid-row: 1 / span 3; } form.checkout > #order_review_heading, form.checkout > #order_review, form.checkout > .ship-meter { grid-column: 2; } form.checkout > #order_review { position: sticky; top: 90px; } } #customer_details .col-1, #customer_details .col-2 { width: 100%; float: none; } #order_review { background: var(--shelf); border-radius: var(--r-m); padding: 16px; } #order_review table.shop_table td, #order_review table.shop_table th { border-color: rgba(22,17,21,.07); } #payment { background: none !important; border-radius: 0; } #payment ul.payment_methods { list-style: none; padding: 0 !important; margin: 0 0 14px; border: 0 !important; display: grid; gap: 10px; } #payment ul.payment_methods li { background: #fff; border-radius: var(--r-m); padding: 14px; box-shadow: inset 0 0 0 1.5px var(--line); } #payment ul.payment_methods li:has(input:checked) { box-shadow: inset 0 0 0 2.5px var(--ink); } #payment ul.payment_methods li input { accent-color: var(--ink); margin-inline-end: 8px; } #payment div.payment_box { background: var(--shelf) !important; border-radius: 12px; margin-top: 10px; font-size: 13px; color: var(--ink-2); } #payment div.payment_box::before { content: none !important; } #place_order { width: 100%; min-height: 56px; font-size: 17px; } .secure-line { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ok); font-weight: 600; } .secure-line .ico { width: 18px; height: 18px; } .woocommerce-terms-and-conditions-wrapper { font-size: 13.5px; color: var(--ink-2); } .boof-note.is-collapsed { display: none; } .note-toggle { color: var(--pink-ink); font-weight: 600; font-size: 14px; padding: 4px 0; } .woocommerce-order-overview { list-style: none; padding: 0; display: grid; gap: 8px; } /* ---------- Content pages, blog, 404 ---------- */ .page-head { padding-bottom: 10px; } .entry { font-size: 16px; line-height: 1.7; max-width: 72ch; } .page-builder .entry, .wc-page .entry { max-width: none; } .entry a { color: var(--pink-ink); text-decoration: underline; } .entry img { border-radius: var(--r-m); } .post-hero img { border-radius: var(--r-l); width: 100%; } .single-post .article { max-width: 760px; margin-inline: auto; } .not-found { text-align: center; justify-items: center; } .nf-num { font-size: clamp(90px, 24vw, 180px); font-weight: 800; letter-spacing: -0.05em; line-height: .9; color: var(--pink-100); margin: 0; } .nf-search { width: min(520px, 100%); } .not-found .section { text-align: start; width: 100%; } /* ========================================================================= WooCommerce base (WooCommerce's own CSS is switched off by the theme) ========================================================================= */ .woocommerce .col2-set::after, .woocommerce .clear { content: ""; display: table; clear: both; } .woocommerce-store-notice { position: fixed; bottom: 0; left: 0; right: 0; z-index: 99; margin: 0; padding: 12px 16px; background: var(--ink); color: #fff; text-align: center; font-size: 14px; } .woocommerce-store-notice a { color: var(--sun); text-decoration: underline; } .woocommerce-NoticeGroup, .woocommerce-notices-wrapper { display: grid; gap: 10px; } .woocommerce-notices-wrapper:empty { display: none; } .wc-block-components-notice-banner { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-m); background: var(--shelf); font-size: 14px; border: 0; margin: 0 0 14px; } .wc-block-components-notice-banner > svg { flex: none; width: 22px; height: 22px; border-radius: 50%; padding: 2px; background: var(--ink); fill: #fff; } .wc-block-components-notice-banner.is-success { background: var(--ok-50); } .wc-block-components-notice-banner.is-success > svg { background: var(--ok); } .wc-block-components-notice-banner.is-error { background: #FDECEC; color: var(--err); } .wc-block-components-notice-banner.is-error > svg { background: var(--err); } .wc-block-components-notice-banner.is-info > svg { background: var(--pink); } .wc-block-components-notice-banner__content { flex: 1; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; } .wc-block-components-notice-banner .wc-forward { order: 2; min-height: 38px; font-size: 14px; } .woocommerce-error li, .woocommerce-message li, .woocommerce-info li { list-style: none; } .woocommerce-error { display: grid; padding-inline-start: 16px; } /* Star ratings without WooCommerce's icon font */ .star-rating { position: relative; display: inline-block; width: 5.4em; height: 1.1em; font-size: 14px; line-height: 1; overflow: hidden; vertical-align: middle; } .star-rating::before { content: "★★★★★"; color: #E4DDE1; letter-spacing: .08em; position: absolute; inset-inline-start: 0; top: 0; } .star-rating span { position: absolute; top: 0; inset-inline-start: 0; overflow: hidden; padding-top: 1.5em; height: 0; } .star-rating span::before { content: "★★★★★"; color: var(--sun); letter-spacing: .08em; position: absolute; top: 0; inset-inline-start: 0; } p.stars { margin: 4px 0 12px; } p.stars span { display: inline-flex; gap: 4px; direction: ltr; } p.stars a { position: relative; width: 30px; height: 30px; font-size: 0; text-decoration: none; } p.stars a::before { content: "★"; font-size: 28px; line-height: 30px; color: #E4DDE1; position: absolute; inset: 0; text-align: center; } p.stars:hover a::before, p.stars.selected a.active::before, p.stars.selected a:not(.active)::before { color: var(--sun); } p.stars a:hover ~ a::before, p.stars.selected a.active ~ a::before { color: #E4DDE1; } #reviews .commentlist { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 14px; } #reviews .comment_container { display: grid; grid-template-columns: 40px 1fr; gap: 10px; } #reviews .avatar { border-radius: 50%; } #reviews .meta { font-size: 13px; color: var(--ink-3); margin: 4px 0; } #review_form .comment-reply-title { font-weight: 700; font-size: 16px; display: block; margin-bottom: 8px; } #review_form textarea, #review_form input[type=text], #review_form input[type=email] { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 16px; } /* Responsive tables (orders, order details) */ @media (max-width: 767px) { table.shop_table_responsive thead { display: none; } table.shop_table_responsive, table.shop_table_responsive tbody, table.shop_table_responsive tr, table.shop_table_responsive td, table.shop_table_responsive th { display: block; width: 100%; } table.shop_table_responsive tr { border-radius: var(--r-m); background: var(--shelf); padding: 6px 12px; margin-bottom: 10px; } table.shop_table_responsive tr td, table.shop_table_responsive tr th { display: flex; justify-content: space-between; gap: 10px; text-align: end; border: 0; padding: 8px 0; } table.shop_table_responsive tr td::before { content: attr(data-title); font-weight: 600; color: var(--ink-3); text-align: start; } table.shop_table_responsive tr td.woocommerce-orders-table__cell-order-actions::before, table.shop_table_responsive tr td.actions::before { content: none; } } .woocommerce-orders-table .button, .woocommerce-orders-table .woocommerce-button { min-height: 36px; font-size: 13px; padding: 0 14px; margin: 2px; --bg: #fff; --fg: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); } .woocommerce-order-details, .woocommerce-customer-details { margin-top: 24px; } .woocommerce-customer-details address { font-style: normal; background: var(--shelf); border-radius: var(--r-m); padding: 14px 16px; line-height: 1.7; } .woocommerce-columns--addresses, .u-columns { display: grid; gap: 16px; } @media (min-width: 768px) { .woocommerce-columns--addresses { grid-template-columns: 1fr 1fr; } } .select2-container--default .select2-selection--single { border: 1.5px solid var(--line); border-radius: 12px; height: 50px; } .select2-dropdown { border-color: var(--line); border-radius: 12px; overflow: hidden; } .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--pink) !important; } /* ========================================================================= Deal notices (cart drawer, cart page, product page) ========================================================================= */ .deal-nudge { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r-m); background: var(--pink-50); font-size: 14px; } .deal-nudge p { margin: 0; line-height: 1.45; } .deal-nudge b { color: var(--pink-ink); } .deal-nudge .link { justify-self: start; font-size: 13px; } .deal-nudge.done { background: var(--ok-50); color: var(--ok); } .deal-nudge.done b { color: var(--ok); } .deal-nudge .ico { width: 18px; height: 18px; vertical-align: -4px; } .deal-nudge.pdp { background: #fff; box-shadow: inset 0 0 0 1.5px var(--pink-100); } .drawer-extra { display: grid; gap: 10px; font-size: 14px; } .drawer-extra:empty { display: none; } .wc-page-cart .woocommerce > .deal-nudge, .woocommerce-cart-form .deal-nudge { margin-bottom: 12px; } /* ========================================================================= Cart page ========================================================================= */ .wc-page-body > .woocommerce { display: block; } .cart-layout { display: grid; gap: 20px; align-items: start; } @media (min-width: 960px) { .cart-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 36px; } .cart-layout .cart-collaterals { position: sticky; top: calc(var(--hdr-h) + 16px); } } .woocommerce-cart-form { display: grid; gap: 12px; min-width: 0; } .cart-lines { display: grid; gap: 0; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line); padding: 4px 16px; } .cart-line { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); } .cart-line img { width: 80px; height: 80px; object-fit: contain; background: var(--shelf); border-radius: 14px; mix-blend-mode: multiply; display: block; } .cl-main { display: grid; gap: 3px; min-width: 0; font-size: 14px; } .cl-name { font-weight: 600; font-size: 15px; line-height: 1.35; } .cl-main dl.variation { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 6px; font-size: 13px; color: var(--ink-3); } .cl-main dl.variation dt { font-weight: 500; } .cl-main dl.variation dd { margin: 0; } .cl-main dl.variation dd p { margin: 0; } .cl-unit { font-size: 13px; color: var(--ink-3); } .cl-side { display: grid; justify-items: end; gap: 8px; } .cl-sub { font-size: 16px; } .cl-remove { font-size: 13px; color: var(--ink-3); text-decoration: underline; } @media (max-width: 520px) { .cart-line { grid-template-columns: 64px minmax(0, 1fr); } .cart-line img { width: 64px; height: 64px; } .cl-side { grid-column: 2; display: flex; justify-content: space-between; align-items: center; } } .cart-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 14px 0 10px; } .coupon-box summary { cursor: pointer; color: var(--pink-ink); font-weight: 600; font-size: 14px; list-style: none; } .coupon-box summary::-webkit-details-marker { display: none; } .coupon-box .coupon { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .coupon-box input.input-text { min-height: 44px; border-radius: var(--r-pill); border: 1.5px solid var(--line); padding: 0 16px; font-size: 16px; min-width: 0; flex: 1; } .coupon-box .button { min-height: 44px; } .js-auto-update .update-cart { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .cart-collaterals { display: grid; gap: 12px; } .cart_totals { background: var(--shelf); border-radius: var(--r-l); padding: 20px; } .cart_totals h2 { font-size: 18px; margin: 0 0 10px; } .cart_totals table.shop_table { border: 0; } .cart_totals table.shop_table th, .cart_totals table.shop_table td { border-bottom: 1px solid rgba(22,17,21,.07); padding: 12px 0; vertical-align: top; } .cart_totals table.shop_table td { text-align: end; } .cart_totals th { white-space: nowrap; text-align: start; font-weight: 500; color: var(--ink-2); } .cart_totals tr.shipping th, .cart_totals tr.shipping td, #order_review tr.shipping th, #order_review tr.shipping td, .cart_totals tr.woocommerce-shipping-totals th, .cart_totals tr.woocommerce-shipping-totals td { display: block; width: 100%; text-align: start; } .cart_totals tr.shipping th, #order_review tr.shipping th, .cart_totals tr.woocommerce-shipping-totals th { border-bottom: 0; padding-bottom: 4px; } .cart_totals table.shop_table, #order_review table.shop_table { table-layout: auto; } .cart_totals .order-total th, .cart_totals .order-total td { font-size: 19px; font-weight: 800; border-bottom: 0; } .cart_totals .order-total .includes_tax { display: block; font-size: 12px; font-weight: 400; color: var(--ink-3); } .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; text-align: start; width: 100%; } .woocommerce-shipping-methods li { width: 100%; } .woocommerce-shipping-methods li { display: flex; gap: 8px; align-items: center; background: #fff; border-radius: 12px; padding: 10px 12px; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 14px; } .woocommerce-shipping-methods li:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); } .woocommerce-shipping-methods input { accent-color: var(--ink); margin: 0; } .woocommerce-shipping-destination, .woocommerce-shipping-calculator { font-size: 13px; color: var(--ink-3); text-align: start; margin: 8px 0 0; } .shipping-calculator-button { color: var(--pink-ink); text-decoration: underline; } .shipping-calculator-form { display: grid; gap: 8px; margin-top: 8px; } .wc-proceed-to-checkout { padding-top: 14px; } .wc-proceed-to-checkout .checkout-button { width: 100%; min-height: 56px; font-size: 17px; } .cart-empty.woocommerce-info, .wc-empty-cart-message .cart-empty { justify-content: center; text-align: center; font-size: 16px; padding: 30px 16px; } .return-to-shop { text-align: center; } .return-to-shop .button { --bg: var(--btn); --fg: var(--btn-ink); } .cross-sells { margin-top: 32px; display: grid; gap: 14px; } .cross-sells > h2 { font-size: 21px; margin: 0; } /* ========================================================================= Checkout page ========================================================================= */ .wc-page-checkout .woocommerce-form-coupon-toggle .woocommerce-info, .wc-page-checkout .woocommerce-form-login-toggle .woocommerce-info { background: none; padding: 0 0 10px; } .wc-page-checkout .woocommerce-form-coupon-toggle a, .wc-page-checkout .woocommerce-form-login-toggle a { color: var(--pink-ink); font-weight: 600; } .wc-page-checkout form.checkout_coupon, .wc-page-checkout form.woocommerce-form-login { background: var(--shelf); border-radius: var(--r-m); padding: 16px; margin-bottom: 16px; display: grid; gap: 10px; } form.checkout_coupon .form-row { margin: 0; } #customer_details { display: grid; gap: 22px; } #customer_details .col-1, #customer_details .col-2 { width: 100%; float: none; background: #fff; border-radius: var(--r-l); box-shadow: inset 0 0 0 1px var(--line); padding: 20px; } #customer_details .col-2:not(:has(.form-row:not(.notes))):not(:has(#ship-to-different-address)) { display: none; } .woocommerce-billing-fields > h3, .woocommerce-shipping-fields > h3, .woocommerce-additional-fields > h3, #order_review_heading { font-size: 18px; margin: 0 0 14px; letter-spacing: -0.01em; } #ship-to-different-address { font-size: 15px; } #ship-to-different-address label { display: flex; gap: 8px; align-items: center; cursor: pointer; } #ship-to-different-address input { width: 20px; height: 20px; accent-color: var(--ink); margin: 0; } #order_review_heading { margin-bottom: 0; } #order_review { background: var(--shelf); border-radius: var(--r-l); padding: 20px; } #order_review table.shop_table { border: 0; margin-bottom: 14px; } #order_review table.shop_table th, #order_review table.shop_table td { border-bottom: 1px solid rgba(22,17,21,.07); padding: 10px 0; } #order_review table.shop_table td:last-child, #order_review table.shop_table tfoot td { text-align: end; } #order_review .product-name { font-size: 14px; } #order_review .product-quantity { color: var(--ink-3); font-weight: 400; } #order_review .order-total th, #order_review .order-total td { font-size: 19px; font-weight: 800; border-bottom: 0; } #order_review .woocommerce-shipping-methods li { background: #fff; } #payment .place-order { padding: 4px 0 0; margin: 0; display: grid; gap: 12px; } #payment .payment_method_label, #payment ul.payment_methods li > label { font-weight: 600; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; } #payment ul.payment_methods li img { max-height: 24px; width: auto; vertical-align: middle; } .woocommerce-privacy-policy-text { font-size: 12.5px; color: var(--ink-3); } .woocommerce-privacy-policy-text p { margin: 0; } .woocommerce-terms-and-conditions-wrapper .form-row { display: flex !important; gap: 8px; align-items: flex-start; } .woocommerce-form__label-for-checkbox { display: inline-flex; gap: 8px; align-items: flex-start; cursor: pointer; } .woocommerce-form__input-checkbox { width: 20px; height: 20px; accent-color: var(--ink); margin: 0; flex: none; } .woocommerce form .form-row .woocommerce-input-wrapper { display: block; } .woocommerce form .form-row .woocommerce-error, .checkout-inline-error-message { color: var(--err); font-size: 12.5px; margin: 4px 0 0; } .wc-page-checkout .woocommerce-order { display: grid; gap: 16px; } .woocommerce-thankyou-order-received { font-size: 20px; font-weight: 700; background: var(--ok-50); color: var(--ok); border-radius: var(--r-m); padding: 18px; margin: 0; } .woocommerce-order-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 0; margin: 0; } .woocommerce-order-overview li { background: var(--shelf); border-radius: var(--r-m); padding: 12px 14px; font-size: 13px; color: var(--ink-3); list-style: none; } .woocommerce-order-overview li strong { display: block; color: var(--ink); font-size: 15px; margin-top: 2px; } /* ========================================================================= My account + login / register ========================================================================= */ body:not(.boof-login) .wc-page-account .wc-page-body > .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; } body:not(.boof-login) .wc-page-account .wc-page-body > .woocommerce > * { min-width: 0; } @media (min-width: 960px) { body:not(.boof-login) .wc-page-account .wc-page-body > .woocommerce { grid-template-columns: 250px minmax(0, 1fr); gap: 36px; align-items: start; } } .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); } .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; } .woocommerce-MyAccount-navigation a { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--shelf); font-weight: 600; font-size: 14px; white-space: nowrap; transition: background-color 120ms, transform 100ms; } .woocommerce-MyAccount-navigation a:active { transform: scale(.97); } .woocommerce-MyAccount-navigation .is-active a { background: var(--ink); color: #fff; } .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--err); } .woocommerce-MyAccount-navigation a::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; } .woocommerce-MyAccount-navigation-link--dashboard { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11 12 4l8 7v9h-5v-6H9v6H4v-9Z'/%3E%3C/svg%3E"); } .woocommerce-MyAccount-navigation-link--orders { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6L5 8Z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E"); } .woocommerce-MyAccount-navigation-link--edit-address { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); } .woocommerce-MyAccount-navigation-link--edit-account { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E"); } .woocommerce-MyAccount-navigation-link--payment-methods { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E"); } .woocommerce-MyAccount-navigation-link--downloads { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m-5-5 5 5 5-5M5 20h14'/%3E%3C/svg%3E"); } .woocommerce-MyAccount-navigation-link--customer-logout { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h5v16h-5M10 8l-4 4 4 4M6 12h10'/%3E%3C/svg%3E"); } .woocommerce-MyAccount-navigation li:not([class*="--dashboard"]):not([class*="--orders"]):not([class*="--edit-address"]):not([class*="--edit-account"]):not([class*="--payment-methods"]):not([class*="--downloads"]):not([class*="--customer-logout"]) a::before { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); } @media (min-width: 960px) { .woocommerce-MyAccount-navigation { position: sticky; top: calc(var(--hdr-h) + 16px); } .woocommerce-MyAccount-navigation ul { display: grid; margin: 0; padding: 0; overflow: visible; } .woocommerce-MyAccount-navigation a { background: none; } .woocommerce-MyAccount-navigation a:hover { background: var(--shelf); } .woocommerce-MyAccount-navigation .is-active a { background: var(--ink); } } .woocommerce-MyAccount-content { min-width: 0; display: grid; gap: 16px; align-content: start; } .woocommerce-MyAccount-content > p:first-of-type { font-size: 15px; } .woocommerce-MyAccount-content p a { color: var(--pink-ink); } .acc-last { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; background: var(--ink); color: #fff; border-radius: var(--r-l); padding: 20px; } .acc-last .eyebrow { color: var(--sun); } .acc-last .h-section { font-size: 20px; margin: 4px 0 2px; } .acc-last .muted { color: #C2B8BF; margin: 0; } .acc-thumbs { display: flex; gap: 6px; margin-top: 10px; } .acc-thumbs img { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 10px; } .acc-last-actions { display: flex; gap: 8px; flex-wrap: wrap; } .acc-last .btn-ghost { --fg: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); } .acc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; } .acc-card { display: grid; gap: 2px; background: var(--shelf); border-radius: var(--r-m); padding: 16px; transition: transform 100ms ease-out; } .acc-card:active { transform: scale(.98); } .acc-card .ico { color: var(--pink-ink); margin-bottom: 6px; } .acc-card .muted { font-size: 13px; } .woocommerce-Addresses .woocommerce-Address { background: var(--shelf); border-radius: var(--r-m); padding: 16px; } .woocommerce-Address-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .woocommerce-Address-title h2 { font-size: 17px; margin: 0; } .woocommerce-Address-title a { color: var(--pink-ink); font-weight: 600; font-size: 14px; } .woocommerce-Address address { font-style: normal; line-height: 1.7; } .woocommerce-EditAccountForm fieldset { border: 0; padding: 0; margin: 16px 0 0; } .woocommerce-EditAccountForm legend { font-weight: 700; margin-bottom: 8px; } .woocommerce-MyAccount-content .button[type=submit], .woocommerce-ResetPassword .button { --bg: var(--ink); } /* Login / register: one card, two tabs */ .boof-login .wc-page-body > .woocommerce { max-width: 480px; margin-inline: auto; } .boof-login .wc-page-account .page-head { text-align: center; } .boof-login .crumbs { justify-content: center; } #customer_login { display: grid; gap: 18px; } #customer_login .u-column1, #customer_login .u-column2 { width: 100%; float: none; background: #fff; border-radius: var(--r-l); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); padding: 22px; } #customer_login h2, .boof-login .woocommerce > h2 { font-size: 20px; margin: 0 0 14px; } .woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword { display: grid; gap: 4px; } .woocommerce-form-login .form-row:has(.woocommerce-form-login__rememberme) { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; } .woocommerce-form-login__submit, .woocommerce-form-register__submit { width: 100%; min-height: 52px; --bg: var(--ink); } .woocommerce-LostPassword { margin: 8px 0 0; text-align: center; font-size: 14px; } .woocommerce-LostPassword a { color: var(--pink-ink); } .show-password-input { position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; background: none; cursor: pointer; } .show-password-input::before { content: ""; display: block; width: 20px; height: 20px; margin: auto; background: var(--ink-3); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat; } .password-input { position: relative; display: block; } .woocommerce-password-strength { font-size: 12.5px; padding: 6px 10px; border-radius: 8px; margin-top: 6px; } .woocommerce-password-strength.short, .woocommerce-password-strength.bad { background: #FDECEC; color: var(--err); } .woocommerce-password-strength.good { background: var(--warn-50, #FFF6E0); } .woocommerce-password-strength.strong { background: var(--ok-50); color: var(--ok); } .login-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; background: var(--shelf); border-radius: var(--r-pill); margin-bottom: 14px; } .login-tabs button { height: 42px; border-radius: var(--r-pill); font-weight: 700; color: var(--ink-2); transition: background-color 160ms, color 160ms; } .login-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; } .boof-login-tabs.js-tabs #customer_login { display: block; } .boof-login-tabs.js-tabs #customer_login > div[hidden] { display: none; } .boof-login-tabs.js-tabs #customer_login h2 { display: none; } /* ========================================================================= Single product refinements ========================================================================= */ .single-product .wc-main { max-width: var(--wrap-max, 1240px); } .summary .price del { opacity: .7; } .summary form.cart { padding-top: 4px; } .summary .woocommerce-variation.single_variation:empty { display: none; } .summary .single_variation_wrap { display: grid; gap: 12px; } .summary .variations_button { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .summary .variations_button .single_add_to_cart_button { flex: 1; min-width: 180px; } .summary .reset_variations { display: inline-block; margin-top: 6px; } .summary .product_meta > span { display: block; } .summary .product_meta a { color: var(--ink-2); } .summary .woocommerce-product-details__short-description p { margin: 0 0 6px; } .woocommerce-product-gallery__image--placeholder { background: var(--shelf); border-radius: var(--r-l); aspect-ratio: 1; } .woocommerce-product-gallery .flex-viewport { border-radius: var(--r-l); } @media (max-width: 899px) { .woocommerce-product-gallery__image a { aspect-ratio: 4 / 3.4; } } .single-product div.product .accordions { margin-top: 12px; } .single-product div.product > .accordions, .single-product div.product > .fbt, .single-product div.product > section { min-width: 0; } /* ========================================================================= v1.2 — review fixes ========================================================================= */ /* Carousels: arrows + dots on product rows, related products, banners */ .carousel { position: relative; min-width: 0; max-width: 100%; } .section > .carousel, .tab-panel > .carousel, [role="tabpanel"] > .carousel { width: 100%; } .car-btn { position: absolute; top: 38%; z-index: 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92); color: var(--ink); box-shadow: var(--shadow-2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform 100ms ease-out, opacity 160ms; } .car-btn:active { transform: scale(.9); } .car-btn:disabled { opacity: 0; pointer-events: none; } .car-btn .ico { width: 20px; height: 20px; stroke-width: 2.2; } .car-prev { inset-inline-start: -6px; } .car-prev .ico { transform: scaleX(-1); } /* RTL: "previous" points right */ .car-next { inset-inline-end: -6px; } @media (max-width: 767px) { .car-btn { width: 38px; height: 38px; } .car-prev { inset-inline-start: 2px; } .car-next { inset-inline-end: 2px; } } @media (hover: none) and (max-width: 767px) { .carousel:not(.is-banners) .car-btn { display: none; } } .car-dots { display: flex; justify-content: center; gap: 6px; padding-top: 12px; } .car-dots button { width: 8px; height: 8px; border-radius: 4px; background: #DDD3D9; transition: width 220ms cubic-bezier(.2,.8,.2,1), background-color 160ms; } .car-dots button[aria-current="true"] { width: 22px; background: var(--pink); } .car-dots button:focus-visible { outline-offset: 3px; } /* Top banner slider */ .banners-sec { padding-top: 14px; } .banners { gap: 12px; } .banners > .banner { flex: 0 0 calc((100% - (var(--b-cols-m) - 1) * 12px) / var(--b-cols-m)); aspect-ratio: var(--b-ratio); border-radius: var(--r-l); overflow: hidden; background: var(--shelf); display: block; transition: transform 100ms ease-out; scroll-snap-align: start; } .banners > .banner:active { transform: scale(.985); } .banners > .banner img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (min-width: 768px) { .banners { gap: 16px; } .banners > .banner { flex-basis: calc((100% - (var(--b-cols) - 1) * 16px) / var(--b-cols)); } } .is-banners .car-btn { top: 50%; margin-top: -22px; } .is-banners .car-dots { padding-top: 10px; } /* Header: heart sits in the row (was display:revert) */ .hdr-actions > .icon-btn { display: inline-grid; } /* Drawer: no sideways movement, scroller inside the panel gutter */ .panel .scroller { margin-inline: -18px; padding-inline: 18px; scroll-padding-inline: 18px; } .drawer { overflow: hidden; } /* Drawer totals: clear, a bit celebratory when there are savings */ .totals-card { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--r-m); background: var(--shelf); font-size: 14px; } .totals-card .t-row { display: flex; justify-content: space-between; gap: 10px; color: var(--ink-2); } .totals-card .t-row.disc { color: var(--ok); font-weight: 600; } .totals-card .free { color: var(--ok); } .totals-card .grand { color: var(--ink); font-size: 20px; font-weight: 800; letter-spacing: -0.01em; padding-top: 8px; margin-top: 2px; border-top: 1px dashed rgba(22,17,21,.15); } .savings { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 12px; border-radius: 12px; background: var(--ok); color: #fff; font-size: 14px; font-weight: 600; } .savings .ico { width: 18px; height: 18px; flex: none; } .savings b, .savings .amount { color: #fff; } .panel-foot .btn-ghost { min-height: 46px; font-size: 15px; } .panel-foot .btn-ghost .ico { width: 18px; height: 18px; } tr.boof-savings th, tr.boof-savings td { color: var(--ok) !important; font-weight: 700; } tr.boof-savings .ico { width: 16px; height: 16px; vertical-align: -3px; } /* Quick add: full-width sheet, big image, two columns on desktop */ .sheet.is-quick { max-height: 92vh; } @media (min-width: 768px) { .sheet, .sheet.is-quick { left: 0; right: 0; width: auto; margin: 0; } .sheet .panel-head, .sheet .panel-body, .sheet .panel-foot > * { width: 100%; max-width: 1100px; margin-inline: auto; } .sheet .panel-foot { justify-items: center; } } .qa-wrap { display: grid; gap: 16px; } .qa-media { border-radius: var(--r-l); background: var(--shelf); aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; } .qa-media img { width: 78%; height: 88%; object-fit: contain; mix-blend-mode: multiply; } .qa-info { display: grid; gap: 14px; align-content: start; min-width: 0; } .qa-name { font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; } .qa-price { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; } .qa-price .unit-price, .qa-price .unit-save { font-size: 13px; } .qa-more { justify-self: start; } .qa-foot { display: grid; grid-template-columns: auto 1fr; gap: 12px; width: 100%; max-width: 1100px; } @media (min-width: 768px) { .qa-wrap { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: start; } .qa-media { aspect-ratio: 1; } .qa-foot { max-width: 520px; margin-inline-start: auto; } } @media (max-width: 767px) { .qa-media { aspect-ratio: 16 / 11; } } /* Checkout stepper */ .co-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); padding: 0; margin: 10px 0 8px; max-width: 520px; counter-reset: s; } .co-steps li { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 13px; color: var(--ink-3); } .co-steps li::before { content: ""; position: absolute; top: 15px; height: 3px; inset-inline-start: 50%; width: 100%; background: var(--line); border-radius: 2px; z-index: 0; } .co-steps li:last-child::before { content: none; } .co-steps li.done::before { background: var(--ok); } .co-dot { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: #fff; color: var(--ink-3); box-shadow: inset 0 0 0 2px var(--line); } .co-dot .ico { width: 16px; height: 16px; stroke-width: 3; } .co-steps .done .co-dot { background: var(--ok); color: #fff; box-shadow: none; } .co-steps .done a { color: var(--ok); font-weight: 600; } .co-steps .is-current { color: var(--ink); font-weight: 700; } .co-steps .is-current .co-dot { background: var(--pink); color: #fff; box-shadow: 0 0 0 5px var(--pink-50); } .wc-page .page-head .co-steps { margin-inline: 0; } /* Shipping methods: selectable cards (cart page, checkout) */ .woocommerce-shipping-methods li { position: relative; padding: 0; box-shadow: none; background: none; } .woocommerce-shipping-methods li input.shipping_method { position: absolute; opacity: 0; inset-inline-start: 16px; top: 50%; margin: 0; } .woocommerce-shipping-methods li label { display: grid; grid-template-columns: 22px 36px 1fr auto; gap: 10px; align-items: center; width: 100%; cursor: pointer; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow 140ms, transform 100ms; } .woocommerce-shipping-methods li label::before { content: ""; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px #CFC6CB; background: #fff; transition: box-shadow 140ms; } .woocommerce-shipping-methods li label:active { transform: scale(.99); } .woocommerce-shipping-methods li input:checked + label { box-shadow: inset 0 0 0 2px var(--ink); } .woocommerce-shipping-methods li input:checked + label::before { box-shadow: inset 0 0 0 6px var(--ink); } .woocommerce-shipping-methods li input:focus-visible + label { outline: 3px solid color-mix(in srgb, var(--pink) 55%, transparent); outline-offset: 2px; } .woocommerce-shipping-methods li:only-child label { grid-template-columns: 36px 1fr auto; } .woocommerce-shipping-methods li:only-child label::before { content: none; } .sm-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--pink-50); color: var(--pink-ink); display: grid; place-items: center; } .sm-ico .ico { width: 20px; height: 20px; } .sm-text { display: grid; gap: 1px; min-width: 0; text-align: start; } .sm-name { font-weight: 600; font-size: 14.5px; color: var(--ink); } .sm-sub { font-size: 12.5px; color: var(--ink-3); } .sm-price { font-weight: 700; font-size: 14.5px; white-space: nowrap; color: var(--ink); } .sm-price .free { color: var(--ok); } .woocommerce-shipping-methods li label .amount { font-weight: 700; } .woocommerce-shipping-methods li:has(input:checked) { box-shadow: none; } /* Payment methods: selectable cards */ #payment ul.payment_methods li { position: relative; padding: 0; background: none; box-shadow: none; border-radius: 16px; } #payment ul.payment_methods li > input.input-radio { position: absolute; opacity: 0; inset-inline-start: 18px; top: 26px; margin: 0; } #payment ul.payment_methods li > label { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: 100%; min-height: 60px; padding: 14px 16px; border-radius: 16px; cursor: pointer; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 600; font-size: 15px; transition: box-shadow 140ms, transform 100ms; } #payment ul.payment_methods li > label::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px #CFC6CB; background: #fff; transition: box-shadow 140ms; } #payment ul.payment_methods li > label:active { transform: scale(.995); } #payment ul.payment_methods li > input:checked + label { box-shadow: inset 0 0 0 2px var(--ink); border-radius: 16px 16px 0 0; } #payment ul.payment_methods li > input:checked + label::before { box-shadow: inset 0 0 0 6px var(--ink); } #payment ul.payment_methods li > input:focus-visible + label { outline: 3px solid color-mix(in srgb, var(--pink) 55%, transparent); outline-offset: 2px; } #payment ul.payment_methods li > label img { max-height: 26px; width: auto; margin-inline-start: auto; } #payment ul.payment_methods li:has(input:checked) { box-shadow: none; } #payment div.payment_box { margin: 0 !important; padding: 12px 16px 14px !important; border-radius: 0 0 16px 16px; background: var(--shelf) !important; box-shadow: inset 2px 0 0 var(--ink), inset -2px 0 0 var(--ink), inset 0 -2px 0 var(--ink); font-size: 13.5px; } #payment div.payment_box p:last-child { margin-bottom: 0; } #payment div.payment_box fieldset { border: 0; padding: 0; margin: 8px 0 0; } .payment_method_cod > label::after, .payment_method_bacs > label::after { content: ""; width: 26px; height: 26px; margin-inline-start: auto; background: var(--ink-3); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat; } /* Checkout summary + thank-you page: product thumbnails */ .ri { display: inline-grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; vertical-align: middle; } .ri-thumb { position: relative; width: 56px; height: 56px; border-radius: 12px; background: #fff; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); } .ri-thumb img, .ri-img { width: 46px !important; height: 46px !important; object-fit: contain; mix-blend-mode: multiply; border-radius: 8px; } .ri-qty { position: absolute; top: -7px; inset-inline-end: -7px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; } .ri-name { font-weight: 600; line-height: 1.35; } #order_review .product-name dl.variation, .woocommerce-table--order-details dl.variation, .wc-item-meta { margin: 4px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 2px 8px; padding-inline-start: 68px; } #order_review .product-name dl.variation dd, #order_review .product-name dl.variation p, .wc-item-meta p { margin: 0; } #order_review .product-name dl.variation dt, #order_review .product-name dl.variation dd, .wc-item-meta li { display: inline; } #order_review table.shop_table thead { display: none; } #order_review table.shop_table td.product-total { font-weight: 700; vertical-align: middle; } /* Thank-you page */ .woocommerce-order { display: grid; gap: 18px; } .woocommerce-order-details, .woocommerce-customer-details { background: #fff; border-radius: var(--r-l); box-shadow: inset 0 0 0 1px var(--line); padding: 18px 20px; margin: 0; } .woocommerce-order-details__title, .woocommerce-column__title { font-size: 18px; margin: 0 0 12px; } table.woocommerce-table--order-details { width: 100%; border-collapse: collapse; } table.woocommerce-table--order-details thead { display: none; } table.woocommerce-table--order-details td, table.woocommerce-table--order-details th { padding: 12px 0; border-bottom: 1px solid var(--line); text-align: start; vertical-align: middle; } table.woocommerce-table--order-details td.product-total, table.woocommerce-table--order-details tfoot td { text-align: end; font-weight: 700; white-space: nowrap; } table.woocommerce-table--order-details .product-quantity { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 10px; background: var(--shelf); font-weight: 700; font-size: 12.5px; color: var(--ink-2); } table.woocommerce-table--order-details tfoot th { font-weight: 500; color: var(--ink-2); } table.woocommerce-table--order-details tfoot tr:last-child th, table.woocommerce-table--order-details tfoot tr:last-child td { font-size: 19px; font-weight: 800; color: var(--ink); border-bottom: 0; } .woocommerce-order-overview { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .woocommerce-order-overview li { display: grid; gap: 2px; } .woocommerce-customer-details .woocommerce-columns { display: grid; gap: 14px; } @media (min-width: 768px) { .woocommerce-customer-details .woocommerce-columns { grid-template-columns: 1fr 1fr; } } .woocommerce-customer-details--phone, .woocommerce-customer-details--email { margin: 6px 0 0; } .wc-page-checkout .woocommerce-order .woocommerce-notice { margin: 0; } .woocommerce-thankyou-order-received { display: flex; align-items: center; gap: 12px; } .woocommerce-thankyou-order-received::before { content: ""; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 22px no-repeat; } /* Local pickup: no address needed */ form.checkout.is-pickup #billing_country_field, form.checkout.is-pickup #billing_address_1_field, form.checkout.is-pickup #billing_address_2_field, form.checkout.is-pickup #billing_city_field, form.checkout.is-pickup #billing_state_field, form.checkout.is-pickup #billing_postcode_field, form.checkout.is-pickup .woocommerce-shipping-fields { display: none !important; } form.checkout.is-pickup .woocommerce-billing-fields::after { content: "איסוף עצמי מהחנות — לא צריך כתובת למשלוח."; display: block; margin-top: 6px; padding: 10px 12px; border-radius: 12px; background: var(--ok-50); color: var(--ok); font-size: 13.5px; font-weight: 600; } /* ---------- Accessibility preferences ---------- */ @media (prefers-reduced-transparency: reduce) { .boof-glass .hdr, .tabbar, .sticky-buy, .toolbar, .co-hdr { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (prefers-contrast: more) { .boof-glass .hdr, .tabbar, .sticky-buy { background: #fff; } .tabbar, .sticky-buy { border-top: 1px solid var(--ink); } .sw-opt, #payment ul.payment_methods li, .woocommerce form .form-row input.input-text { box-shadow: inset 0 0 0 2px var(--ink-2); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; scroll-behavior: auto !important; } .btn:active, .button:active, .add:active, .chip:active, .card .well:active, .icon-btn:active { transform: none; } } /* ========================================================================= v1.3 — second review round ========================================================================= */ /* Product rows / best sellers never stretch the page: they scroll inside */ .section > *, .tab-panel, [role="tabpanel"] { min-width: 0; } .prow-grid .products-grid { padding-top: 2px; } /* Carousel arrows: both sides always available (they wrap around) */ .car-btn:disabled { opacity: 1; pointer-events: auto; } .is-banners .car-btn { width: 46px; height: 46px; } .is-banners .car-prev { inset-inline-start: 10px; } .is-banners .car-next { inset-inline-end: 10px; } /* Cart / checkout steps: large and clear */ .wc-page .page-head .co-steps, .co-steps { max-width: 860px; margin: 16px auto 8px; padding: 18px 10px 16px; background: #fff; border-radius: 22px; box-shadow: inset 0 0 0 1.5px var(--line), 0 6px 20px rgba(22,17,21,.05); } .co-steps li { gap: 9px; font-size: 15px; font-weight: 600; } .co-steps li::before { top: 21px; height: 4px; border-radius: 2px; inset-inline-start: calc(50% + 30px); width: calc(100% - 60px); } .co-steps li.is-current::before { background: linear-gradient(to left, var(--pink) 0%, var(--line) 100%); } [dir="ltr"] .co-steps li.is-current::before { background: linear-gradient(to right, var(--pink) 0%, var(--line) 100%); } .co-dot { width: 44px; height: 44px; font-size: 17px; box-shadow: inset 0 0 0 2.5px var(--line); transition: transform 200ms; } .co-dot .ico { width: 21px; height: 21px; } .co-steps .is-current .co-dot { background: var(--pink); color: #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--pink) 16%, transparent); } .co-steps .is-current .co-label { color: var(--ink); font-weight: 800; } .co-steps .done .co-dot { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 14%, transparent); } .co-steps .todo .co-label { color: var(--ink-3); font-weight: 500; } @media (max-width: 599px) { .wc-page .page-head .co-steps, .co-steps { padding: 14px 4px 12px; border-radius: 18px; margin-top: 12px; } .co-steps li { font-size: 13px; gap: 7px; } .co-dot { width: 38px; height: 38px; font-size: 15px; } .co-steps li::before { top: 18px; inset-inline-start: calc(50% + 26px); width: calc(100% - 52px); } } /* Checkout: coupon as a real button */ .wc-page-checkout .woocommerce-form-coupon-toggle .woocommerce-info { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; background: var(--pink-50); border-radius: 16px; padding: 10px 10px 10px 16px; margin-bottom: 14px; font-size: 15px; color: var(--ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pink) 18%, transparent); } .cpn-q { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; } .cpn-q .ico { width: 20px; height: 20px; color: var(--pink-ink); } .wc-page-checkout .woocommerce-form-coupon-toggle a.cpn-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 20px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; transition: transform 100ms ease-out, opacity 120ms; } .wc-page-checkout .woocommerce-form-coupon-toggle a.cpn-btn:hover { opacity: .88; } .wc-page-checkout .woocommerce-form-coupon-toggle a.cpn-btn:active { transform: scale(.97); } .wc-page-checkout form.checkout_coupon { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); border-radius: 16px; padding: 14px; } .wc-page-checkout form.checkout_coupon > p:not(.form-row) { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--ink-3); } .wc-page-checkout form.checkout_coupon .form-row-first { flex: 1; min-width: 160px; margin: 0; float: none; width: auto; } .wc-page-checkout form.checkout_coupon .form-row-last { margin: 0; float: none; width: auto; } .wc-page-checkout form.checkout_coupon input.input-text { width: 100%; min-height: 46px; border-radius: 999px; border: 1.5px solid var(--line); padding: 0 16px; font-size: 16px; } .wc-page-checkout form.checkout_coupon .button { min-height: 46px; border-radius: 999px; background: var(--btn); color: var(--btn-ink); font-weight: 700; padding: 0 24px; border: 0; } .wc-page-checkout form.checkout_coupon .clear { display: none; } /* Order summary + cart totals: rows as flex, shipping options span the full block */ #order_review table.shop_table, #order_review table.shop_table > thead, #order_review table.shop_table > tbody, #order_review table.shop_table > tfoot, .cart_totals table.shop_table, .cart_totals table.shop_table > tbody { display: block; width: 100%; } #order_review table.shop_table tr, .cart_totals table.shop_table tr { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; border-bottom: 1px solid rgba(22,17,21,.07); padding: 0; } #order_review table.shop_table tr > th, #order_review table.shop_table tr > td, .cart_totals table.shop_table tr > th, .cart_totals table.shop_table tr > td { display: block; border: 0 !important; width: auto; } #order_review tr.cart_item > td.product-name { flex: 1; min-width: 0; } #order_review table.shop_table tr:last-child, .cart_totals table.shop_table tr:last-child { border-bottom: 0; } .cart_totals table.shop_table td::before { content: none !important; } .cart_totals table.shop_table tr { background: none; border-radius: 0; margin: 0; } .cart_totals table.shop_table tr > th { color: var(--ink-3); font-weight: 600; } #order_review table.shop_table tr.woocommerce-shipping-totals, .cart_totals table.shop_table tr.woocommerce-shipping-totals { display: block; padding-bottom: 12px; } #order_review tr.woocommerce-shipping-totals > th, #order_review tr.woocommerce-shipping-totals > td, .cart_totals tr.woocommerce-shipping-totals > th, .cart_totals tr.woocommerce-shipping-totals > td { width: 100% !important; text-align: start !important; padding-inline: 0; } #order_review tr.woocommerce-shipping-totals > th, .cart_totals tr.woocommerce-shipping-totals > th { padding-bottom: 6px; font-size: 14px; color: var(--ink); font-weight: 700; } .woocommerce-shipping-methods, .woocommerce-shipping-methods li, .woocommerce-shipping-methods li label { width: 100%; box-sizing: border-box; } .woocommerce-shipping-destination, .woocommerce-shipping-calculator { font-size: 13px; color: var(--ink-3); margin: 8px 0 0; } /* Product page: picture pinned to the top while the text scrolls */ .pdp-media { position: relative; min-width: 0; } .pdp-media > .woocommerce-product-gallery { position: relative; top: auto; } @media (min-width: 900px) { .single-product div.product > .pdp-media { grid-column: 1; grid-row: 1 / span 3; align-self: start; } .single-product div.product > .pdp-media.is-sticky { position: sticky; top: calc(var(--hdr-h, 80px) + 16px); } .single-product div.product > .summary { align-self: start; margin-top: 0; } } .single_add_to_cart_button.loading { opacity: .7; pointer-events: none; } .single_add_to_cart_button.loading::after { content: ""; width: 16px; height: 16px; margin-inline-start: 8px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: boof-spin .7s linear infinite; } @keyframes boof-spin { to { transform: rotate(360deg); } } /* Filters: calm sidebar, collapsible groups, "show more", price slider */ .side-filters { scrollbar-width: thin; scrollbar-color: transparent transparent; overscroll-behavior: contain; scroll-behavior: smooth; padding: 4px 8px 28px 4px; margin-inline-end: -8px; } .side-filters:hover, .side-filters:focus-within { scrollbar-color: rgba(22,17,21,.16) transparent; } .side-filters::-webkit-scrollbar { width: 6px; } .side-filters::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; } .side-filters:hover::-webkit-scrollbar-thumb { background: rgba(22,17,21,.16); } .filters { gap: 0; transition: opacity 160ms; } .filters.is-busy { opacity: .55; pointer-events: none; } .filters > .fgroup { padding: 12px 0; border-bottom: 1px solid var(--line); gap: 0; } .filters > .fgroup-switch { padding-top: 0; } .fgroup > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; min-height: 34px; user-select: none; } .fgroup > summary::-webkit-details-marker { display: none; } .fgroup > summary h3 { font-size: 15px; } .fgroup > summary .ico { width: 16px; height: 16px; color: var(--ink-3); transform: rotate(-90deg); transition: transform 220ms cubic-bezier(.2,.8,.2,1); } .fgroup[open] > summary .ico { transform: rotate(90deg); } .fopts { display: grid; gap: 0; padding-top: 6px; } .fopts.is-clamped:not(.is-open):not(.is-searching) > .check.is-extra { display: none; } .fopts > .check[hidden] { display: none; } .filters .check { min-height: 36px; border-radius: 10px; padding-inline: 6px; margin-inline: -6px; transition: background-color 120ms; } .filters .check:hover { background: var(--shelf); } .filters .check .cl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fmore { justify-self: start; margin-top: 4px; padding: 6px 0; font-size: 13.5px; font-weight: 700; color: var(--pink-ink); background: none; border: 0; cursor: pointer; } .fsearch { width: 100%; height: 38px; border-radius: 999px; border: 1.5px solid var(--line); padding: 0 14px; font-size: 14px; margin-bottom: 6px; background: #fff; } .price-filter { display: grid; gap: 12px; padding-top: 8px; } .prange { position: relative; height: 28px; margin-inline: 4px; } .prange-track { position: absolute; inset-inline: 0; top: 12px; height: 4px; border-radius: 2px; background: #E8DEE3; } .prange-fill { position: absolute; top: 0; bottom: 0; inset-inline: 0; background: var(--pink); border-radius: 2px; } .prange input[type=range] { position: absolute; inset: 0; width: 100%; height: 28px; margin: 0; padding: 0; background: none; -webkit-appearance: none; appearance: none; pointer-events: none; outline: none; } .prange input[type=range]::-webkit-slider-runnable-track { background: none; height: 28px; border: 0; } .prange input[type=range]::-moz-range-track { background: none; border: 0; } .prange input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 2px var(--pink), 0 2px 8px rgba(22,17,21,.18); cursor: grab; transition: transform 120ms; } .prange input[type=range]::-moz-range-thumb { pointer-events: auto; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 2px var(--pink), 0 2px 8px rgba(22,17,21,.18); cursor: grab; } .prange input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); cursor: grabbing; } .range-row .dash { color: var(--ink-3); } .pbox { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; height: 42px; border-radius: 12px; border: 1.5px solid var(--line); padding: 0 10px; font-size: 13px; color: var(--ink-3); background: #fff; transition: border-color 120ms; } .pbox b { font-weight: 600; color: var(--ink-2); } .range-row .pbox input { border: 0; border-radius: 0; padding: 0; height: 100%; width: 100%; min-width: 0; font-size: 16px; background: none; -moz-appearance: textfield; appearance: textfield; outline: none; } .pbox input::-webkit-inner-spin-button, .pbox input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .pbox:focus-within { border-color: var(--ink); } .filters-actions { padding-top: 16px; } /* "Bought X in the last month" */ .sold-line { display: flex; align-items: center; gap: 5px; color: #E0262D; font-size: 12.5px; font-weight: 600; line-height: 1.25; } .sold-line .ico { width: 15px; height: 15px; flex: none; fill: currentColor; stroke: none; transform-origin: 50% 90%; animation: boof-flame 1.8s ease-in-out infinite; } .sold-line .ico path + path { fill: #FFB020; } .sold-line b { font-weight: 800; } .sold-single { display: inline-flex; width: auto; margin: 4px 0 8px; padding: 7px 14px 7px 12px; border-radius: 999px; font-size: 14px; background: linear-gradient(90deg, #FFE7E8, #FFF3EE); box-shadow: inset 0 0 0 1px rgba(224,38,45,.18); } .sold-single .ico { width: 18px; height: 18px; } @keyframes boof-flame { 0%, 100% { transform: scale(1) rotate(-4deg); } 50% { transform: scale(1.14) rotate(4deg); } } @media (prefers-reduced-motion: reduce) { .sold-line .ico, .single_add_to_cart_button.loading::after { animation: none; } } .card .well .sold-card { position: absolute; bottom: 8px; inset-inline-start: 8px; max-width: calc(100% - 16px); z-index: 2; padding: 4px 9px 4px 8px; border-radius: 999px; font-size: 11.5px; white-space: nowrap; overflow: hidden; background: rgba(255,255,255,.95); box-shadow: 0 2px 10px rgba(224,38,45,.16), inset 0 0 0 1px rgba(224,38,45,.14); } .card .well .sold-card > span { overflow: hidden; text-overflow: ellipsis; } .card .well .sold-card .ico { width: 14px; height: 14px; } @media (min-width: 768px) { .card .well .sold-card { font-size: 12.5px; padding: 5px 11px 5px 9px; bottom: 10px; inset-inline-start: 10px; } } /* ========================================================================= v1.3.1 — QA fixes ========================================================================= */ /* F3: coupon notice — icon from CSS (notice HTML can't carry SVG), one line */ .wc-page-checkout .woocommerce-form-coupon-toggle .woocommerce-info > svg, .wc-page-checkout .woocommerce-form-coupon-toggle .wc-block-components-notice-banner > svg { display: none; } .cpn-q { white-space: nowrap; flex: 0 1 auto; min-width: 0; } .cpn-q::before { content: ""; width: 20px; height: 20px; flex: none; background: var(--pink-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8L3 12Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8L3 12Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat; } .wc-page-checkout .woocommerce-form-coupon-toggle .woocommerce-info, .wc-page-checkout .woocommerce-form-coupon-toggle .wc-block-components-notice-banner { flex-wrap: nowrap; } .wc-page-checkout .woocommerce-form-coupon-toggle .wc-block-components-notice-banner__content { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex: 1; min-width: 0; flex-wrap: wrap; } .wc-page-checkout .woocommerce-form-coupon-toggle a.cpn-btn { flex: none; white-space: nowrap; } /* F9: order note stays folded until "+ הערה לשליח" is pressed */ form.checkout .form-row.boof-note.is-collapsed { display: none !important; } /* F11: chosen payment method without a description box keeps its full frame */ #payment ul.payment_methods li > input:checked + label:last-child, #payment ul.payment_methods li > input:checked + label:has(+ .payment_box:empty) { border-radius: 16px; } /* F12: equal card heights — price row sits at the bottom of every card */ .products-grid > .card, .rail > .card { display: flex; flex-direction: column; gap: 8px; } .products-grid > .card > .row, .rail > .card > .row { margin-top: auto; } /* F13: logged-in admins — panels start under the WordPress toolbar */ .admin-bar .drawer, .admin-bar #navPanel { top: 32px; } @media (max-width: 782px) { .admin-bar .drawer, .admin-bar #navPanel { top: 46px; } } @media (max-width: 600px) { .admin-bar .drawer, .admin-bar #navPanel { top: 0; } } .admin-bar .co-hdr { top: 32px; } @media (max-width: 782px) { .admin-bar .co-hdr { top: 46px; } } @media (max-width: 600px) { .admin-bar .co-hdr { top: 0; } } /* F15: notices are never hidden under the sticky header when the page scrolls to them */ .woocommerce-notices-wrapper, .woocommerce-message, .woocommerce-error, .woocommerce-info { scroll-margin-top: calc(var(--hdr-h, 80px) + 24px); } /* F7: active chip on search results */ .chips .chip[aria-current="page"] .count { color: rgba(255,255,255,.7); } .wc-page-checkout .woocommerce-form-coupon-toggle .wc-block-components-notice-banner { display: flex; align-items: center; background: var(--pink-50); border: 0; border-radius: 16px; padding: 10px 10px 10px 16px; margin-bottom: 14px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pink) 18%, transparent); } /* F8: product page — short description folds, deal box sits under the buy button */ .woocommerce-product-details__short-description.is-clamped { max-height: calc(var(--clamp, 4) * 1.65em); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent); } .sd-more { display: block; margin: 4px 0 10px; text-align: start; padding: 4px 0; font-size: 14px; font-weight: 700; color: var(--pink-ink); background: none; border: 0; cursor: pointer; } .summary form.cart + .deal-nudge.pdp, .summary .deal-nudge.pdp { margin-top: 12px; } /* F14: brand logos — larger, even tiles */ .brands { gap: 10px; } .brands > .brand { width: 132px; height: 76px; min-height: 0; padding: 10px 14px; display: grid; place-items: center; text-align: center; white-space: normal; line-height: 1.2; font-size: 13.5px; border-radius: 16px; transition: box-shadow 140ms, transform 100ms ease-out; } .brands > .brand:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); } .brands > .brand:active { transform: scale(.97); } .brands > .brand img { max-height: 52px; max-width: 100%; width: auto; height: auto; object-fit: contain; } @media (min-width: 768px) { .brands > .brand { width: 156px; height: 88px; } .brands > .brand img { max-height: 60px; } } .is-brands .car-btn { top: 50%; margin-top: -22px; } /* ========================================================================== 1.6 — Cart & checkout (focused layout) Header: logo · steps · help. Cards with numbered legends, summary panel. The order buttons keep the yellow of the theme. ========================================================================== */ .co-hdr { background: #fff; box-shadow: 0 1px 0 var(--line); } .co-hdr .co-hdr-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-block: 14px; min-height: 76px; } .co-hdr .co-hdr-row > :last-child { justify-self: end; } .co-help { font-size: 14px; color: var(--ink); font-weight: 600; white-space: nowrap; } .co-help { display: inline-flex; align-items: center; gap: 6px; } .co-help .ico { width: 18px; height: 18px; } .co-help b { font-weight: 800; } @media (min-width: 768px) { .co-help .ico { display: none; } } @media (max-width: 767px) { .co-help { width: 40px; height: 40px; justify-content: center; border-radius: 50%; background: var(--shelf); } } .co-path { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 12px; } .co-path li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-3); white-space: nowrap; } .co-path li + li::before { content: ""; width: 36px; height: 2px; border-radius: 1px; background: var(--line); margin-inline-end: 4px; } .co-path li.done + li::before { background: var(--ok); } .co-path .co-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; box-shadow: inset 0 0 0 1.5px #D9D3D6; background: #fff; color: var(--ink-3); transition: none; } .co-path .co-dot .ico { width: 15px; height: 15px; stroke-width: 2.6; } .co-path .is-current { color: var(--ink); } .co-path .is-current .co-dot { background: var(--ink); color: #fff; box-shadow: none; } .co-path .done { color: var(--ok); } .co-path .done a { color: var(--ok); } .co-path .done .co-dot { background: var(--ok-50); color: var(--ok); box-shadow: none; } @media (max-width: 767px) { .co-hdr .co-hdr-row { grid-template-columns: auto 1fr auto; gap: 10px; min-height: 60px; padding-block: 8px; } .co-hdr .logo img { max-height: 34px; width: auto; } .co-path { justify-content: center; gap: 6px; } .co-path li { font-size: 12px; gap: 5px; } .co-path li + li::before { width: 12px; margin-inline-end: 0; } .co-path .co-label { display: none; } .co-path .is-current .co-label { display: inline; } .co-help b { font-size: 13px; } } .wc-page.is-focused { padding-top: 28px; } .wc-page.is-focused .page-head { padding-bottom: 14px; } .wc-page.is-focused .h-page { font-size: clamp(28px, 4vw, 36px); margin: 0; } .h-count { font-size: .62em; font-weight: 600; color: var(--ink-3); letter-spacing: 0; } /* --- Cart ------------------------------------------------------------- */ @media (min-width: 960px) { .woocommerce-cart .cart-layout { grid-template-columns: minmax(0, 1fr) 396px; gap: 28px; } } .woocommerce-cart .woocommerce-cart-form { display: grid; gap: 14px; align-content: start; } .woocommerce-cart .woocommerce-cart-form > * { margin: 0; } /* free shipping meter */ .ship-meter { padding: 16px 20px; border-radius: 18px; gap: 10px; background: var(--pink-50); font-size: 15px; } .ship-meter .meter { height: 8px; border-radius: 4px; background: rgba(22,17,21,.08); } .ship-meter.done { background: var(--ok-50); color: var(--ink); } .ship-meter.done > .ship-meter-row > span { font-weight: 700; } .ship-meter.done .ico { color: var(--ok); } /* deal banner (Boof Discounts + the theme's own deal notices) */ .woocommerce-cart .bd-cart, .woocommerce-cart .deal-nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 14px 18px; border-radius: 16px; background: #FFF8E1; box-shadow: none; border: 1.5px dashed #E5C35A; color: var(--ink); font-size: 14px; } .woocommerce-cart .bd-cartwrap { margin: 0; } .woocommerce-cart .bd-cart::before, .woocommerce-cart .deal-nudge:not(.done)::before { content: ""; flex: none; width: 20px; height: 20px; background: var(--ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='m12 3.5 2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8L3.5 9.7l5.9-.9L12 3.5Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='m12 3.5 2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8L3.5 9.7l5.9-.9L12 3.5Z'/%3E%3C/svg%3E") center / contain no-repeat; } .woocommerce-cart .bd-cart .bd-head { flex: none; } .woocommerce-cart .bd-cart .bd-title { font-size: 14px; } .woocommerce-cart .bd-cart .bd-msg { flex: 1; min-width: 200px; font-weight: 500; } .woocommerce-cart .bd-cart .bd-steps, .woocommerce-cart .bd-cart .bd-meter-row, .woocommerce-cart .bd-cart .bd-sugg, .woocommerce-cart .bd-cart .bd-ok { display: none; } .woocommerce-cart .bd-cart .bd-all, .woocommerce-cart .deal-nudge .link { margin-inline-start: auto; font-size: 14px; font-weight: 700; color: var(--pink-ink); } .woocommerce-cart .bd-cart.done, .woocommerce-cart .deal-nudge.done { background: var(--ok-50); border-color: color-mix(in srgb, var(--ok) 35%, transparent); } .woocommerce-cart .deal-nudge p { margin: 0; flex: 1; } .woocommerce-cart .deal-nudge .meter { display: none; } /* lines */ .woocommerce-cart .cart-lines { padding: 0; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); background: #fff; overflow: hidden; } .woocommerce-cart .cart-line { grid-template-columns: 88px minmax(0, 1fr) auto auto auto; gap: 18px; padding: 18px 20px; border-bottom: 1px solid var(--line); } .woocommerce-cart .cart-line:last-of-type { border-bottom: 0; } .woocommerce-cart .cart-line .cl-img img { width: 88px; height: 88px; border-radius: 14px; background: var(--shelf); } .cl-main { display: grid; gap: 3px; align-content: center; min-width: 0; } .cl-brand { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); } .woocommerce-cart .cl-name { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.35; } .woocommerce-cart .cl-main dl.variation { margin: 0; display: flex; flex-wrap: wrap; gap: 0 10px; font-size: 13px; color: var(--ink-3); } .woocommerce-cart .cl-main dl.variation dt, .woocommerce-cart .cl-main dl.variation dd { margin: 0; display: inline; font-weight: 400; } .woocommerce-cart .cl-main dl.variation dd p { margin: 0; display: inline; } .woocommerce-cart .cart-line .quantity.qty-ready { height: 44px; padding: 0 4px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #E2DDE0; } .woocommerce-cart .cart-line .quantity.qty-ready button { width: 34px; height: 34px; background: none; box-shadow: none; font-size: 18px; color: var(--ink); } .woocommerce-cart .cart-line .quantity.qty-ready input.qty { height: 34px; min-width: 34px; background: none; font-weight: 700; } .cl-price { display: grid; justify-items: end; gap: 2px; min-width: 64px; } .cl-price .cl-sub { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; } .cl-price .cl-unit { font-size: 12px; color: var(--ink-3); } .cl-rm .cl-remove { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--shelf); color: var(--ink-2) !important; font-size: 0; transition: background-color 120ms, color 120ms; } .cl-rm .cl-remove .ico { width: 18px; height: 18px; } .cl-rm .cl-remove:hover { background: var(--pink-50); color: var(--pink-ink) !important; } .woocommerce-cart .cart-actions { display: none; } @media (max-width: 640px) { .woocommerce-cart .cart-line { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "img main rm" "img qty price"; gap: 10px 14px; padding: 16px; } .woocommerce-cart .cart-line .cl-img { grid-area: img; align-self: start; } .woocommerce-cart .cart-line .cl-img img { width: 72px; height: 72px; } .cl-main { grid-area: main; } .cl-qty { grid-area: qty; justify-self: start; } .cl-price { grid-area: price; align-self: center; } .cl-rm { grid-area: rm; align-self: start; } .cl-rm .cl-remove { width: 36px; height: 36px; } } /* summary panel */ .co-summary, .woocommerce-cart .cart_totals { background: var(--shelf); border-radius: 24px; padding: 28px; display: grid; gap: 14px; } .co-summary h2 { font-size: 22px; font-weight: 800; margin: 0; letter-spacing: -0.01em; } .co-block { display: grid; gap: 10px; } .co-block-h { font-size: 14px; font-weight: 700; margin: 0; color: var(--ink); } .co-summary table.co-rows { border: 0; margin: 0; border-top: 1px solid rgba(22,17,21,.08); } .cart-collaterals { margin-top: 0; } .co-summary table.co-rows tr { border: 0; } .co-summary table.co-rows th, .co-summary table.co-rows td, .cart_totals.co-summary table.shop_table th, .cart_totals.co-summary table.shop_table td { border: 0; padding: 7px 0; font-size: 14.5px; font-weight: 500; color: var(--ink-2); background: none; } .co-summary table.co-rows td { text-align: end; color: var(--ink); } .co-summary table.co-rows tr.cart-subtotal th, .co-summary table.co-rows tr.cart-subtotal td { padding-top: 14px; } .co-summary table.co-rows tr.order-total th, .co-summary table.co-rows tr.order-total td { border-top: 1px solid rgba(22,17,21,.08); padding-top: 16px; font-size: 16px; font-weight: 800; color: var(--ink); vertical-align: middle; } .co-summary table.co-rows tr.order-total td { font-size: 30px; letter-spacing: -0.02em; } .co-summary .free, .co-review .free { color: var(--ok); font-weight: 700; } .co-coupon { display: flex; gap: 8px; } .co-coupon input { flex: 1; min-width: 0; height: 50px; border-radius: 12px; border: 1px solid #E2DDE0; background: #fff; padding: 0 14px; font: inherit; font-size: 15px; } .co-coupon .co-coupon-btn { height: 50px; padding: 0 18px; border-radius: 12px; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 700; font-size: 15px; border: 0; } .co-coupon.is-busy { opacity: .6; } .co-summary .wc-proceed-to-checkout { padding: 0; } .co-summary .wc-proceed-to-checkout .checkout-button { width: 100%; min-height: 58px; border-radius: 14px; font-size: 18px; font-weight: 800; margin: 0; } .co-pay-note { margin: 0; display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); text-align: center; } .co-pay-note .ico { width: 15px; height: 15px; } /* shipping choice cards */ .co-ship-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .co-ship-list li.co-ship-opt { position: relative; padding: 0; background: none; box-shadow: none; } .co-ship-list li.co-ship-opt input.shipping_method { position: absolute; opacity: 0; pointer-events: none; } .co-ship-list li.co-ship-opt label { display: flex !important; align-items: center; gap: 12px; margin: 0; padding: 16px 18px; min-height: 64px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #E2DDE0; cursor: pointer; transition: box-shadow 140ms; font-size: 15px; grid-template-columns: none; } .co-ship-list li.co-ship-opt label::before { content: none !important; } .co-ship-list li.co-ship-opt label .sm-ico { display: none; } .co-ship-list li.co-ship-opt label .sm-text { flex: 1; display: grid; gap: 2px; min-width: 0; } .co-ship-list li.co-ship-opt label .sm-name { font-weight: 700; color: var(--ink); } .co-ship-list li.co-ship-opt label .sm-sub { font-size: 12.5px; color: var(--ink-3); font-weight: 400; } .co-ship-list li.co-ship-opt label .sm-price { font-weight: 700; color: var(--ink); white-space: nowrap; } .co-ship-list li.co-ship-opt label .sm-price .free { color: var(--ink); } .co-ship-list li.co-ship-opt input:checked + label, .co-ship-list li.co-ship-opt:only-child label { box-shadow: inset 0 0 0 2px var(--pink); } .co-ship-list li.co-ship-opt input:focus-visible + label { outline: 3px solid color-mix(in srgb, var(--pink) 45%, transparent); outline-offset: 2px; } /* cross-sells */ .co-xsell { padding-top: 28px; display: grid; gap: 14px; } .co-xsell h2 { font-size: 20px; font-weight: 800; margin: 0; letter-spacing: -0.01em; } .co-xsell-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; } .co-x { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); } .co-x-img img { width: 56px; height: 56px; object-fit: contain; border-radius: 12px; background: var(--shelf); mix-blend-mode: multiply; display: block; } .co-x-main { display: grid; gap: 2px; min-width: 0; } .co-x-name { font-size: 13.5px; color: var(--ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .co-x-main .num { font-size: 14px; font-weight: 800; } .co-x-main .num del { font-weight: 400; color: var(--ink-3); font-size: 12px; } .co-x .add { position: static; width: 44px; height: 44px; border-radius: 12px; background: var(--ink); color: #fff; box-shadow: none; display: grid; place-items: center; } .co-x .add .ico { width: 18px; height: 18px; } .co-x .added_to_cart { display: none; } /* --- Checkout --------------------------------------------------------- */ @media (min-width: 960px) { form.checkout.co-form { grid-template-columns: minmax(0, 1fr) 396px; gap: 28px; } form.checkout.co-form > .co-side { position: sticky; top: 96px; } } .co-main { display: grid; gap: 22px; min-width: 0; } .co-form #customer_details { display: grid; gap: 22px; } .co-card { margin: 0; min-width: 0; border: 1px solid var(--line); border-radius: 20px; padding: 26px 24px 24px; background: #fff; } .co-card > legend { float: none; width: auto; margin: 0; margin-inline-start: 16px; padding: 0 10px; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); } .co-card > legend .num { font-weight: 800; } .co-card .woocommerce-billing-fields > h3, .co-card .woocommerce-shipping-fields > h3:not(#ship-to-different-address), .co-card .woocommerce-additional-fields > h3 { display: none; } .co-fields, .woocommerce form.co-form .co-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 14px; } .woocommerce form.co-form .co-fields .form-row-wide, .woocommerce form.co-form .co-fields #billing_address_1_field { grid-column: auto; } .co-fields .form-row { width: auto !important; float: none !important; margin: 0 !important; padding: 0; display: grid; gap: 6px; align-content: start; } .co-fields .form-row.co-span, .co-fields #billing_country_field:has(select) { grid-column: 1 / -1; } .co-fields #billing_country_field:not(:has(select)), .co-fields .form-row.hidden, .co-form .form-row.co-hidden { display: none !important; } .co-form .form-row .select2-container { width: 100% !important; } .co-form .select2-container--default .select2-selection--single { border: 1px solid #E2DDE0; border-radius: 12px; } .co-form .form-row label { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0; line-height: 1.3; } .co-form .form-row label .optional { font-weight: 500; color: var(--ink-3); } .co-form .form-row input.input-text, .co-form .form-row select, .co-form .form-row textarea, .co-form .select2-container .select2-selection--single { width: 100%; height: 52px; border-radius: 12px; border: 1px solid #E2DDE0; background: #fff; padding: 0 14px; font: inherit; font-size: 15px; color: var(--ink); box-shadow: none; } .co-form .form-row textarea { height: 110px; padding: 12px 14px; resize: vertical; } .co-form .form-row input.input-text::placeholder, .co-form .form-row textarea::placeholder { color: #A39CA1; } .co-form .form-row input.input-text:focus, .co-form .form-row select:focus, .co-form .form-row textarea:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(22,17,21,.08); } .co-form .form-row.woocommerce-invalid input.input-text { border-color: #D63638; } .co-form .select2-container .select2-selection--single .select2-selection__rendered { line-height: 50px; padding: 0; } .co-form .select2-container .select2-selection--single .select2-selection__arrow { height: 50px; } .co-delivery { display: grid; gap: 18px; } .co-delivery .co-ship-list { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .co-delivery .co-ship-list li.co-ship-opt label { align-items: flex-start; } .co-address:empty { display: none; } .co-delivery .woocommerce-shipping-fields, .co-delivery .woocommerce-additional-fields { display: grid; gap: 14px; } .co-delivery .woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .co-delivery .woocommerce-additional-fields__field-wrapper .form-row { width: auto; float: none; margin: 0; display: grid; gap: 6px; } .co-delivery .woocommerce-additional-fields__field-wrapper textarea { height: 52px; min-height: 52px; padding-top: 14px; } .co-delivery #ship-to-different-address { font-size: 14px; font-weight: 600; margin: 0; } .woocommerce form.co-form .shipping_address .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .co-delivery .shipping_address .form-row { width: auto; float: none; margin: 0; } form.checkout.co-form.is-pickup .co-address, form.checkout.co-form.is-pickup .woocommerce-shipping-fields { display: none !important; } form.checkout.co-form.is-pickup .woocommerce-billing-fields::after { content: none; } @media (max-width: 767px) { .co-card { padding: 22px 16px 18px; border-radius: 18px; } .co-delivery .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr; } .woocommerce form.co-form .co-fields, .woocommerce form.co-form .shipping_address .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr 1fr; } .woocommerce form.co-form .co-fields #billing_email_field, .woocommerce form.co-form .co-fields #billing_phone_field, .woocommerce form.co-form .co-fields #billing_address_1_field { grid-column: 1 / -1; } } /* payment: method tabs, the chosen one's box below */ .co-payment .woocommerce-checkout-payment { background: none; border-radius: 0; padding: 0; } #payment ul.co-pay-tabs { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; border: 0 !important; } #payment ul.co-pay-tabs > li { display: contents; } #payment ul.co-pay-tabs > li > input.input-radio { position: absolute; top: 0; inset-inline-start: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; } #payment ul.co-pay-tabs > li > label { width: auto; min-height: 0; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px; margin: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #E2DDE0; font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; transition: box-shadow 140ms, background-color 140ms, color 140ms; } #payment ul.co-pay-tabs > li > label img { max-height: 22px; width: auto; margin: 0 !important; } #payment ul.co-pay-tabs > li > input:checked + label { box-shadow: inset 0 0 0 2px var(--pink); background: var(--pink-50); color: var(--pink-ink); border-radius: 12px; } #payment ul.co-pay-tabs > li > label::before { content: none; } #payment ul.co-pay-tabs > li:has(input:checked) { box-shadow: none; } #payment ul.co-pay-tabs > li > input:focus-visible + label { outline: 3px solid color-mix(in srgb, var(--pink) 45%, transparent); outline-offset: 2px; } #payment ul.co-pay-tabs > li > .payment_box { order: 99; box-shadow: none; flex: 0 0 100%; margin: 6px 0 0 !important; padding: 18px !important; border-radius: 14px; background: #fff !important; border: 1.5px dashed #E2DDE0; font-size: 13.5px; color: var(--ink-2); } #payment ul.co-pay-tabs > li > .payment_box::before { display: none !important; } #payment ul.co-pay-tabs > li > .payment_box p:last-child { margin-bottom: 0; } /* summary */ .co-side { background: var(--shelf); border-radius: 24px; padding: 28px; display: grid; gap: 12px; align-content: start; } .co-side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .co-side-head h3 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; } .co-side-head .link { font-size: 14px; } .co-side .ship-meter.done { display: none; } .co-side #order_review { background: none; padding: 0; border-radius: 0; } .co-review { border: 0 !important; margin: 0 !important; width: 100%; } .co-review th, .co-review td { border: 0 !important; background: none !important; padding: 7px 0 !important; font-size: 14.5px; } .co-review tbody td { padding: 8px 0 !important; vertical-align: middle; } .co-review tbody tr:last-child td { padding-bottom: 16px !important; border-bottom: 1px solid rgba(22,17,21,.08) !important; } .co-review td.product-total { text-align: end; font-weight: 700; white-space: nowrap; } .co-item { display: flex; align-items: center; gap: 12px; } .co-thumb { position: relative; flex: none; width: 56px; height: 56px; border-radius: 12px; background: #fff; } .co-thumb img { width: 56px; height: 56px; object-fit: contain; border-radius: 12px; mix-blend-mode: multiply; display: block; } .co-qty { position: absolute; top: -7px; inset-inline-start: -7px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; } .co-item-t { display: grid; gap: 2px; min-width: 0; } .co-item-n { font-size: 14px; color: var(--ink); line-height: 1.35; } #order_review .co-item-t dl.variation { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 12.5px; color: var(--ink-3); } #order_review .co-item-t dl.variation dt { display: none; } #order_review .co-item-t dl.variation dd, #order_review .co-item-t dl.variation dd p { margin: 0; display: inline; } .co-review tfoot th { text-align: start; font-weight: 500; color: var(--ink-2); } .co-review tfoot td { text-align: end; color: var(--ink); } .co-review tfoot tr.cart-subtotal th, .co-review tfoot tr.cart-subtotal td { padding-top: 14px !important; } .co-review tfoot tr.order-total th, .co-review tfoot tr.order-total td { border-top: 1px solid rgba(22,17,21,.08) !important; padding-top: 16px !important; font-size: 16px; font-weight: 800; color: var(--ink); vertical-align: middle; } .co-review tfoot tr.order-total td, #order_review .co-review tfoot tr.order-total td { font-size: 30px; letter-spacing: -0.02em; } #order_review .co-review tfoot tr.order-total th { font-size: 16px; } #order_review .co-review tr { border: 0; } #order_review .co-review tbody tr:not(:last-child) td { border-bottom: 0 !important; } .co-review tfoot tr.order-total td small, .co-review tfoot tr.order-total .includes_tax { display: block; font-size: 12px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; } .co-place { display: grid; gap: 12px; margin: 4px 0 0 !important; padding: 0 !important; } .co-place .woocommerce-terms-and-conditions-wrapper { display: grid; gap: 10px; font-size: 13.5px; } .co-place .woocommerce-form__label-for-checkbox { display: flex; align-items: center; gap: 10px; font-weight: 500; } .co-place input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--ink); margin: 0; flex: none; } .co-place .secure-line { justify-content: center; font-size: 12.5px; color: var(--ink-3); font-weight: 500; } .co-place #place_order { width: 100%; min-height: 58px; border-radius: 14px; font-size: 18px; font-weight: 800; margin: 0; } @media (max-width: 959px) { .co-side, .co-summary, .woocommerce-cart .cart_totals { padding: 20px; border-radius: 20px; } } /* Saving under a discounted price */ .save-line { display: block; font-size: 12px; font-weight: 600; color: var(--ok); line-height: 1.3; letter-spacing: 0; white-space: nowrap; } .save-line del { color: var(--ink-3); font-weight: 400; } .card .price .save-line { margin-top: 1px; font-size: 11.5px; } .summary > .save-line { margin: -4px 0 8px; font-size: 13.5px; } .woocommerce-variation-price .save-line { margin-top: 2px; font-size: 13px; } .cl-price .save-line, .co-review td.product-total .save-line { text-align: end; } #cartPanel .line .r .save-line { font-size: 11.5px; } /* Top slider - full width: long image on computers, its own image on phones */ .banners-sec.is-hero .banners { gap: 0; margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; } .banners-sec.is-hero .banners > .banner { flex: 0 0 100%; aspect-ratio: var(--b-ratio-m, auto); border-radius: var(--r-l); } .banners-sec.is-hero .banners > .banner picture { display: block; width: 100%; height: 100%; } .banners-sec.is-hero .banners > .banner img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 768px) { .banners-sec.is-hero .banners > .banner { aspect-ratio: var(--b-ratio-d, auto); } } .banners-sec.is-hero .car-dots { padding-top: 10px; } /* ========================================================================== Mega menu: categories row → panel with sub-categories (computer), drawer with tabs and drill-in (phone) ========================================================================== */ .mega-nav { display: none; } @media (min-width: 1024px) { .mega-nav { display: block; position: relative; background: var(--shelf); border-top: 1px solid var(--line); } .mega-list { list-style: none; margin: 0; padding: 8px 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; } .mega-item { position: static; } .mega-top { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 8px; border-radius: var(--r-pill); font-weight: 700; font-size: 16.5px; color: var(--ink); white-space: nowrap; transition: background-color 140ms, color 140ms; } .mega-top img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: #fff; } .mega-caret { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-inline-start: -4px; opacity: .7; transition: transform 200ms; } .mega-top:hover, .mega-item.is-here > .mega-top { background: #fff; } .mega-item.is-open > .mega-top { background: var(--pink); color: #fff; } .mega-item.is-open .mega-caret { transform: rotate(180deg); opacity: 1; } .mega-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; background: #fff; box-shadow: 0 1px 0 var(--line), 0 24px 48px -20px rgba(22,17,21,.28); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 160ms ease, transform 220ms cubic-bezier(.2,.8,.2,1), visibility 0s 220ms; } .mega-item.is-open > .mega-panel { opacity: 1; visibility: visible; transform: none; transition: opacity 160ms ease, transform 220ms cubic-bezier(.2,.8,.2,1); } .mega-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 30px 34px; max-height: calc(100vh - 220px); overflow-y: auto; } .mega-inner.has-promo { grid-template-columns: minmax(0, 1fr) 340px; } .mega-cols { columns: 3; column-gap: 48px; } .mega-group { break-inside: avoid; padding-bottom: 26px; } .mega-h { display: block; font-size: 17px; font-weight: 700; color: var(--pink); margin-bottom: 12px; } .mega-h:hover { color: var(--pink-ink); } .mega-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .mega-group li a { font-size: 15px; color: var(--ink-2); transition: color 120ms; } .mega-group li a:hover { color: var(--pink-ink); } .mega-promo { align-self: start; display: block; border-radius: 20px; overflow: hidden; background: var(--shelf); transition: transform 200ms; } .mega-promo img { display: block; width: 100%; height: auto; } a.mega-promo:hover { transform: scale(1.01); } .boof-glass .hdr .mega-nav { background: color-mix(in srgb, var(--shelf) 92%, transparent); } } @media (prefers-reduced-motion: reduce) { .mega-panel, .mega-caret { transition: none !important; } } /* phone drawer */ .mm-search { margin-bottom: 12px; } .mm-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); margin: 0 calc(var(--gutter) * -1) 4px; } .mm-tabs button { height: 48px; border: 0; background: var(--shelf); font: inherit; font-weight: 700; font-size: 15px; color: var(--ink-3); cursor: pointer; border-bottom: 2.5px solid transparent; } .mm-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); border-bottom-color: var(--pink); } .mm-list, .mm-groups, .mm-g ul { list-style: none; margin: 0; padding: 0; } .mm-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); } .mm-link, .mm-all { flex: 1; display: flex; align-items: center; gap: 12px; padding: 10px 0; font-weight: 700; font-size: 16px; color: var(--ink); min-height: 60px; } .mm-link img, .mm-all img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; } .mm-go { flex: none; width: 56px; border: 0; border-inline-start: 1px solid var(--line); background: none; display: grid; place-items: center; color: var(--ink-2); cursor: pointer; } .mm-go .ico { width: 20px; height: 20px; } .mm-go:active { background: var(--shelf); } .mm-pane.is-in { animation: mm-in 260ms cubic-bezier(.2,.8,.2,1); } @keyframes mm-in { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } } [dir="ltr"] .mm-pane.is-in { animation-name: mm-in-ltr; } @keyframes mm-in-ltr { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } } .mm-back { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; font-size: 15px; color: var(--pink-ink); cursor: pointer; } .mm-back .ico { width: 18px; height: 18px; transform: scaleX(-1); } [dir="ltr"] .mm-back .ico { transform: none; } .mm-all { border-bottom: 1px solid var(--line); color: var(--pink-ink); } .mm-groups > li { border-bottom: 1px solid var(--line); } .mm-g summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 52px; font-weight: 600; font-size: 15.5px; cursor: pointer; } .mm-g summary::-webkit-details-marker { display: none; } .mm-g summary .ico { width: 18px; height: 18px; color: var(--ink-3); transform: rotate(-90deg); transition: transform 200ms; } .mm-g[open] summary .ico { transform: rotate(90deg); } .mm-g ul { padding: 0 14px 12px 0; display: grid; gap: 2px; } .mm-g ul a { display: block; padding: 9px 0; font-size: 15px; color: var(--ink-2); } .mm-g ul a.mm-g-all { color: var(--pink-ink); font-weight: 600; } .mm-g-link { display: flex; align-items: center; min-height: 52px; font-weight: 600; font-size: 15.5px; color: var(--ink); } /* Checkout: order notes - full width, foldable */ .co-delivery .woocommerce-additional-fields { display: grid; gap: 10px; padding-top: 4px; border-top: 1px solid var(--line); } .co-delivery .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr !important; } .co-delivery .woocommerce-additional-fields__field-wrapper .form-row label { display: none; } .co-delivery .woocommerce-additional-fields__field-wrapper textarea { height: 120px !important; min-height: 96px !important; padding-top: 12px !important; resize: vertical; } .co-delivery .woocommerce-additional-fields.is-folded .woocommerce-additional-fields__field-wrapper { display: none; } .co-notes-toggle { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 6px 0 0; border: 0; background: none; font: inherit; font-size: 16px; font-weight: 700; color: var(--ink); cursor: pointer; text-align: start; } .co-notes-toggle small { font-size: 13px; font-weight: 500; color: var(--ink-3); } .co-notes-toggle .ico { width: 20px; height: 20px; margin-inline-start: auto; fill: none; stroke: currentColor; stroke-width: 2.2; transition: transform 200ms; } .co-notes-toggle[aria-expanded="true"] .ico { transform: rotate(180deg); } /* Checkout: returning customer → login, styled like the account login card */ .wc-page-checkout .woocommerce-form-login-toggle .woocommerce-info { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; background: #fff; border-radius: 16px; padding: 10px 10px 10px 16px; margin-bottom: 14px; font-size: 15px; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); } .wc-page-checkout .woocommerce-form-login-toggle .woocommerce-info::before { content: none; } .wc-page-checkout .woocommerce-form-login-toggle a.showlogin { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 20px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; transition: transform 100ms ease-out, opacity 120ms; } .wc-page-checkout .woocommerce-form-login-toggle a.showlogin:hover { opacity: .88; } .wc-page-checkout .woocommerce-form-login-toggle a.showlogin:active { transform: scale(.97); } .wc-page-checkout form.woocommerce-form-login { max-width: 560px; background: #fff; border-radius: var(--r-l); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); padding: 22px; margin: 0 0 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; } .wc-page-checkout form.woocommerce-form-login > p:not(.form-row), .wc-page-checkout form.woocommerce-form-login > .form-row:not(.form-row-first):not(.form-row-last), .wc-page-checkout form.woocommerce-form-login > .clear, .wc-page-checkout form.woocommerce-form-login > .lost_password { grid-column: 1 / -1; } .wc-page-checkout form.woocommerce-form-login > p:not(.form-row):first-child { margin: 0; font-size: 14px; color: var(--ink-2); } .wc-page-checkout form.woocommerce-form-login .form-row { float: none; width: auto; margin: 0; padding: 0; display: grid; gap: 6px; } .wc-page-checkout form.woocommerce-form-login label { font-size: 13px; font-weight: 700; } .wc-page-checkout form.woocommerce-form-login input.input-text { width: 100%; height: 52px; border-radius: 12px; border: 1px solid #E2DDE0; padding: 0 14px; font-size: 15px; background: #fff; } .wc-page-checkout form.woocommerce-form-login input.input-text:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(22,17,21,.08); } .wc-page-checkout form.woocommerce-form-login .form-row:has(.woocommerce-form-login__rememberme) { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; } .wc-page-checkout form.woocommerce-form-login .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; } .wc-page-checkout form.woocommerce-form-login .woocommerce-form-login__submit { width: 100%; min-height: 52px; border-radius: 14px; --bg: var(--ink); --fg: #fff; order: 2; } .wc-page-checkout form.woocommerce-form-login .lost_password { margin: 0; text-align: center; font-size: 14px; } .wc-page-checkout form.woocommerce-form-login .lost_password a { color: var(--pink-ink); } @media (max-width: 600px) { .wc-page-checkout form.woocommerce-form-login { grid-template-columns: 1fr; padding: 18px; } } /* Drag to scroll with the mouse (all horizontal sliders) */ @media (hover: hover) and (pointer: fine) { .scroller:not(.chips):not(.pets), .bd-rail { cursor: grab; } .scroller.is-dragging, .bd-rail.is-dragging { will-change: transform; cursor: grabbing; scroll-snap-type: none !important; scroll-behavior: auto !important; user-select: none; } .scroller.is-dragging a, .scroller.is-dragging button, .bd-rail.is-dragging a { pointer-events: none; } } .scroller img, .bd-rail img { -webkit-user-drag: none; user-select: none; } .addons .carousel { position: relative; } .addons .car-btn { width: 34px; height: 34px; top: 46px; } .addons .car-btn .ico { width: 16px; height: 16px; } .addons .car-dots { padding-top: 6px; } @media (min-width: 1024px) { .mega-link .mega-top { padding: 0 16px; font-weight: 600; } } .mm-extra .mm-link { font-weight: 600; font-size: 15.5px; min-height: 52px; } /* Checkout: "עיר" opens the scrolling city sheet (same as free shipping by city) */ .form-row.has-city-btn .select2-container, .form-row.has-city-btn select, .form-row.has-city-btn .woocommerce-input-wrapper { display: none !important; } .co-city-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: 52px; padding: 0 14px; border: 1px solid #E2DDE0; border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-size: 15px; text-align: start; cursor: pointer; transition: border-color 120ms, box-shadow 120ms; } .co-city-btn span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .co-city-btn.is-empty span { color: #A39CA1; } .co-city-btn .ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-3); } .co-city-btn:hover { border-color: #C9C2C6; } .co-city-btn:focus-visible { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(22,17,21,.08); } .form-row.woocommerce-invalid .co-city-btn { border-color: #D63638; } .city-opt[aria-selected="true"] { background: var(--pink-50); font-weight: 700; } /* City sheet: fixed height, search stays on top while the list scrolls */ .sheet.is-city { height: 88vh; max-height: none; transition: bottom 120ms ease, height 120ms ease; } .sheet.is-city .panel-body { padding-top: 0; } .sheet.is-city .city-sheet { align-content: start; } .sheet.is-city .city-search { position: sticky; top: 0; z-index: 1; } @media (prefers-reduced-motion: reduce) { .sheet.is-city { transition: none; } } /* Quick add as a list (same feel as the bundle picker) */ .sheet.is-fit { height: 88vh; max-height: none; transition: bottom 120ms ease, height 120ms ease; } @media (min-width: 768px) { .sheet.is-qlist { left: 50%; right: auto; width: 560px; margin-left: -280px; } .sheet.is-qlist .panel-head, .sheet.is-qlist .panel-body, .sheet.is-qlist .panel-foot > * { max-width: none; } } .ql { display: grid; gap: 10px; align-content: start; } .ql-head { display: flex; align-items: center; gap: 12px; padding: 4px 0 6px; } .ql-head img { width: 56px; height: 56px; flex: none; object-fit: contain; border-radius: 12px; background: var(--shelf); mix-blend-mode: multiply; } .ql-head span { display: grid; gap: 2px; min-width: 0; } .ql-head b { font-weight: 700; line-height: 1.3; } .ql-head small { color: var(--pink-ink); font-size: 13px; font-weight: 600; } .ql-search { position: sticky; top: 0; z-index: 1; background: var(--shelf); } .ql-list { list-style: none; margin: 0 -8px; padding: 0; display: grid; gap: 2px; } .ql-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; transition: background-color 150ms; } .ql-row[hidden] { display: none; } .ql-row.on { background: var(--pink-50); } .ql-row img { width: 56px; height: 56px; flex: none; object-fit: contain; border-radius: 10px; background: var(--shelf); mix-blend-mode: multiply; } .ql-n { flex: 1; min-width: 0; display: grid; gap: 1px; font-size: 14px; line-height: 1.35; } .ql-n b { font-weight: 600; } .ql-p { font-size: 13.5px; font-weight: 700; } .ql-p del { font-weight: 400; color: var(--ink-3); } .ql-row.is-oos { opacity: .55; } .ql-oos { color: var(--ink-3); font-size: 12px; } .ql-step { flex: none; display: flex; align-items: center; gap: 2px; border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); } .ql-step button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; font-size: 20px; line-height: 1; color: var(--ink); cursor: pointer; } .ql-step button:disabled { opacity: .3; cursor: default; } .ql-step button:not(:disabled):active { background: var(--pink-100); } .ql-step output { min-width: 18px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; } .ql-add { width: 100%; } .ql-add:disabled { background: var(--shelf); color: var(--ink-3); box-shadow: none; } @media (prefers-reduced-motion: reduce) { .sheet.is-fit { transition: none; } } /* With a sheet open, the toast floats above its footer button */ body:has(#sheetPanel:not([hidden])) .toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } /* ---------- 2.3: product facts, home title, mobile tidy-up ---------- */ .home-h1 { margin: 14px auto 0; font-size: 15px; font-weight: 600; color: var(--ink-2); letter-spacing: 0; line-height: 1.4; } @media (min-width: 768px) { .home-h1 { font-size: 17px; margin-top: 18px; } } .card .brandline { font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: .01em; line-height: 1.3; margin-bottom: -2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card .price .unit-price { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; } .unit-price-line { margin: -4px 0 6px; font-size: 14px; color: var(--ink-2); } .pdp-fit { list-style: none; margin: 4px 0 14px; padding: 14px 16px; display: grid; gap: 8px; border-radius: var(--r-m); background: var(--pink-50); font-size: 15px; } .pdp-fit li { display: flex; align-items: flex-start; gap: 8px; } .pdp-fit .ico { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--ok); stroke-width: 2.6; } .sw-opts.sw-single { display: block; } .sw-only { font-size: 16px; font-weight: 700; } .variations_form.all-single .reset_variations { display: none !important; } /* Phones & touch: no arrows over the products (swipe instead) */ @media (max-width: 767px), (hover: none) and (pointer: coarse) { .carousel:not(.is-banners) .car-btn { display: none; } } /* Floating buttons: smaller on phones, above the tab bar, and away while scrolling */ @media (max-width: 767px) { .wa-float { width: 46px; height: 46px; inset-inline-end: 12px; bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom, 0px)); transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 180ms; } .wa-float .ico { width: 22px; height: 22px; } html.fab-away .wa-float { transform: translateX(calc(100% + 16px)); opacity: 0; pointer-events: none; } html[dir="rtl"].fab-away .wa-float, .rtl.fab-away .wa-float { transform: translateX(calc(-100% - 16px)); } /* Accessibility plugin button (Ally / One Click Accessibility) */ html.fab-away .ea11y-widget-container, html.fab-away #ea11y-root, html.fab-away .pojo-a11y-toolbar-toggle, html.fab-away .ea11y-widget-button { opacity: 0; pointer-events: none; transition: opacity 180ms; } } @media (prefers-reduced-motion: reduce) { .wa-float { transition: none !important; } } /* ---------- 2.4 ---------- */ /* Product page never wider than the phone (long SKUs / many swatches) */ .summary { grid-template-columns: minmax(0, 1fr); } .summary > * { min-width: 0; } .variations_form { grid-template-columns: minmax(0, 1fr); } .variations_form table.variations { width: 100%; table-layout: fixed; } .product_meta, .product_meta * { overflow-wrap: anywhere; } /* "ניקוי סל" next to "העגלה שלך" */ .clear-cart { flex: none; margin-inline-start: auto; margin-inline-end: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-pill); background: var(--shelf); color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color 150ms, color 150ms; } .clear-cart:hover { background: var(--pink-50); color: var(--pink-ink); } .clear-cart.is-ask { background: #FDECEC; color: var(--err); } .clear-cart[hidden] { display: none; } .h-page .clear-cart { vertical-align: middle; margin-inline-start: 10px; font-family: var(--f); letter-spacing: 0; } /* Best sellers: tabs as category cards (picture + name), the pink pill slides between them */ .seg.seg-cards { gap: 6px; padding: 6px; background: #fff; border-radius: 20px; box-shadow: inset 0 0 0 1.5px var(--line), var(--shadow-1); } .seg.seg-cards button { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px 0 8px; border-radius: 16px; font-size: 15.5px; font-weight: 700; color: var(--ink); } .seg.seg-cards .thumb { top: 6px; height: 56px; border-radius: 16px; background: var(--pink); box-shadow: 0 6px 16px color-mix(in srgb, var(--pink) 35%, transparent); } .seg.seg-cards button[aria-selected="true"] { color: #fff; } .seg-cards .seg-img { width: 42px; height: 42px; flex: none; border-radius: 50%; overflow: hidden; background: var(--pink-50); display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; transition: transform 200ms cubic-bezier(.2,.8,.2,1); } .seg-cards .seg-img img { width: 100%; height: 100%; object-fit: cover; } .seg-cards button[aria-selected="true"] .seg-img { transform: scale(1.06); } .seg-cards button:not([aria-selected="true"]):hover { background: var(--shelf); } @media (max-width: 767px) { .seg.seg-cards button { height: 50px; padding: 0 16px 0 6px; font-size: 14.5px; } .seg.seg-cards .thumb { height: 50px; } .seg-cards .seg-img { width: 38px; height: 38px; } } /* ========================================================================= 2.8 — floating WhatsApp: real logo, style / side / size / offsets from Boof → כותרת עליונה וסרגלים → כפתור וואטסאפ צף. ========================================================================= */ .wa-float { width: var(--wa-size, 56px); height: var(--wa-size, 56px); bottom: calc(var(--tabbar-h) + var(--wa-y, 20px) + env(safe-area-inset-bottom, 0px)); inset-inline-end: auto; inset-inline-start: auto; } .wa-float.wa-side-left { left: var(--wa-x, 20px); right: auto; } .wa-float.wa-side-right { right: var(--wa-x, 20px); left: auto; } .wa-float .wa-logo { width: 54%; height: 54%; } .wa-float.wa-brand { background: #25D366; color: #fff; } .wa-float.wa-white { background: #fff; color: #25D366; box-shadow: 0 6px 20px rgba(0,0,0,.18); } .wa-float.wa-square { background: #25D366; color: #fff; border-radius: 28%; } .wa-float.wa-dark { background: #111; color: #fff; } @media (max-width: 767px) { .wa-float { width: var(--wa-size-m, 50px); height: var(--wa-size-m, 50px); bottom: calc(var(--tabbar-h) + var(--wa-y-m, 14px) + env(safe-area-inset-bottom, 0px)); } .wa-float.wa-side-left { left: var(--wa-x-m, 14px); } .wa-float.wa-side-right { right: var(--wa-x-m, 14px); } html.fab-away .wa-float.wa-side-left, .rtl.fab-away .wa-float.wa-side-left, html[dir="rtl"].fab-away .wa-float.wa-side-left { transform: translateX(calc(-100% - 24px)); } html.fab-away .wa-float.wa-side-right, .rtl.fab-away .wa-float.wa-side-right, html[dir="rtl"].fab-away .wa-float.wa-side-right { transform: translateX(calc(100% + 24px)); } } /* ========================================================================= 2.9 — Google reviews + Instagram grid (home page) ========================================================================= */ .g-stars { --s: 100%; --z: 16px; display: inline-block; width: calc(var(--z) * 5); height: var(--z); flex: none; background: linear-gradient(90deg, #FBBC04 var(--s), #DADCE0 var(--s)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E") 0 0 / var(--z) var(--z) repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E") 0 0 / var(--z) var(--z) repeat-x; } [dir="rtl"] .g-stars, .rtl .g-stars { background: linear-gradient(-90deg, #FBBC04 var(--s), #DADCE0 var(--s)); } .g-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; } .g-head-main { display: grid; gap: 8px; } .g-head .h-section { margin: 0; } .g-score { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .g-score > b { font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; } .g-count { font-size: 13.5px; color: var(--ink-3); } .g-actions { display: flex; gap: 8px; flex-wrap: wrap; } .g-actions .btn { min-height: 42px; padding: 0 16px; font-size: 14px; font-weight: 700; border-radius: 14px; } .g-btn-line { --bg: #fff; --fg: var(--ink); box-shadow: inset 0 0 0 1px var(--line); } .g-btn-ink { --bg: var(--ink); --fg: #fff; } .scroller.rail.g-rail { --rg: 12px; --rv: 1.18; } @media (min-width: 768px) { .scroller.rail.g-rail { --rg: 16px; --rv: 2.4; } } @media (min-width: 1100px) { .scroller.rail.g-rail { --rg: 18px; --rv: 3.4; } } .g-rail > .g-card { width: calc((100% - (var(--rv) - 1) * var(--rg)) / var(--rv)); flex: none; } .g-card { margin: 0; display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); min-height: 210px; } .g-who { display: flex; align-items: center; gap: 10px; } .g-ava { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: var(--shelf); } .g-ava-l { display: grid; place-items: center; font-weight: 800; color: var(--ink); background: var(--pink-50, #FFF1F5); } .g-name { display: grid; line-height: 1.25; font-weight: 700; font-size: 14.5px; min-width: 0; margin-inline-end: auto; } .g-name a { color: inherit; } .g-name small { font-weight: 400; font-size: 12px; color: var(--ink-3); } .g-src .g-logo { width: 20px; height: 20px; } .g-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); } .g-text p { margin: 0; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .g-card.is-open .g-text p { -webkit-line-clamp: unset; display: block; } .g-more { align-self: flex-start; margin-top: auto; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .g-attr { margin: 0; font-size: 11.5px; color: var(--ink-3); text-align: center; } .ig-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .ig-id { display: flex; align-items: center; gap: 12px; color: var(--ink); min-width: 0; } .ig-ava { position: relative; width: 56px; height: 56px; border-radius: 50%; padding: 3px; flex: none; background: conic-gradient(from 210deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); display: grid; place-items: center; } .ig-ava img, .ig-ava .ig-logo { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #fff; background: #fff; } .ig-txt { display: grid; gap: 2px; min-width: 0; } .ig-txt .h-section { margin: 0; } .ig-sub { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13.5px; color: var(--ink-3); } .ig-sub b { color: var(--ink); font-weight: 700; } .ig-follow { --bg: var(--ink); --fg: #fff; min-height: 44px; padding: 0 16px; gap: 8px; border-radius: 14px; font-weight: 700; font-size: 14px; } .ig-follow .ig-logo { width: 20px; height: 20px; } .ig-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .ig-item { margin: 0; min-width: 0; } .ig-item.is-big { grid-column: span 2; grid-row: span 2; } .ig-tile { position: relative; display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--shelf); } .ig-item.is-big .ig-tile { border-radius: 20px; } .ig-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.8,.2,1); } .ig-kind { position: absolute; top: 8px; inset-inline-end: 8px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.45)); } .ig-over { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 16px; background: rgba(17,17,17,.42); color: #fff; font-size: 15px; opacity: 0; transition: opacity .2s; } .ig-over span { display: inline-flex; align-items: center; gap: 6px; } .ig-over .ig-logo { width: 30px; height: 30px; } @media (hover: hover) { .ig-tile:hover img { transform: scale(1.06); } .ig-tile:hover .ig-over, .ig-tile:focus-visible .ig-over { opacity: 1; } } @media (min-width: 768px) { .ig-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .ig-tile { border-radius: 18px; } .ig-item.is-big .ig-tile { border-radius: 24px; } } @media (prefers-reduced-motion: reduce) { .ig-tile img { transition: none; } }