/* ========================================================================= alibarbarprime — design system v3 One family (Montserrat 400–700, LOST MARY-style usage). Champagne gold on layered black. Lighter titles, normal tracking, title-case. Shorter hero, AU express-shipping badge, image-forward masonry branding. Ports to theme. ========================================================================= */ /* ---- 1. Tokens ---------------------------------------------------------- */ :root { --g-pale: #F6E6B6; --g-hi: #ECD597; --g: #C9A24B; --g-mid: #B68C3C; --g-dk: #8C6C2C; --g-deep: #5E481D; --foil: linear-gradient(100deg, #C9A24B 0%, #F6E6B6 25%, #9A7B2E 50%, #F6E6B6 75%, #C9A24B 100%); /* periodic: 0%==100% for seamless shimmer */ --ink: #09090A; --ink-1: #0D0D0F; --ink-2: #131316; --ink-3: #1B1B1F; --line-d: rgba(236, 213, 151, .16); --line-dd: rgba(255, 255, 255, .07); --paper: #F7F5EF; --paper-2: #EFEBE0; --card: #FFFFFF; --line-l: #E5DFD0; --t-d: #F4F2EC; --t-d-mut: #9D9A90; --t-l: #17161B; --t-l-mut: #6A6860; --accent: #B98CFF; /* iridescent accents — RESTRAINED: colour lives only in the hero aurora; pure gold everywhere else */ --iris-a: #B98CFF; --iris-b: #FF74C8; --iris-c: #5BD6FF; --iris-d: #ECD597; --iris: linear-gradient(100deg, #B98CFF, #FF74C8, #5BD6FF, #ECD597); --maxw: 1240px; --r: 14px; --ease: cubic-bezier(.22, .61, .36, 1); --f: "Montserrat", system-ui, -apple-system, sans-serif; } /* ---- 2. Base ------------------------------------------------------------ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--f); font-weight: 400; background: var(--ink); color: var(--t-d); line-height: 1.62; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } h1, h2, h3, h4 { font-family: var(--f); font-weight: 700; line-height: 1.08; letter-spacing: -.012em; margin: 0; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1.75rem; } .section { padding-block: clamp(3.5rem, 7vw, 6rem); position: relative; } /* film grain for dark surfaces */ .grain { position: relative; } .grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .5; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"); } .grain > * { position: relative; z-index: 1; } /* metallic foil text + slow shimmer */ .foil { background: var(--foil); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 5s linear infinite; } /* moves exactly one tile (200%); with a periodic gradient the wrap is seamless */ @keyframes shimmer { from { background-position: 0 0; } to { background-position: -200% 0; } } .eyebrow { font-weight: 600; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--g-hi); display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.2rem; } .eyebrow::before { content: ""; width: 24px; height: 1px; background: linear-gradient(90deg, transparent, var(--g)); } .section--light .eyebrow { color: var(--g-dk); } .section--light .eyebrow::before { background: linear-gradient(90deg, transparent, var(--g-dk)); } /* scroll reveal */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal.in { opacity: 1; transform: none; } /* ---- 3. Icons ---------------------------------------------------------- */ .icon { width: 1em; height: 1em; display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .icon--fill { fill: currentColor; stroke: none; } /* ---- 4. Buttons -------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: .55rem; padding: .95rem 1.7rem; font-weight: 600; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; border: 0; cursor: pointer; border-radius: 3px; transition: transform .35s var(--ease), box-shadow .35s var(--ease), color .25s, background .25s; } .btn .icon { font-size: 1.05em; stroke-width: 2; } .btn-gold { color: #1A1305; background: linear-gradient(95deg, #E8CE8A, #C9A24B 52%, #E2C173); box-shadow: 0 0 0 1px rgba(246, 230, 182, .35) inset; } .btn-gold:hover { transform: translateY(-3px); box-shadow: 0 16px 38px -14px rgba(201, 162, 75, .85), 0 0 22px -6px rgba(236, 213, 151, .45), 0 0 0 1px rgba(246, 230, 182, .55) inset; } .btn-gold .icon { transition: transform .35s var(--ease); } .btn-gold:hover .icon { transform: translateX(4px); } .btn-line { color: var(--g-hi); background: transparent; box-shadow: 0 0 0 1px var(--g-deep) inset; } .btn-line:hover { transform: translateY(-3px); color: var(--g-pale); box-shadow: 0 0 0 1px var(--g) inset; } .section--light .btn-line { color: var(--g-dk); box-shadow: 0 0 0 1px var(--line-l) inset; } .section--light .btn-line:hover { color: var(--t-l); box-shadow: 0 0 0 1px var(--g) inset; } .btn-wa { color: #07310f; background: linear-gradient(95deg, #3BE07A, #1FB257); } .btn-wa:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -16px rgba(37, 211, 102, .6); } /* ---- 5. Announcement --------------------------------------------------- */ .announce { background: var(--ink-1); border-bottom: 1px solid var(--line-dd); color: var(--g-hi); font-weight: 600; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; text-align: center; padding: .6rem 1rem; } .announce .sep { color: var(--g-dk); margin: 0 .8rem; } /* ---- 6. Header --------------------------------------------------------- */ .header { position: sticky; top: 0; z-index: 60; background: rgba(9, 9, 10, .72); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--line-dd); } .header__in { display: flex; align-items: center; gap: 2.5rem; height: 72px; } .brand { font-weight: 800; font-size: 1.35rem; letter-spacing: -.03em; color: #fff; margin-right: auto; } .brand .p { background: var(--foil); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 5s linear infinite; } /* header logo (webp wordmark) + small solid-gold "prime" badge at its top-right */ .brand--logo { position: relative; display: inline-flex; align-items: center; line-height: 0; } .brand__logo { height: 34px; width: auto; display: block; } .brand__prime { position: absolute; top: 0; left: 100%; margin-left: 6px; display: inline-block; padding: 3px 6px 2px; font-weight: 700; font-size: .5rem; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: #1A1305; background: linear-gradient(125deg, #F6E6B6 0%, #E8CE8A 38%, #C9A24B 100%); border-radius: 4px; box-shadow: 0 2px 7px -1px rgba(201, 162, 75, .55), inset 0 1px 0 rgba(255, 255, 255, .5); } .nav { display: flex; gap: 1.9rem; } .nav a { font-weight: 600; font-size: .82rem; color: var(--t-d); padding: .4rem 0; position: relative; } .nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--g); transition: width .3s var(--ease); } .nav a:hover { color: var(--g-hi); } .nav a:hover::after { width: 100%; } .header__icons { display: flex; align-items: center; gap: 1.35rem; color: var(--t-d); font-size: 1.2rem; } .header__icons a { display: inline-flex; transition: color .2s; } .header__icons a:hover { color: var(--g-hi); } .cart { position: relative; } .cart__n { position: absolute; top: -7px; right: -9px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: linear-gradient(95deg, #E8CE8A, #C9A24B); color: #1A1305; font-size: .62rem; font-weight: 700; display: grid; place-items: center; } .burger { display: none; background: 0; border: 0; color: var(--g-hi); font-size: 1.35rem; cursor: pointer; } /* ---- 7. Hero (compact) ------------------------------------------------- */ .hero { background: var(--ink); overflow: hidden; } .hero__in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2rem; align-items: center; padding-block: clamp(2.4rem, 4.5vw, 3.8rem); } .hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.4rem); font-weight: 700; line-height: 1.04; margin-bottom: 1.3rem; } .hero h1 .lt { color: #fff; } .hero p.lead { font-size: 1.05rem; color: var(--t-d-mut); max-width: 30rem; margin: 0 0 1.9rem; } /* Australia express-shipping badge — the headline selling point */ .ausbadge { display: inline-flex; align-items: center; gap: .8rem; padding: .55rem 1.05rem; border: 1px solid var(--g-deep); border-radius: 11px; background: linear-gradient(120deg, rgba(201, 162, 75, .12), rgba(255, 255, 255, .015)); box-shadow: 0 12px 34px -20px rgba(201, 162, 75, .55); } .ausflag { width: 42px; height: 21px; border-radius: 3px; flex: none; box-shadow: 0 3px 10px rgba(0, 0, 0, .5); } .ausbadge__txt strong { display: block; font-weight: 700; font-size: .9rem; line-height: 1.2; color: #fff; letter-spacing: -.01em; } .ausbadge__txt span { display: block; font-size: .72rem; line-height: 1.25; color: var(--g-hi); margin-top: .04rem; } .hero__mini { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.6rem; } .hero__mini span { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--t-d-mut); } .hero__mini .icon { color: var(--g); font-size: .95rem; } /* gold device (CSS placeholder for product photography) */ .stage { position: relative; display: grid; place-items: center; min-height: 330px; } .stage::before { content: ""; position: absolute; top: 47%; left: 52%; width: min(138%, 640px); height: min(124%, 520px); border-radius: 58% 42% 63% 37% / 47% 60% 40% 53%; background: radial-gradient(56% 66% at 24% 34%, rgba(185, 140, 255, .30), transparent 70%), radial-gradient(52% 60% at 78% 26%, rgba(91, 214, 255, .22), transparent 72%), radial-gradient(64% 58% at 72% 78%, rgba(255, 116, 200, .24), transparent 70%), radial-gradient(74% 80% at 38% 64%, rgba(236, 213, 151, .30), transparent 78%); filter: blur(62px) saturate(118%); transform: translate(-50%, -50%); opacity: .92; animation: irisdrift 28s ease-in-out infinite; } .stage::after { content: ""; position: absolute; bottom: 8%; width: 220px; height: 28px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .45), transparent 70%); filter: blur(7px); } /* hero product image — mix-blend-mode:multiply removes white bg so aurora bleeds through */ .hero__img { position: relative; z-index: 1; width: min(112%, 540px); max-height: 400px; object-fit: contain; mix-blend-mode: multiply; drop-shadow(0 8px 24px rgba(0,0,0,.3)); filter: drop-shadow(0 8px 28px rgba(0,0,0,.35)); } .device { position: relative; z-index: 1; width: 138px; height: 268px; border-radius: 32px; background: linear-gradient(116deg, #6E541F 0%, #F6E6B6 24%, #C9A24B 50%, #EAD18A 68%, #6E541F 100%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .32), inset -14px 0 30px rgba(0, 0, 0, .3), inset 14px 0 24px rgba(255, 255, 255, .2), 0 30px 70px -16px rgba(0, 0, 0, .7); } .device::before { content: ""; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); width: 40px; height: 23px; border-radius: 10px 10px 5px 5px; background: #131316; box-shadow: inset 0 -3px 6px rgba(255, 255, 255, .1); } .device span { position: absolute; inset: 0; display: grid; place-items: center; writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 700; font-size: .8rem; letter-spacing: .32em; color: rgba(40, 28, 6, .5); } /* ---- 8. Marquee -------------------------------------------------------- */ .marquee { background: var(--ink-1); border-block: 1px solid var(--line-dd); overflow: hidden; padding-block: 1rem; } .marquee__track { display: inline-flex; white-space: nowrap; animation: roll 28s linear infinite; } .marquee__track span { font-weight: 700; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px var(--g-dk); padding: 0 1.4rem; display: inline-flex; align-items: center; gap: 1.4rem; } .marquee__track span .dot { color: var(--g); -webkit-text-stroke: 0; } @keyframes roll { to { transform: translateX(-50%); } } /* ---- 9. Products (LIGHT) ----------------------------------------------- */ .section--light { background: var(--paper); color: var(--t-l); } .section--light h2 { color: var(--t-l); } .head { max-width: 44rem; } .head--center { text-align: center; margin-inline: auto; } .head h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 700; margin-bottom: .8rem; } .head p { color: var(--t-l-mut); margin: 0; font-size: 1rem; } .section--dark .head p { color: var(--t-d-mut); } .shopbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2.4rem; } .pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 1.4rem; } .card { position: relative; background: var(--card); border: 0; border-radius: var(--r); padding: 1.05rem; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 6px 22px -14px rgba(20, 18, 10, .25); transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .card:hover { transform: translateY(-7px); box-shadow: 0 28px 50px -26px rgba(201, 162, 75, .6); } .card__media { position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--r) var(--r) 0 0; background: radial-gradient(circle at 50% 34%, #fff, #EFEBE0 74%); margin: -1.05rem -1.05rem 1rem; overflow: hidden; cursor: pointer; } .card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .pgrid__empty { grid-column: 1 / -1; text-align: center; color: var(--t-l-mut); padding: 2rem 0; } .card__media .device { width: 76px; height: 148px; border-radius: 19px; transition: transform .45s var(--ease); } .card__media .device::before { width: 23px; height: 13px; top: -9px; } .card__media .device span { font-size: .5rem; letter-spacing: .22em; } .card:hover .card__media .device { transform: translateY(-4px) scale(1.045); } .card__tag { position: absolute; top: .8rem; left: .8rem; font-weight: 700; font-size: .6rem; letter-spacing: .12em; color: var(--g-dk); border: 1px solid var(--g-hi); background: #FBF4DF; padding: .22rem .48rem; border-radius: 3px; z-index: 2; } .card__view { position: absolute; left: 0; right: 0; bottom: 0; padding: .5rem; text-align: center; font-weight: 700; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #1A1305; background: linear-gradient(95deg, #E8CE8A, #C9A24B); transform: translateY(101%); transition: transform .35s var(--ease); z-index: 2; } .card:hover .card__view { transform: none; } .card__series { font-weight: 600; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--g-dk); margin-bottom: .35rem; } .card h3 { font-weight: 600; font-size: .98rem; line-height: 1.32; color: var(--t-l); margin: 0 0 .5rem; min-height: 2.6em; } .stars { display: inline-block; width: 82px; height: 14px; margin-bottom: .8rem; background-repeat: repeat-x; background-size: 16.4px 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 16 14'%3E%3Cpath fill='%23C9A24B' d='M8 1l1.9 3.9 4.3.4-3.2 2.9.95 4.2L8 10.1 3.95 12.3l.95-4.2L1.7 5.3l4.3-.4z'/%3E%3C/svg%3E"); } .card__row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; margin-bottom: .7rem; } .price { font-weight: 700; font-size: 1.2rem; color: var(--t-l); } .qty { display: inline-flex; align-items: center; border: 1px solid var(--line-l); border-radius: 8px; overflow: hidden; flex: none; } .qty__btn { width: 28px; height: 30px; border: 0; background: #fff; color: var(--t-l); font: 700 1rem/1 var(--f); cursor: pointer; display: grid; place-items: center; transition: background .2s, color .2s; } .qty__btn:hover { background: var(--g-hi); color: #1A1305; } .qty__n { min-width: 26px; text-align: center; font-weight: 700; font-size: .9rem; color: var(--t-l); } .card__cta { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .btn-add, .btn-buy { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; padding: .62rem .4rem; font: 700 .72rem/1 var(--f); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform .25s var(--ease), box-shadow .3s var(--ease), background .25s, color .2s; } .btn-add { background: #fff; color: var(--g-dk); box-shadow: 0 0 0 1px var(--g) inset; } .btn-add:hover { background: var(--g-hi); color: #1A1305; transform: translateY(-2px); } .btn-buy { background: linear-gradient(120deg, #1C1C21, #0C0C0E); color: #fff; box-shadow: 0 0 0 1px var(--g-deep) inset; } .btn-buy:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .6), 0 0 0 1px var(--g) inset; } /* ---- 10. Branding — image-forward masonry (LOST MARY style) ------------ */ /* large, asymmetric iridescent ambient — client wants colour back in THIS section (exception to the gold-only rule; hero is still the other colour zone) */ .brand-sec { background: radial-gradient(940px 660px at 80% -8%, rgba(185, 140, 255, .22), transparent 60%), radial-gradient(820px 720px at 2% 38%, rgba(91, 214, 255, .15), transparent 58%), radial-gradient(700px 560px at 98% 86%, rgba(255, 116, 200, .17), transparent 58%), radial-gradient(560px 440px at 26% 112%, rgba(236, 213, 151, .13), transparent 62%), var(--ink); } .bgrid { column-count: 2; column-gap: 2.2rem; margin-top: 2.6rem; } .bcard { break-inside: avoid; margin-bottom: 2.6rem; } .bcard__label { font-weight: 600; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--g-hi); } .bcard__title { font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.05; color: #fff; margin: .5rem 0 .8rem; } .bcard__more { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--t-d); border-bottom: 2px solid var(--g); padding-bottom: 3px; transition: color .2s, gap .25s var(--ease); } .bcard__more:hover { color: var(--g-hi); gap: .75rem; } .bcard__more .icon { font-size: .95rem; stroke-width: 2.2; } .bcard__img { margin-top: 1.2rem; border-radius: 14px; overflow: hidden; position: relative; border: 1px solid var(--line-d); display: grid; place-items: center; } .bcard__img .device { width: 96px; height: 188px; } .bcard__img .ph { position: absolute; bottom: .9rem; left: .9rem; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--t-d-mut); } /* atmospheric placeholder backdrops (swap for real photography) */ .img-wide { aspect-ratio: 16 / 10; background: radial-gradient(120% 110% at 32% 24%, #251f2c, #0B0B0C 74%); } .img-tall { aspect-ratio: 3 / 4; background: radial-gradient(120% 120% at 62% 28%, #1c2331, #0B0B0C 74%); } .bcard:nth-child(3) .img-wide { background: radial-gradient(120% 110% at 50% 30%, #2a241a, #0B0B0C 74%); } .bcard:nth-child(2) .img-tall { background: radial-gradient(120% 120% at 42% 30%, #271c2e, #0B0B0C 74%); } /* RESTRAINED RULE (client): iridescent colour lives ONLY in the hero aurora (behind the transparent product PNG). Everywhere else is pure champagne gold — gold hover halos, gold card accent, gold ambient. No glow inside image boxes (opaque/PNG images cover it). Gold dominates; colour stays in the hero. */ /* ---- 11. The Standard (why) -------------------------------------------- */ .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-dd); border-radius: var(--r); overflow: hidden; } .why { padding: 2.1rem; border-right: 1px solid var(--line-dd); border-bottom: 1px solid var(--line-dd); transition: background .3s; } .why:hover { background: rgba(236, 213, 151, .035); } .why__i { width: 40px; height: 40px; color: var(--g-hi); font-size: 1.6rem; display: grid; place-items: center; margin-bottom: 1.1rem; } .why h3 { font-weight: 700; font-size: 1rem; color: #fff; margin-bottom: .4rem; } .why p { margin: 0; color: var(--t-d-mut); font-size: .9rem; } /* ---- 12. Wholesale ----------------------------------------------------- */ .ws { background: var(--ink); } .ws__in { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; border: 1px solid var(--line-d); border-radius: 20px; padding: clamp(1.8rem, 4vw, 3.2rem); padding-bottom: clamp(1.5rem, 2.6vw, 1.9rem); background: linear-gradient(130deg, var(--ink-2), var(--ink-1)); } /* rising gold smoke behind wholesale content — seamless loop: each puff fades to 0 opacity at BOTH 0% and 100%, so there is no visible seam where it repeats */ .ws__in > div:not(.ws-smoke) { position: relative; z-index: 1; } .ws-smoke { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: 20px; pointer-events: none; } .ws-smoke i { position: absolute; bottom: -14%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(246, 230, 182, .5), rgba(201, 162, 75, .2) 46%, transparent 70%); filter: blur(30px); opacity: 0; animation: smokerise linear infinite; will-change: transform, opacity; } .ws-smoke i:nth-child(1) { left: 6%; width: 42%; animation-duration: 15s; animation-delay: -2s; } .ws-smoke i:nth-child(2) { left: 34%; width: 54%; animation-duration: 20s; animation-delay: -8s; } .ws-smoke i:nth-child(3) { left: 62%; width: 44%; animation-duration: 17s; animation-delay: -13s; } .ws-smoke i:nth-child(4) { left: 20%; width: 36%; animation-duration: 23s; animation-delay: -5s; } .ws-smoke i:nth-child(5) { left: 76%; width: 40%; animation-duration: 18s; animation-delay: -10s; } @keyframes smokerise { 0% { transform: translateY(8%) scale(.6); opacity: 0; } 15% { opacity: .75; } 55% { opacity: .5; } 100% { transform: translateY(-180%) scale(1.5); opacity: 0; } } .ws h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 700; margin-bottom: 1rem; } .ws p { color: var(--t-d-mut); margin-bottom: 1.4rem; } .chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.9rem; } .chip { font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: .48rem .9rem; border-radius: 3px; border: 1px solid var(--g-deep); color: var(--g-hi); } .ws__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; } .ws__email { display: inline-flex; align-items: center; gap: .5rem; color: var(--g-hi); font-weight: 600; font-size: .92rem; transition: color .2s; } .ws__email:hover { color: var(--g-pale); } .ws__email .icon { font-size: 1.15rem; } /* pure-white placeholder image below the wholesale contact buttons */ .ws__ph { position: relative; margin-top: 1.9rem; aspect-ratio: 16 / 7; background: #fff; border-radius: 14px; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .7); } .ws__ph .ph { position: absolute; bottom: .85rem; left: 1rem; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #B9B2A2; } .ws__art { display: grid; place-items: center; } .ws__art .stage { min-height: 280px; } /* wholesale: gold-only aurora — colour stays in the hero */ .ws__art .stage::before { background: conic-gradient(from 0deg, rgba(236, 213, 151, .3), rgba(201, 162, 75, .22), rgba(140, 108, 44, .16), rgba(236, 213, 151, .3)); } .ws__art .device { transform: rotate(-9deg); width: 116px; height: 226px; } /* ---- 13. Reviews (LIGHT) — summary + authentic cards ------------------- */ /* summary: average score · rating breakdown · sales stats */ .rsum { display: grid; grid-template-columns: minmax(190px, .85fr) 1.5fr; gap: clamp(1.4rem, 4vw, 3rem); align-items: center; background: var(--card); border: 1px solid var(--line-l); border-radius: var(--r); padding: clamp(1.5rem, 3.5vw, 2.6rem); margin: 3rem 0 2.6rem; } .rsum__score { text-align: center; border-right: 1px solid var(--line-l); padding-right: clamp(1rem, 3vw, 2.2rem); } .rsum__big { font-weight: 700; font-size: clamp(3rem, 7vw, 4.4rem); line-height: 1; color: var(--t-l); letter-spacing: -.02em; } .rsum__big span { font-size: .3em; color: var(--t-l-mut); font-weight: 600; } .rsum__score .stars--lg { margin: .55rem auto .5rem; } .rsum__based { font-size: .8rem; color: var(--t-l-mut); } .stars--lg { width: 132px; height: 22px; background-size: 26.4px 22px; } .rsum__bars { display: flex; flex-direction: column; gap: .5rem; } .rbar { display: flex; align-items: center; gap: .7rem; font-size: .8rem; } .rbar__k { display: inline-flex; align-items: center; gap: .22rem; width: 38px; flex: none; font-weight: 600; color: var(--t-l); } .rstar { width: 11px; height: 11px; fill: var(--g); } .rbar__t { flex: 1; height: 8px; border-radius: 999px; background: var(--paper-2); overflow: hidden; } .rbar__t b { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--g-mid), var(--g-hi)); } .rbar em { width: 36px; flex: none; text-align: right; font-style: normal; font-weight: 600; color: var(--t-l-mut); } .rsum__stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; border-top: 1px solid var(--line-l); padding-top: 1.5rem; } .rstat { text-align: center; } .rstat strong { display: block; font-weight: 700; font-size: clamp(1.5rem, 3.6vw, 2.1rem); letter-spacing: -.01em; background: var(--foil); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 5s linear infinite; } .rstat span { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--t-l-mut); } /* review cards */ .tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.4rem; } .t { background: var(--card); border: 1px solid var(--line-l); border-radius: var(--r); padding: 1.6rem; display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .t:hover { transform: translateY(-5px); border-color: var(--g-hi); box-shadow: 0 22px 44px -26px rgba(201, 162, 75, .5); } .t__top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .85rem; } .t .stars { margin: 0; } .t__ver { display: inline-flex; align-items: center; gap: .32rem; font-weight: 600; font-size: .66rem; letter-spacing: .03em; text-transform: uppercase; color: var(--t-l-mut); } .t__ver .icon { font-size: 1rem; stroke-width: 2.6; color: #1FB257; } .t__txt { margin: 0 0 1.1rem; color: var(--t-l); font-size: .94rem; } .t__buy { font-weight: 600; font-size: .72rem; letter-spacing: .03em; color: var(--g-dk); margin: 0 0 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line-l); } .t__who { display: flex; align-items: center; gap: .75rem; margin-top: auto; } .t__av { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(95deg, #E8CE8A, #C9A24B); color: #1A1305; display: grid; place-items: center; font-weight: 700; font-size: .95rem; flex: none; } .t__name { font-weight: 700; color: var(--t-l); font-size: .88rem; } .t__name .t__city { font-weight: 500; color: var(--t-l-mut); } .t__date { color: var(--t-l-mut); font-size: .76rem; margin-top: .1rem; } /* ---- 14. FAQ (LIGHT) --------------------------------------------------- */ .faq { max-width: 820px; margin-inline: auto; } .q { border-top: 1px solid var(--line-l); } .q:last-child { border-bottom: 1px solid var(--line-l); } .q__btn { width: 100%; background: 0; border: 0; text-align: left; font-weight: 600; font-size: 1.02rem; color: var(--t-l); padding: 1.4rem 3rem 1.4rem 0; position: relative; cursor: pointer; } .q__btn .pm { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--g-dk); } .q__btn .pm::before, .q__btn .pm::after { content: ""; position: absolute; background: currentColor; transition: transform .3s var(--ease); } .q__btn .pm::before { top: 9px; left: 2px; width: 16px; height: 2px; } .q__btn .pm::after { left: 9px; top: 2px; width: 2px; height: 16px; } .q.open .pm::after { transform: scaleY(0); } .q__a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); } .q__a p { color: var(--t-l-mut); margin: 0 0 1.4rem; } /* ---- 15. Final + footer ------------------------------------------------ */ .final { background: radial-gradient(640px 380px at 50% 122%, rgba(236, 213, 151, .12), rgba(201, 162, 75, .06) 48%, transparent 66%), var(--ink); text-align: center; } .final h2 { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 700; margin-bottom: 1rem; } .final p { color: var(--t-d-mut); max-width: 34rem; margin: 0 auto 2rem; } .final__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .foot { background: var(--ink-1); border-top: 1px solid var(--line-dd); padding-block: 3.6rem 2rem; } .foot__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.8rem; border-bottom: 1px solid var(--line-dd); } .foot__brand .brand { font-size: 1.55rem; display: inline-block; margin-bottom: 1rem; } .foot__brand p { color: var(--t-d-mut); font-size: .9rem; max-width: 24rem; } .foot__soc { display: flex; gap: .8rem; margin-top: 1.3rem; } .foot__soc a { width: 38px; height: 38px; border: 1px solid var(--line-d); border-radius: 50%; display: grid; place-items: center; color: var(--g-hi); font-size: 1.1rem; transition: border-color .25s, transform .25s; } .foot__soc a:hover { border-color: var(--g); transform: translateY(-2px); } .foot h4 { font-weight: 700; color: var(--g-hi); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1rem; } .foot a.fl { display: block; color: var(--t-d-mut); padding: .32rem 0; font-size: .9rem; transition: color .2s; } .foot a.fl:hover { color: var(--g-hi); } .foot__bot { padding-top: 1.7rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--t-d-mut); font-size: .8rem; } .foot__age { color: var(--g-dk); } /* ---- 16. Responsive ---------------------------------------------------- */ @media (max-width: 960px) { .hero__in, .ws__in { grid-template-columns: 1fr; } .ws__art { display: none; } /* the placeholder image is the wholesale visual when stacked; drop the trailing aurora so the card ends at the image */ .stage { min-height: 280px; order: -1; } .bgrid { column-count: 1; } .why-grid { grid-template-columns: 1fr 1fr; } .foot__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .nav, .header__icons .ic-search { display: none; } .burger { display: inline-flex; } /* The Standard: always two per row on mobile (never collapse to one) */ .why-grid { grid-template-columns: 1fr 1fr; } .why { padding: 1.5rem 1.15rem; } .why__i { margin-bottom: .75rem; font-size: 1.4rem; } .why h3 { font-size: .92rem; } .why p { font-size: .8rem; line-height: 1.5; } .foot__grid { grid-template-columns: 1fr; } } /* ======================================================================= v4 — clean split (fig4), range lookbook (fig5), rich footer (fig3) ======================================================================= */ .imgbox { position: relative; border-radius: 16px; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--line-l); } .imgbox .ph { position: absolute; bottom: .8rem; left: .9rem; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .42); } /* Fig 4: clean split feature (light) */ .feat { background: var(--paper); color: var(--t-l); } .feat__in { display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .feat h2 { font-size: clamp(2rem, 4.5vw, 3.3rem); font-weight: 700; color: var(--t-l); margin-bottom: 1.1rem; } .feat .lead { color: var(--t-l-mut); margin: 0 0 1.7rem; max-width: 30rem; } .feat .bcard__more { color: var(--t-l); border-color: var(--g); } .feat .bcard__more:hover { color: var(--g-dk); } .feat__main { aspect-ratio: 1 / 1; background: radial-gradient(120% 120% at 50% 38%, #1b1b20, #000 76%); border-color: #1b1b20; } .feat__main .device { width: 150px; height: 290px; } .feat__mini { width: 62%; aspect-ratio: 4 / 3; margin: 2rem 0 0 auto; background: radial-gradient(120% 120% at 50% 40%, #221b16, #000 76%); border-color: #221b16; } .feat__mini .device { width: 84px; height: 164px; transform: rotate(8deg); } /* Fig 5: range lookbook (dark) */ .range { background: var(--ink); } .rgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } .rcard { position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-d); display: grid; place-items: center; } .rcard::before { content: ""; position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(201, 162, 75, .2), transparent 66%); } .rcard .device { width: 92px; height: 180px; position: relative; } .r-1 { background: radial-gradient(120% 120% at 40% 26%, #241d2b, #0B0B0C 74%); } .r-2 { background: radial-gradient(120% 120% at 60% 30%, #1c2330, #0B0B0C 74%); } .r-3 { background: radial-gradient(120% 120% at 50% 30%, #2a221a, #0B0B0C 74%); } .rcard__tag { position: absolute; top: .9rem; left: .9rem; z-index: 1; font-weight: 700; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--g-hi); border: 1px solid var(--g-deep); background: rgba(0, 0, 0, .4); padding: .3rem .55rem; border-radius: 3px; } .range__all { text-align: center; margin-top: 2.8rem; } .range__all a { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; font-size: clamp(1.3rem, 3vw, 1.9rem); color: #fff; border-bottom: 2px solid var(--g); padding-bottom: 4px; transition: gap .25s var(--ease), color .2s; } .range__all a:hover { gap: 1rem; color: var(--g-hi); } .range__all .icon { font-size: .9em; stroke-width: 2.2; } /* Fig 3: rich footer */ .foot2 { background: var(--ink-1); border-top: 1px solid var(--line-dd); } .foot2__follow { border-block: 0; border-bottom: 1px solid var(--line-dd); } /* footer thumbs auto-scroll (no manual scrollbar — products drift slowly) */ .foot2__thumbs { overflow: hidden; border-bottom: 1px solid var(--line-dd); } .fthumb-track { display: flex; width: max-content; animation: roll 45s linear infinite; } .fthumb-track:hover { animation-play-state: paused; } .fthumb { width: clamp(150px, 20vw, 240px); flex: none; aspect-ratio: 5 / 4; position: relative; display: grid; place-items: center; border-right: 1px solid var(--line-dd); } .fthumb .device { width: 56px; height: 110px; } .ft-1 { background: radial-gradient(120% 120% at 40% 30%, #2a1d2e, #0B0B0C 76%); } .ft-2 { background: radial-gradient(120% 120% at 60% 30%, #231f2e, #0B0B0C 76%); } .ft-3 { background: radial-gradient(120% 120% at 50% 40%, #2a241a, #0B0B0C 76%); } .ft-4 { background: radial-gradient(120% 120% at 50% 30%, #1c2330, #0B0B0C 76%); } .ft-5 { background: radial-gradient(120% 120% at 45% 30%, #271c2e, #0B0B0C 76%); } .foot2__body { text-align: center; padding-block: clamp(2.5rem, 5vw, 4rem); } .foot2__soc { display: flex; justify-content: center; gap: 1rem; margin-bottom: 2.6rem; } .foot2__soc a { width: 44px; height: 44px; border: 1px solid var(--line-d); border-radius: 50%; display: grid; place-items: center; color: var(--g-hi); font-size: 1.2rem; transition: border-color .25s, transform .25s, color .25s; } .foot2__soc a:hover { border-color: var(--g); color: var(--g-pale); transform: translateY(-3px); } .foot2__news .brand { font-size: 1.6rem; display: inline-block; margin-bottom: 1rem; } .foot2__news h4 { font-weight: 700; font-size: clamp(1.4rem, 3vw, 1.9rem); color: #fff; margin-bottom: .5rem; } .foot2__news p { color: var(--t-d-mut); margin-bottom: 1.4rem; } .news-form { display: flex; gap: .6rem; max-width: 460px; margin: 0 auto 3rem; } .news-form input { flex: 1; min-width: 0; background: var(--ink-3); border: 1px solid var(--line-dd); border-radius: 4px; padding: .9rem 1rem; color: var(--t-d); font: inherit; } .news-form input::placeholder { color: var(--t-d-mut); } .foot2__svc { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.8rem; margin-bottom: 2.4rem; } .foot2__svc h5 { font-weight: 700; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--g-hi); margin-bottom: .4rem; } .foot2__svc a { font-weight: 700; color: var(--t-d); } .foot2__svc small { display: block; color: var(--t-d-mut); font-size: .8rem; margin-top: .2rem; } /* anti-counterfeit notice — gold-bordered pill, premium */ .foot2__anti { max-width: 660px; margin: 0 auto 1.5rem; display: inline-flex; align-items: center; gap: .7rem; padding: .8rem 1.4rem; border: 1px solid var(--g-deep); border-radius: 999px; background: linear-gradient(120deg, rgba(201, 162, 75, .10), rgba(201, 162, 75, .02)); text-align: left; } .foot2__anti .icon { color: var(--g-hi); font-size: 1.35rem; stroke-width: 1.8; flex: none; } .foot2__anti p { margin: 0; color: var(--t-d); font-size: .84rem; font-weight: 600; } .foot2__warn { max-width: 620px; margin: 0 auto; color: var(--g-dk); font-size: .82rem; } .foot2__legal { border-top: 1px solid var(--line-dd); padding-block: 1.6rem; display: flex; justify-content: center; gap: 1.6rem; flex-wrap: wrap; color: var(--t-d-mut); font-size: .8rem; } .foot2__legal a:hover { color: var(--g-hi); } @media (max-width: 960px) { .feat__in { grid-template-columns: 1fr; } .rgrid { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .rgrid { grid-template-columns: 1fr; } .news-form { flex-direction: column; } } /* ======================================================================= v5 — iridescent accents, staggered 2-col masonry, feat single shot ======================================================================= */ @keyframes irisspin { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes irisdrift { 0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); } 33% { transform: translate(-53%, -47%) rotate(6deg) scale(1.05); } 66% { transform: translate(-48%, -52%) rotate(-5deg) scale(1.03); } 100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); } } /* product-card top accent stripe removed per client — hover is clean lift + gold border only */ /* two-column staggered masonry — stays 2 cols on mobile (no tall single stack) */ .bmason { display: flex; gap: 1.8rem; align-items: flex-start; margin-top: 2.6rem; } .bcol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2.4rem; } .bcol--offset { margin-top: 4.5rem; } /* push the Delivery card further down so the heading clears the previous image with spacing */ .bcard--drop { margin-top: 3.2rem; } /* feat: single clean product shot (big image removed) */ .feat__shot { aspect-ratio: 4 / 5; background: radial-gradient(120% 120% at 50% 38%, #1b1b20, #000 76%); border-color: #1b1b20; } .feat__shot .device { width: 122px; height: 238px; } @media (max-width: 620px) { .bmason { gap: 1rem; } .bcol { gap: 1.2rem; } .bcol--offset { margin-top: 2.4rem; } .bcard--drop { margin-top: 1.6rem; } } /* ======================================================================= v6 — reviews summary + authentic cards; products always 2-up on mobile; card stripe removed (client feedback 2026-06-04) ======================================================================= */ @media (max-width: 760px) { .rsum { grid-template-columns: 1fr; } .rsum__score { border-right: 0; border-bottom: 1px solid var(--line-l); padding: 0 0 1.4rem; } } @media (max-width: 620px) { /* products: never collapse to a single column — always two per row */ .pgrid { grid-template-columns: repeat(2, 1fr); gap: .8rem; } .card { padding: .7rem; } .card h3 { font-size: .9rem; min-height: 0; } .card__series { font-size: .58rem; } .price { font-size: 1.06rem; } .card__row { flex-wrap: wrap; gap: .4rem .5rem; } .qty__btn { width: 26px; } .card__cta { grid-template-columns: 1fr; gap: .4rem; } .btn-add, .btn-buy { padding: .58rem .4rem; } .rsum__stats { gap: .5rem; } .rstat strong { font-size: 1.3rem; } .rstat span { font-size: .62rem; letter-spacing: .06em; } } /* reviews: collapsed shows only the first card; "View More" reveals the rest */ .reviews-more { text-align: center; margin-top: 2.2rem; } /* collapsed default (mobile / fallback): a single centered card */ #reviews.is-collapsed .tgrid { grid-template-columns: minmax(0, 560px); justify-content: center; } #reviews.is-collapsed .t:nth-child(n+2) { display: none; } /* PC: peek carousel — full centered card flanked by a half card on each side, clipped by the screen */ @media (min-width: 768px) { #reviews.is-collapsed .tgrid { display: flex; flex-wrap: nowrap; justify-content: center; align-items: stretch; gap: 1.6rem; width: 100vw; margin-left: calc(50% - 50vw); overflow: clip; overflow-clip-margin: 30px; } #reviews.is-collapsed .t { flex: 0 0 min(620px, calc(50vw - 1.6rem)); } #reviews.is-collapsed .t:nth-child(-n+3) { display: flex; } #reviews.is-collapsed .t:nth-child(n+4) { display: none; } } #reviews .reviews-more .icon { transform: rotate(90deg); transition: transform .3s var(--ease); } #reviews:not(.is-collapsed) .reviews-more .icon { transform: rotate(-90deg); } /* ======================================================================= v7 — reviews refinement (gold laurel + frame), toast for card actions ======================================================================= */ .rsum { position: relative; } .rsum::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: var(--r) var(--r) 0 0; background: linear-gradient(90deg, transparent, var(--g) 22%, var(--g-pale) 50%, var(--g) 78%, transparent); } .rsum__rate { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; } .laurel { width: 38px; height: 76px; color: var(--g); flex: none; filter: drop-shadow(0 2px 5px rgba(201, 162, 75, .35)); } .laurel--l { transform: scaleX(-1); } .rsum__rate .rsum__big { margin: 0; } /* toast — preview feedback for the product-card interactions */ .toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 18px); z-index: 200; background: rgba(13, 13, 15, .94); border: 1px solid var(--g-deep); color: var(--g-hi); font-weight: 600; font-size: .82rem; padding: .8rem 1.3rem; border-radius: 999px; box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .7), 0 0 0 1px rgba(246, 230, 182, .12) inset; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); max-width: min(90vw, 440px); text-align: center; } .toast.in { opacity: 1; transform: translate(-50%, 0); } /* ======================================================================= v8 — hero Bulk Order (WhatsApp) + copy-email; product "View all flavors"; dedicated all-flavours shop page ======================================================================= */ /* hero: shipping badge on top, a gold Bulk Order button stretched to the badge width, then the click-to-copy email — left-aligned stack (PC + mobile) */ .hero__ship { display: flex; flex-direction: column; align-items: stretch; gap: .7rem; width: fit-content; max-width: 100%; margin-top: .5rem; } .ausbadge { gap: .7rem; padding: .5rem .95rem; } /* shortened a touch; widest item — sets the stack width */ .hero__bulk { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; } .hero__wa { align-self: stretch; justify-content: center; padding: .82rem 1.4rem; font-size: .82rem; } /* stretch to the badge width */ .hero__wa .icon { font-size: 1.3em; } .hero__wa:hover .icon { transform: none; } /* keep the WhatsApp glyph steady (override btn-gold arrow nudge) */ /* click-to-copy email under the Bulk Order button */ .hero__email { display: inline-flex; align-items: center; gap: .45rem; margin: 0; padding: .15rem 0; background: 0; border: 0; font: 600 .84rem/1.1 var(--f); color: var(--g-hi); cursor: pointer; transition: color .2s; } .hero__email .icon { font-size: 1.1em; color: var(--g); } .hero__email span { border-bottom: 1px dashed rgba(236, 213, 151, .42); padding-bottom: 2px; transition: border-color .2s; } .hero__email:hover { color: var(--g-pale); } .hero__email:hover span { border-bottom-color: var(--g-pale); } /* products: "View all flavors" — top-right link + button below the grid */ .viewall { display: inline-flex; align-items: center; gap: .5rem; flex: none; font-weight: 700; font-size: .82rem; letter-spacing: .03em; color: var(--g-dk); border-bottom: 2px solid var(--g); padding-bottom: 3px; white-space: nowrap; transition: color .2s, gap .25s var(--ease); } .viewall:hover { color: var(--t-l); gap: .8rem; } .viewall .icon { font-size: 1em; stroke-width: 2.2; } .shopmore { text-align: center; margin-top: 2.6rem; } /* ---- all-flavours shop page -------------------------------------------- */ .shophero { position: relative; background: var(--ink); padding-block: .9rem; border-bottom: 1px solid var(--line-dd); } .crumb { display: flex; align-items: center; gap: .5rem; font-size: .76rem; letter-spacing: .04em; color: var(--t-d-mut); margin: 0; } .crumb a { transition: color .2s; } .crumb a:hover { color: var(--g-hi); } .crumb .sep { color: var(--g-dk); } /* sticky filter / count bar (sits under the sticky header) */ .shoptools { position: sticky; top: 72px; z-index: 40; background: rgba(247, 245, 239, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-l); } .shoptools__in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem 1.2rem; padding-block: .85rem; } .shopfilter { display: flex; flex-wrap: wrap; gap: .5rem; } .fpill { font: 600 .74rem/1 var(--f); letter-spacing: .08em; text-transform: uppercase; padding: .55rem .95rem; border-radius: 999px; border: 1px solid var(--line-l); background: #fff; color: var(--t-l-mut); cursor: pointer; transition: color .2s, border-color .2s, background .2s, transform .2s var(--ease); } .fpill:hover { border-color: var(--g); color: var(--t-l); transform: translateY(-1px); } .fpill.is-on { background: linear-gradient(95deg, #E8CE8A, #C9A24B); border-color: transparent; color: #1A1305; box-shadow: 0 8px 20px -10px rgba(201, 162, 75, .7); } .shopcount { flex: none; font-size: .82rem; color: var(--t-l-mut); } .shopcount b { color: var(--t-l); font-weight: 700; } .shopgrid { padding-block: clamp(2.4rem, 5vw, 4rem); } /* slim trust strip (shop page) */ .trustrow { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line-dd); border-radius: var(--r); overflow: hidden; } .trustitem { display: flex; align-items: center; gap: .8rem; padding: 1.5rem 1.5rem; border-right: 1px solid var(--line-dd); } .trustitem:last-child { border-right: 0; } .trustitem .icon { color: var(--g-hi); font-size: 1.6rem; flex: none; } .trustitem b { display: block; font-weight: 700; font-size: .92rem; color: #fff; } .trustitem span { display: block; font-size: .76rem; color: var(--t-d-mut); margin-top: .12rem; } @media (max-width: 960px) { .trustrow { grid-template-columns: 1fr 1fr; } .trustitem:nth-child(2) { border-right: 0; } .trustitem:nth-child(-n+2) { border-bottom: 1px solid var(--line-dd); } } @media (max-width: 620px) { .hero__ship { gap: .8rem; } .viewall { font-size: .72rem; } .shoptools { top: 64px; } .shoptools__in { gap: .6rem; } .fpill { padding: .48rem .8rem; font-size: .68rem; } .shopcount { width: 100%; } .trustitem { padding: 1.2rem 1.1rem; } .trustitem .icon { font-size: 1.35rem; } .trustitem b { font-size: .84rem; } .trustitem span { font-size: .7rem; } } /* ======================================================================= v9 — product detail page (PDP): gallery + buy box + sticky mobile bar ======================================================================= */ .pdp-sec { padding-top: clamp(1.4rem, 3vw, 2.2rem); } /* breadcrumb on the light PDP */ .section--light .crumb { color: var(--t-l-mut); margin-bottom: 1.6rem; } .section--light .crumb a:hover { color: var(--g-dk); } .section--light .crumb .sep { color: var(--g); } .pdp { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start; } .pdp__gallery { position: sticky; top: 96px; } /* gallery: blank light placeholders (real photos come from WooCommerce) */ .pdp__main { position: relative; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: radial-gradient(circle at 50% 36%, #fff, #EFEBE0 76%); box-shadow: 0 18px 48px -28px rgba(20, 18, 10, .4); display: grid; place-items: center; } .pdp__main img { width: 100%; height: 100%; object-fit: cover; } .pdp__tag { position: absolute; top: 1rem; left: 1rem; font-weight: 700; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--g-dk); border: 1px solid var(--g-hi); background: #FBF4DF; padding: .3rem .6rem; border-radius: 3px; } .pdp__ph { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--t-l-mut); } .pdp__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin-top: .7rem; } .pdp__thumb { aspect-ratio: 1; border-radius: 9px; overflow: hidden; border: 1px solid var(--line-l); background: radial-gradient(circle at 50% 40%, #fff, #EFEBE0 78%); cursor: pointer; padding: 0; transition: border-color .2s, transform .2s var(--ease); } .pdp__thumb:hover { transform: translateY(-2px); border-color: var(--g); } .pdp__thumb.is-on { border-color: var(--g); box-shadow: 0 0 0 1px var(--g) inset; } /* info column */ .pdp__series { font-weight: 600; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--g-dk); margin-bottom: .5rem; } .pdp__title { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 700; color: var(--t-l); line-height: 1.12; margin-bottom: .7rem; } .pdp__rate { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; } .pdp__rate .stars { margin: 0; } .pdp__rate a { font-size: .82rem; color: var(--t-l-mut); border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; } .pdp__rate a:hover { color: var(--g-dk); border-bottom-color: var(--g); } .pdp__price { display: flex; align-items: baseline; gap: .7rem; margin-bottom: 1.1rem; } .pdp__price .price { font-size: 2rem; } .pdp__price .pdp__gst { font-size: .8rem; color: var(--t-l-mut); font-weight: 600; } .pdp__desc { color: var(--t-l-mut); margin: 0 0 1.2rem; max-width: 34rem; } .pdp__notes { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; } .pdp__notes span { font-weight: 600; font-size: .72rem; letter-spacing: .04em; padding: .42rem .85rem; border-radius: 999px; border: 1px solid var(--line-l); background: #fff; color: var(--t-l); } /* buy box */ .pdp__buy { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1.5rem; } .pdp__cartrow { display: flex; gap: .8rem; } .qty--lg { border-radius: 10px; } .qty--lg .qty__btn { width: 44px; height: 52px; font-size: 1.2rem; } .qty--lg .qty__n { min-width: 42px; font-size: 1rem; } .btn-add--lg, .btn-buy--lg { padding: .98rem 1rem; font-size: .8rem; border-radius: 10px; } .btn-add--lg { flex: 1; } .btn-buy--lg { width: 100%; } /* mini trust row */ .pdp__trust { list-style: none; display: flex; flex-wrap: wrap; gap: 1.2rem; padding: 0; margin: 0 0 1.6rem; } .pdp__trust li { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 600; color: var(--t-l); } .pdp__trust .icon { color: var(--g-dk); font-size: 1.1rem; } /* at-a-glance spec list */ .pdp__meta { border-top: 1px solid var(--line-l); } .pdp__meta dl { display: grid; grid-template-columns: max-content 1fr; margin: 0; } .pdp__meta dt { font-weight: 700; font-size: .82rem; color: var(--t-l); padding: .72rem 1.4rem .72rem 0; border-bottom: 1px solid var(--line-l); } .pdp__meta dd { font-size: .82rem; color: var(--t-l-mut); padding: .72rem 0; margin: 0; border-bottom: 1px solid var(--line-l); text-align: right; } .pdp__warn { font-size: .78rem; color: var(--g-dk); margin: 1.2rem 0 0; } .pdp__acc { max-width: none; margin: 1.4rem 0 0; } /* sticky mobile add-to-cart bar (hidden on desktop) */ .pdp__sticky { display: none; } @media (max-width: 760px) { .pdp { grid-template-columns: 1fr; } .pdp__gallery { position: static; } .pdp__sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line-l); box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, .4); padding: .65rem 0; } .pdp__sticky-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .pdp__sticky-name { display: block; font-weight: 700; font-size: .78rem; color: var(--t-l); } .pdp__sticky .price { font-size: 1.1rem; } .pdp__sticky .btn-add { flex: none; padding: .82rem 1.7rem; border-radius: 10px; } body.has-sticky-buy { padding-bottom: 78px; } } /* ======================================================================= v10 — PDP real content: live bulk pricing, specs, review system ======================================================================= */ .pdp__rate { flex-wrap: wrap; } .pdp__sku { font-size: .72rem; letter-spacing: .04em; color: var(--t-l-mut); padding-left: .65rem; border-left: 1px solid var(--line-l); } /* price + savings */ .pdp__price { margin-bottom: .4rem; } .pdp__was { font-size: 1rem; font-weight: 600; } .pdp__was s { color: var(--t-l-mut); } .pdp__saveline { font-size: .86rem; font-weight: 700; color: var(--g-dk); margin: 0 0 1.2rem; } /* bulk pricing table — the "buy more, save more" highlight */ .bulk { border: 1px solid var(--line-l); border-radius: 12px; overflow: hidden; margin: 0 0 1.5rem; background: #fff; } .bulk__title { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .8rem; letter-spacing: .02em; color: var(--t-l); padding: .8rem 1rem; background: linear-gradient(100deg, rgba(201, 162, 75, .16), rgba(201, 162, 75, .04)); border-bottom: 1px solid var(--line-l); } .bulk__title .icon { color: var(--g-dk); font-size: 1.1rem; } .bulk__row { display: grid; grid-template-columns: 1fr auto 1.4fr; align-items: center; gap: .8rem; padding: .68rem 1rem; font-size: .86rem; border-top: 1px solid var(--line-l); transition: background .2s; } .bulk__row:first-child { border-top: 0; } .bulk__q { font-weight: 600; color: var(--t-l); } .bulk__u { font-weight: 700; color: var(--t-l); } .bulk__s { text-align: right; font-weight: 700; font-size: .76rem; letter-spacing: .02em; color: var(--g-dk); } .bulk__row:first-child .bulk__s { color: var(--t-l-mut); font-weight: 600; } .bulk__row.is-on { background: linear-gradient(100deg, rgba(201, 162, 75, .18), rgba(201, 162, 75, .05)); box-shadow: inset 3px 0 0 var(--g); } .bulk__row.is-on .bulk__u { color: var(--g-dk); } /* Add-to-Cart total + free-shipping hint */ .btn-add__total { font-weight: 700; margin-left: .15rem; } .pdp__ship { display: flex; align-items: center; gap: .5rem; margin: .15rem 0 0; font-size: .82rem; font-weight: 600; color: var(--t-l-mut); } .pdp__ship .icon { color: var(--g-dk); font-size: 1.2rem; flex: none; } .pdp__ship.is-free { color: var(--g-dk); } /* specs with leading icons */ .pdp__metah { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--g-dk); margin: 1.6rem 0 .2rem; } .pdp__meta dt { display: flex; align-items: center; gap: .55rem; } .pdp__meta dt .icon { color: var(--g-dk); font-size: 1.05rem; flex: none; } /* ---- reviews: compact summary + list + write form -------------------- */ .rvsum { display: grid; grid-template-columns: minmax(150px, .7fr) 1.4fr; gap: clamp(1.4rem, 4vw, 2.6rem); align-items: center; background: var(--card); border: 1px solid var(--line-l); border-radius: var(--r); padding: clamp(1.4rem, 3vw, 2rem); margin: 2rem 0 1.8rem; max-width: 740px; } .rvsum__score { text-align: center; border-right: 1px solid var(--line-l); padding-right: clamp(1rem, 3vw, 2rem); } .rvsum__big { font-weight: 700; font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: 1; color: var(--t-l); letter-spacing: -.02em; } .rvsum__big span { font-size: .3em; color: var(--t-l-mut); font-weight: 600; } .rvsum__score .stars--lg { margin: .5rem auto .4rem; } .rvsum__based { font-size: .78rem; color: var(--t-l-mut); } .rvsum__bars { display: flex; flex-direction: column; gap: .45rem; } .rv-list { margin-bottom: 2.4rem; } .t__title { font-weight: 700; font-size: .98rem; color: var(--t-l); margin: 0 0 .4rem; } /* pending (held-for-approval) review — only the author sees this in the real build */ .t--pending { border-style: dashed; background: #FCFBF7; } .t__pending { display: inline-flex; align-items: center; gap: .32rem; font-weight: 700; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--g-dk); background: #FBF4DF; border: 1px solid var(--g-hi); padding: .22rem .5rem; border-radius: 3px; } .rvwrite { max-width: 740px; background: var(--card); border: 1px solid var(--line-l); border-radius: var(--r); padding: clamp(1.4rem, 3vw, 2rem); } .rvwrite h3 { font-size: 1.2rem; font-weight: 700; color: var(--t-l); margin: 0 0 .8rem; } .rvwrite__gate { display: flex; align-items: flex-start; gap: .55rem; font-size: .84rem; line-height: 1.5; color: var(--t-l-mut); background: var(--paper-2); border-radius: 10px; padding: .8rem 1rem; margin: 0 0 1.4rem; } .rvwrite__gate .icon { color: var(--g-dk); font-size: 1.15rem; flex: none; margin-top: .12rem; } .rvwrite__gate strong { color: var(--t-l); } .rvform__row { margin-bottom: 1rem; } .rvform__row > label { display: block; font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--t-l); margin-bottom: .45rem; } .rvform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } .rvform input, .rvform textarea { width: 100%; background: #fff; border: 1px solid var(--line-l); border-radius: 9px; padding: .75rem .9rem; font: 400 .92rem var(--f); color: var(--t-l); } .rvform input:focus, .rvform textarea:focus { outline: 0; border-color: var(--g); box-shadow: 0 0 0 3px rgba(201, 162, 75, .15); } .rvform textarea { resize: vertical; } .rvform__foot { display: flex; align-items: center; gap: 1rem 1.2rem; flex-wrap: wrap; margin-top: .2rem; } .rvform__note { font-size: .78rem; color: var(--t-l-mut); } /* interactive star rating picker */ .starpick { display: inline-flex; gap: .3rem; } .starpick__s { background: 0; border: 0; padding: .12rem; cursor: pointer; line-height: 0; } .starpick__s svg { width: 28px; height: 28px; fill: #DAD3C3; transition: fill .15s, transform .15s var(--ease); } .starpick__s:hover svg { transform: scale(1.12); } .starpick__s.on svg { fill: var(--g); } .starpick__s.hot svg { fill: var(--g-hi); } @media (max-width: 620px) { .rvsum { grid-template-columns: 1fr; } .rvsum__score { border-right: 0; border-bottom: 1px solid var(--line-l); padding: 0 0 1.2rem; } .rvform__grid { grid-template-columns: 1fr; } } /* ======================================================================= v11 — slide-out cart drawer + fly-to-cart animation ======================================================================= */ .cart { background: 0; border: 0; cursor: pointer; padding: 0; } /* fly-to-cart dot */ .flydot { position: fixed; z-index: 300; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F6E6B6, #C9A24B 72%); box-shadow: 0 6px 18px -4px rgba(201, 162, 75, .85); pointer-events: none; animation: flycart .7s cubic-bezier(.5, 0, .35, 1) forwards; } @keyframes flycart { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 70% { opacity: .95; } 100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: .15; } } .cart__n.pop { animation: cartpop .45s var(--ease); } @keyframes cartpop { 0% { transform: scale(1); } 40% { transform: scale(1.55); } 100% { transform: scale(1); } } .cartwrap { position: fixed; inset: 0; z-index: 120; } .cartoverlay { position: absolute; inset: 0; background: rgba(9, 9, 10, .55); opacity: 0; transition: opacity .42s var(--ease); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .cartwrap.is-open .cartoverlay { opacity: 1; } .cartdrawer { position: absolute; top: 0; right: 0; height: 100%; width: min(410px, 92vw); display: flex; flex-direction: column; background: var(--paper); color: var(--t-l); box-shadow: -24px 0 60px -24px rgba(0, 0, 0, .6); transform: translateX(100%); transition: transform .42s var(--ease); } .cartwrap.is-open .cartdrawer { transform: none; } .cartdrawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.3rem; border-bottom: 1px solid var(--line-l); } .cartdrawer__head h3 { font-size: 1.05rem; font-weight: 700; color: var(--t-l); display: flex; align-items: center; gap: .55rem; } .cartdrawer__n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: linear-gradient(95deg, #E8CE8A, #C9A24B); color: #1A1305; font-size: .72rem; font-weight: 700; display: inline-grid; place-items: center; } .cartdrawer__x { background: 0; border: 0; color: var(--t-l-mut); cursor: pointer; padding: .2rem; display: inline-flex; font-size: 1.3rem; transition: color .2s; } .cartdrawer__x:hover { color: var(--t-l); } .cartdrawer__body { flex: 1; overflow-y: auto; padding: .4rem 1.3rem; } .cartempty { text-align: center; color: var(--t-l-mut); padding: 3rem 1rem; } .cartempty .icon { font-size: 2.4rem; color: var(--line-l); } .cartempty p { margin: .8rem 0 1.4rem; } .citem { display: grid; grid-template-columns: 56px 1fr auto; gap: .85rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid var(--line-l); } .citem__thumb { width: 56px; height: 56px; border-radius: 9px; background: radial-gradient(circle at 50% 38%, #fff, #EFEBE0 76%); border: 1px solid var(--line-l); } .citem__name { font-weight: 700; font-size: .82rem; color: var(--t-l); line-height: 1.3; } .citem__unit { font-size: .74rem; color: var(--t-l-mut); margin: .15rem 0 .55rem; } .citem__unit s { opacity: .65; margin-left: .3rem; } .citem__row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; } .qty--sm { border: 1px solid var(--line-l); border-radius: 7px; } .qty--sm .qty__btn { width: 26px; height: 28px; font-size: .9rem; } .qty--sm .qty__n { min-width: 24px; font-size: .82rem; } .citem__line { font-weight: 700; font-size: .9rem; color: var(--t-l); } .citem__rm { grid-column: 3; grid-row: 1; background: 0; border: 0; color: var(--t-l-mut); font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0 .1rem; transition: color .2s; } .citem__rm:hover { color: #b3402f; } .cartdrawer__foot { border-top: 1px solid var(--line-l); padding: 1.1rem 1.3rem 1.3rem; background: var(--card); } .cartdrawer__ship { display: flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 600; color: var(--t-l-mut); margin: 0 0 .8rem; min-height: 1.1em; } .cartdrawer__ship .icon { font-size: 1.05rem; flex: none; } .cartdrawer__ship.is-free { color: var(--g-dk); } .cartdrawer__sub { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; } .cartdrawer__sub span { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--t-l-mut); } .cartdrawer__sub b { font-size: 1.4rem; font-weight: 700; color: var(--t-l); } .cartdrawer__checkout { width: 100%; justify-content: center; } .cartdrawer__cont { display: block; width: 100%; text-align: center; background: 0; border: 0; color: var(--t-l-mut); font: 600 .8rem var(--f); padding: .9rem 0 0; cursor: pointer; transition: color .2s; } .cartdrawer__cont:hover { color: var(--t-l); } body.cart-open { overflow: hidden; } /* ======================================================================= v12 — WooCommerce integration: map native Woo markup to the PDP design (real add-to-cart form, quantity input, gallery images, native reviews). Targeted !important only where WooCommerce core CSS would otherwise win. ======================================================================= */ /* gallery images dropped into the blank placeholders */ .pdp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .pdp__main img { display: block; } /* short / long description may arrive wrapped in

*/ .pdp__desc p:last-child { margin-bottom: 0; } /* ---- buy box: the real woocommerce_template_single_add_to_cart form ---- */ .pdp__buy form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: .8rem; margin: 0; } .pdp__buy form.cart > .quantity { display: inline-flex; align-items: center; margin: 0; flex: none; } /* the .quantity box gets .qty.qty--lg added by single-product.js */ .pdp__buy .quantity.qty { border: 1px solid var(--line-l); border-radius: 10px; overflow: hidden; background: #fff; } .pdp__buy .quantity .qty__input { width: 52px; height: 52px; min-width: 42px; text-align: center; padding: 0; margin: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0; font: 700 1rem/1 var(--f); color: var(--t-l); -moz-appearance: textfield; appearance: textfield; } .pdp__buy .quantity .qty__input:focus { outline: 0; } .pdp__buy .quantity .qty__input::-webkit-outer-spin-button, .pdp__buy .quantity .qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* hide the screen-reader "Quantity" label if a plugin un-hides it */ .pdp__buy .quantity > label { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Add to Cart button -> .btn-add--lg look (beats .woocommerce button.button.alt) */ .pdp__buy .single_add_to_cart_button { flex: 1; min-width: 150px; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; padding: .98rem 1rem !important; margin: 0 !important; border: 0 !important; border-radius: 10px !important; font: 700 .8rem/1 var(--f) !important; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; cursor: pointer; background: #fff !important; color: var(--g-dk) !important; box-shadow: 0 0 0 1px var(--g) inset !important; transition: transform .25s var(--ease), box-shadow .3s var(--ease), background .25s, color .2s; } .pdp__buy .single_add_to_cart_button:hover { background: var(--g-hi) !important; color: #1A1305 !important; transform: translateY(-2px); } .pdp__buy .single_add_to_cart_button.loading { opacity: .7; } .pdp__buy .btn-add__total { font-weight: 700; margin-left: .15rem; } /* out-of-stock / unpurchasable fallbacks */ .pdp__buy .stock.out-of-stock { font-weight: 700; color: var(--g-dk); } .pdp__soldout { font-weight: 700; color: var(--g-dk); } /* WooCommerce notices on the light product page */ .pdp-sec .woocommerce-message, .pdp-sec .woocommerce-info, .pdp-sec .woocommerce-error { list-style: none; background: #fff; color: var(--t-l); border-top: 3px solid var(--g); border-radius: 10px; box-shadow: 0 10px 30px -22px rgba(20, 18, 10, .5); padding: 1rem 1.2rem; margin: 0 0 1.4rem; } .pdp-sec .woocommerce-error { border-top-color: #C0392B; } .pdp-sec .woocommerce-message .button, .pdp-sec .woocommerce-info .button { float: right; background: 0; border: 0; color: var(--g-dk); font-weight: 700; text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; padding: 0; box-shadow: none; } /* ---- native reviews skinned to .t / .rvsum / .rvwrite ------------------ */ .rv-list.commentlist { list-style: none; margin: 0 0 2.4rem; padding: 0; } .rv-list .t { margin: 0; } .rv-list .t .t__txt p:last-child { margin-bottom: 0; } .rv-list .t__pending { margin: 0 0 .8rem; } .rv-pagination { margin-bottom: 2.4rem; } .rv-pagination ul { display: inline-flex; gap: .4rem; list-style: none; padding: 0; margin: 0; } .rv-pagination a, .rv-pagination span { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 .5rem; border-radius: 8px; border: 1px solid var(--line-l); color: var(--t-l); font-weight: 600; font-size: .82rem; } .rv-pagination .current { background: linear-gradient(95deg, #E8CE8A, #C9A24B); border-color: transparent; color: #1A1305; } /* the verified-buyer / no-reviews notices */ .rvwrite__none { color: var(--t-l-mut); margin: 0 0 1.8rem; } .rvwrite__locked { max-width: 740px; } /* WC comment_form -> .rvform look */ .rvwrite .comment-form { display: block; margin: 0; } .rvwrite .comment-form p { margin: 0 0 1rem; } .rvwrite .comment-form label { display: block; font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--t-l); margin-bottom: .45rem; } .rvwrite .comment-form input[type="text"], .rvwrite .comment-form input[type="email"], .rvwrite .comment-form input[type="url"], .rvwrite .comment-form textarea { width: 100%; background: #fff; border: 1px solid var(--line-l); border-radius: 9px; padding: .75rem .9rem; font: 400 .92rem var(--f); color: var(--t-l); box-shadow: none; } .rvwrite .comment-form input:focus, .rvwrite .comment-form textarea:focus { outline: 0; border-color: var(--g); box-shadow: 0 0 0 3px rgba(201, 162, 75, .15); } .rvwrite .comment-form textarea { resize: vertical; min-height: 120px; } .rvwrite .comment-form-author, .rvwrite .comment-form-email { display: inline-block; width: calc(50% - .5rem); vertical-align: top; } .rvwrite .comment-form-email { margin-left: .9rem; } .rvwrite .comment-form-cookies-consent { font-size: .8rem; color: var(--t-l-mut); } .rvwrite .comment-form-cookies-consent label { display: inline; text-transform: none; letter-spacing: 0; font-weight: 500; } /* WC star-rating widget (the select is enhanced by wc-single-product.js) */ .rvwrite .comment-form-rating label { display: block; } .rvwrite p.stars { display: inline-flex; gap: .15rem; margin: 0; } .rvwrite p.stars a { color: #DAD3C3; } .rvwrite p.stars a:hover, .rvwrite p.stars a.active, .rvwrite p.stars.selected a.active, .rvwrite p.stars:hover a { color: var(--g); } .rvwrite p.stars.selected a.active ~ a { color: #DAD3C3; } /* submit button stays champagne gold even against WC core CSS */ .rvwrite .form-submit { margin: .2rem 0 0; } .rvwrite .form-submit input[type="submit"], .rvwrite .rvform__submit { color: #1A1305 !important; background: linear-gradient(95deg, #E8CE8A, #C9A24B 52%, #E2C173) !important; border: 0 !important; border-radius: 3px !important; padding: .95rem 1.7rem !important; font: 600 .8rem/1 var(--f) !important; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; box-shadow: 0 0 0 1px rgba(246, 230, 182, .35) inset !important; transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .rvwrite .form-submit input[type="submit"]:hover, .rvwrite .rvform__submit:hover { transform: translateY(-3px); box-shadow: 0 16px 38px -14px rgba(201, 162, 75, .85), 0 0 0 1px rgba(246, 230, 182, .55) inset !important; } @media (max-width: 600px) { .rvwrite .comment-form-author, .rvwrite .comment-form-email { display: block; width: 100%; margin-left: 0; } } /* ======================================================================= v12 — PDP buy box: order total beside the counter (struck pre-discount total) + a two-line discount / free-shipping progress hint; header logo kept inside the bar against third-party (Elementor/Woo) CSS bleed. ======================================================================= */ .pdp__cartrow { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem .9rem; } .pdp__cartrow .qty { flex: none; } .pdp__buy form.cart { align-items: center; } /* "Total" box: pushed to the right of the qty row, total + struck original */ .pdp__totalbox { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; line-height: 1.05; flex: none; } .pdp__totalbox-l { font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--t-l-mut); } .pdp__totalwrap { display: flex; align-items: baseline; gap: .5rem; } .pdp__total { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; color: var(--t-l); } .pdp__wastotal { font-size: .92rem; font-weight: 600; color: var(--t-l-mut); } /* Add to Cart drops to its own full-width row below the qty + total */ .pdp__cartrow .btn-add--lg { flex: 1 0 100%; } .pdp__buy form.cart .single_add_to_cart_button { flex: 1 0 100% !important; } /* two-line progress hint */ .pdp__ship { display: flex; flex-direction: column; align-items: flex-start; gap: .42rem; margin-top: .55rem; } .pdp__ship-line { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .82rem; font-weight: 600; color: var(--t-l-mut); } .pdp__ship-line .icon { color: var(--g-dk); font-size: 1.15rem; flex: none; } .pdp__ship-line.is-on { color: var(--g-dk); font-weight: 700; } /* header wordmark: smaller + hard-capped so plugin CSS can never push it out of the bar */ .header .brand--logo .brand__logo { height: 30px; max-height: 30px; width: auto; } /* All-Flavours archive pagination */ .shoppager { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: clamp(2rem, 4vw, 3rem); } .shoppager__n { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 .75rem; border-radius: 10px; border: 1px solid var(--line-l); background: #fff; font-weight: 700; font-size: .85rem; color: var(--t-l); text-decoration: none; transition: border-color .2s, color .2s, background .2s; } a.shoppager__n:hover { border-color: var(--g); color: var(--g-dk); } .shoppager__n.current { background: var(--g-dk); border-color: var(--g-dk); color: #fff; } .shoppager__n.dots { border: 0; background: 0; min-width: 0; } /* ========================================================================= CART PAGE (woocommerce/cart-shell.php + cart/* overrides) Two-column layout: item list | sticky order summary. Defensive specificity so it beats WooCommerce's default cart styles (loaded site-wide, and the [woocommerce_cart] shortcode wraps everything in .woocommerce). ========================================================================= */ .cart-sec .woocommerce { display: block; } .cart-head { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); } .cart-title { font-size: clamp(1.9rem, 4.5vw, 2.7rem); font-weight: 700; color: var(--t-l); margin: 0 0 .5rem; } .cart-sub { color: var(--t-l-mut); font-size: .95rem; margin: 0; max-width: 52ch; } /* layout */ .cart-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start; } .cart-grid .woocommerce-cart-form { margin: 0; } /* item list */ .cartlist { background: var(--card); border: 1px solid var(--line-l); border-radius: var(--r); padding: .2rem 1.4rem; box-shadow: 0 18px 50px -38px rgba(20, 18, 10, .5); } .crow { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto auto 26px; grid-template-areas: "media info qty line rm"; align-items: center; gap: 1.1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line-l); position: relative; } .crow:last-child { border-bottom: 0; } .crow__media { grid-area: media; } .crow__thumb { display: block; border-radius: 11px; overflow: hidden; border: 1px solid var(--line-l); background: radial-gradient(circle at 50% 36%, #fff, #EFEBE0 78%); } .crow__thumb img { width: 78px; height: 78px; object-fit: contain; display: block; mix-blend-mode: multiply; } .crow__info { grid-area: info; min-width: 0; } .crow__name { display: block; font-weight: 700; font-size: .95rem; line-height: 1.32; color: var(--t-l); transition: color .2s; } a.crow__name:hover { color: var(--g-dk); } .crow__unit { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; font-size: .8rem; } .crow__now { font-weight: 700; color: var(--g-dk); } .crow__was { color: var(--t-l-mut); opacity: .7; } .crow__save { font-weight: 700; font-size: .66rem; letter-spacing: .04em; color: var(--g-dk); background: #FBF4DF; border: 1px solid var(--g-hi); border-radius: 3px; padding: .08rem .34rem; } .crow__per { color: var(--t-l-mut); } .crow__qty { grid-area: qty; } .crow__line { grid-area: line; font-weight: 700; font-size: 1rem; color: var(--t-l); text-align: right; white-space: nowrap; } .crow__line .amount { font-weight: 700; } .crow__rm { grid-area: rm; justify-self: end; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: 0; border: 0; color: var(--t-l-mut); font-size: 1.35rem; line-height: 1; text-decoration: none; cursor: pointer; transition: color .2s, background .2s; } .crow__rm:hover { color: #b3402f; background: #F4ECE9; } /* quantity stepper (cart.js adds .qty.qty--sm + the +/- buttons; styled to work pre-JS too) */ .crow__qty .quantity { display: inline-flex; align-items: center; margin: 0; border: 1px solid var(--line-l); border-radius: 8px; overflow: hidden; background: #fff; } .crow__qty .quantity > label { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .crow__qty .quantity input.qty { width: 44px; height: 38px; min-width: 38px; text-align: center; padding: 0; margin: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0; font: 700 .9rem/1 var(--f); color: var(--t-l); -moz-appearance: textfield; appearance: textfield; } .crow__qty .quantity input.qty:focus { outline: 0; } .crow__qty .quantity input.qty::-webkit-outer-spin-button, .crow__qty .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .crow__qty .qty__btn { width: 32px; height: 38px; } .crow__qty .qty__btn .icon { font-size: .72rem; stroke-width: 2.4; } .crow__qone { display: inline-block; min-width: 38px; text-align: center; font-weight: 700; color: var(--t-l); } .woocommerce-cart-form.is-busy { opacity: .55; transition: opacity .2s; } /* coupon + update row */ .cartform__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.3rem; } .cartform__coupon { display: flex; gap: .5rem; flex: 1 1 240px; min-width: 220px; max-width: 380px; } .cart-sec #coupon_code { flex: 1; min-width: 0; height: 44px; padding: 0 .9rem; border: 1px solid var(--line-l); border-radius: 9px; background: #fff; font: 500 .85rem var(--f); color: var(--t-l); } .cart-sec #coupon_code:focus { outline: 0; border-color: var(--g); box-shadow: 0 0 0 3px rgba(201, 162, 75, .14); } .cart-sec .cartform__applycoupon, .cart-sec .cartform__update { display: inline-flex; align-items: center; gap: .4rem; flex: none; height: 44px; padding: 0 1.1rem !important; margin: 0 !important; border-radius: 9px !important; font: 700 .72rem/1 var(--f) !important; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; background: transparent !important; color: var(--g-dk) !important; box-shadow: 0 0 0 1px var(--line-l) inset !important; transition: color .2s, box-shadow .25s, background .2s, transform .25s var(--ease); } .cart-sec .cartform__applycoupon:hover, .cart-sec .cartform__update:hover { color: var(--t-l) !important; box-shadow: 0 0 0 1px var(--g) inset !important; transform: translateY(-1px); } .cart-sec .cartform__update .icon { font-size: .9rem; stroke-width: 2.2; } /* ---- order summary (cart-totals.php) ---------------------------------- */ .cart-sec .cart-collaterals { width: auto !important; float: none !important; margin: 0; } .cart-sec .cart_totals, .cart-sec .csum { position: sticky; top: 96px; width: 100% !important; float: none !important; margin: 0; background: var(--card); border: 1px solid var(--line-l); border-radius: var(--r); padding: clamp(1.3rem, 2.4vw, 1.7rem); box-shadow: 0 22px 60px -40px rgba(20, 18, 10, .55); } .csum__h { font-size: 1.05rem; font-weight: 700; color: var(--t-l); margin: 0 0 1.1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line-l); } /* free-shipping progress */ .csum__ship { margin-bottom: 1.2rem; } .csum__shipmsg { display: flex; align-items: center; gap: .45rem; margin: 0 0 .55rem; font-size: .78rem; font-weight: 600; color: var(--t-l-mut); } .csum__shipmsg .icon { font-size: 1.05rem; flex: none; color: var(--g-dk); } .csum__ship.is-free .csum__shipmsg { color: var(--g-dk); } .csum__track { height: 7px; background: var(--paper-2); border-radius: 999px; overflow: hidden; } .csum__track span { display: block; height: 100%; background: linear-gradient(90deg, var(--g-hi), var(--g)); border-radius: 999px; transition: width .6s var(--ease); } /* totals table (plain table — shop_table class dropped so WC borders don't apply) */ .csum__table { width: 100%; border-collapse: collapse; margin: 0 0 1.2rem; } .csum__table th, .csum__table td { padding: .52rem 0; border: 0; font-size: .87rem; vertical-align: top; background: 0; } .csum__table th { text-align: left; font-weight: 600; color: var(--t-l-mut); } .csum__table td { text-align: right; font-weight: 700; color: var(--t-l); } .csum__table .order-total th, .csum__table .order-total td { padding-top: 1rem; border-top: 1px solid var(--line-l); font-size: 1.18rem; color: var(--t-l); } .csum__table .order-total td .amount { color: var(--g-dk); } .csum__table .cart-discount th, .csum__table .cart-discount td { color: #2f8f5b; } .csum__table ul#shipping_method { list-style: none; margin: 0; padding: 0; text-align: right; font-weight: 600; } .csum__table ul#shipping_method li { margin: .15rem 0; } .csum__table .woocommerce-shipping-destination { font-size: .74rem; font-weight: 500; color: var(--t-l-mut); margin: .35rem 0 0; } .csum__table a { color: var(--g-dk); text-decoration: underline; } /* proceed to checkout (WC outputs a.checkout-button via the hook) */ .cart-sec .wc-proceed-to-checkout { padding: 0; margin: 0; } .cart-sec .wc-proceed-to-checkout a.checkout-button { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; padding: 1rem 1.2rem !important; margin: 0 !important; border: 0 !important; border-radius: 11px !important; font: 700 .82rem/1 var(--f) !important; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: #1A1305 !important; background: linear-gradient(95deg, #E8CE8A, #C9A24B 52%, #E2C173) !important; box-shadow: 0 0 0 1px rgba(246, 230, 182, .4) inset !important; cursor: pointer; transition: transform .3s var(--ease), box-shadow .35s var(--ease); } .cart-sec .wc-proceed-to-checkout a.checkout-button::after { content: "\2192"; font-weight: 700; } .cart-sec .wc-proceed-to-checkout a.checkout-button:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -16px rgba(201, 162, 75, .85), 0 0 0 1px rgba(246, 230, 182, .55) inset !important; } .csum__trust { list-style: none; margin: 1.1rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--line-l); display: grid; gap: .55rem; } .csum__trust li { display: flex; align-items: center; gap: .55rem; font-size: .78rem; font-weight: 600; color: var(--t-l-mut); } .csum__trust .icon { font-size: 1rem; color: var(--g-dk); flex: none; } /* ---- WooCommerce notices on the cart (e.g. "Cart updated") ------------- */ .cart-sec .woocommerce-message, .cart-sec .woocommerce-info, .cart-sec .woocommerce-error { list-style: none; background: #fff; color: var(--t-l); border-top: 3px solid var(--g); border-radius: 10px; box-shadow: 0 10px 30px -22px rgba(20, 18, 10, .5); padding: 1rem 1.2rem; margin: 0 0 1.4rem; } .cart-sec .woocommerce-error { border-top-color: #C0392B; } .cart-sec .woocommerce-message .button, .cart-sec .woocommerce-info .button, .cart-sec .woocommerce-error .button { float: right; background: 0 !important; border: 0 !important; box-shadow: none !important; color: var(--g-dk) !important; font-weight: 700; text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; padding: 0 !important; } /* ---- empty cart (cart-empty.php) -------------------------------------- */ .cartempty { text-align: center; color: var(--t-l-mut); padding: clamp(2.5rem, 7vw, 4.5rem) 1rem; max-width: 520px; margin-inline: auto; } .cartempty__icon { display: inline-grid; place-items: center; width: 74px; height: 74px; border-radius: 999px; background: var(--paper-2); color: var(--g-dk); margin-bottom: 1.3rem; } .cartempty__icon .icon { font-size: 1.85rem; color: inherit; } .cartempty__h { font-size: clamp(1.4rem, 3.5vw, 1.8rem); font-weight: 700; color: var(--t-l); margin: 0 0 .6rem; } .cartempty__p { color: var(--t-l-mut); margin: 0 auto 1.7rem; max-width: 42ch; } .cartempty .return-to-shop { margin: 0; } /* ---- "You may also like" suggestion row ------------------------------- */ .cart-sug { padding-top: 0; } /* ---- responsive ------------------------------------------------------- */ @media (max-width: 920px) { .cart-grid { grid-template-columns: 1fr; } .cart-sec .cart_totals, .cart-sec .csum { position: static; top: auto; } } @media (max-width: 560px) { .cartlist { padding: .2rem 1rem; } .crow { grid-template-columns: 60px minmax(0, 1fr) auto; grid-template-areas: "media info rm" "media qty line"; gap: .5rem .9rem; row-gap: .8rem; } .crow__thumb img { width: 60px; height: 60px; } .crow__qty { margin-top: .2rem; } .crow__line { align-self: center; } .cartform__foot { flex-direction: column; align-items: stretch; } .cartform__coupon { max-width: none; } .cartform__update { justify-content: center; } } /* ========================================================================= v13 — CHECKOUT (woocommerce/checkout-shell.php + checkout/* overrides) Distraction-free classic checkout: slim dark header, 1 Contact -> 2 Address -> 3 Payment in the left column, sticky order summary right (top accordion on mobile). Defensive specificity vs WooCommerce's site-wide defaults (the shortcode wraps everything in .woocommerce). ========================================================================= */ body.checkout-page { background: var(--paper); color: var(--t-l); } .checkout-page .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* slim secure header */ .ckhead { background: var(--ink); border-bottom: 1px solid var(--line-dd); } .ckhead__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 64px; } .ckhead .brand--logo .brand__logo { height: 26px; max-height: 26px; width: auto; } .ckhead__right { display: flex; align-items: center; gap: 1.2rem; } .ckhead__secure { display: inline-flex; align-items: center; gap: .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g-hi); } .ckhead__secure .icon { font-size: 1rem; } .ckhead__back { font-size: .78rem; font-weight: 600; color: var(--t-d-mut); text-decoration: underline; text-underline-offset: 3px; transition: color .2s; } .ckhead__back:hover { color: #fff; } /* compliance footer */ .ckfoot { background: var(--ink); border-top: 1px solid var(--line-dd); padding: 1.5rem 0 1.9rem; text-align: center; } .ckfoot__warn { font-size: .74rem; color: var(--t-d-mut); margin: 0 0 .5rem; } .ckfoot__warn strong { color: var(--g-hi); border: 1px solid var(--g-deep); border-radius: 4px; padding: .08rem .4rem; margin-right: .45rem; font-size: .68rem; letter-spacing: .06em; } .ckfoot__legal { font-size: .7rem; color: var(--t-d-mut); opacity: .75; margin: 0; } /* page heading */ .section.checkout-sec { padding-block: clamp(1.8rem, 3.5vw, 2.8rem) clamp(3rem, 6vw, 4.5rem); } .checkout-sec .woocommerce { display: block; } .ck-head { margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem); } .ck-title { font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 700; color: var(--t-l); margin: 0 0 .5rem; } .ck-sub { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .82rem; font-weight: 600; color: var(--t-l-mut); } .ck-sub .icon { color: var(--g-dk); font-size: 1rem; flex: none; } /* layout */ .ck-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(1.4rem, 3vw, 2.4rem); align-items: start; } .ck-main { min-width: 0; display: flex; flex-direction: column; gap: 1.1rem; } .ck-side { min-width: 0; } .checkout-sec .col2-set { width: auto !important; } .checkout-sec .col2-set .col-1, .checkout-sec .col2-set .col-2 { float: none !important; width: 100% !important; } .checkout-sec .col2-set .col-2:empty { display: none; } .woocommerce-billing-fields { display: flex; flex-direction: column; gap: 1.1rem; } /* cards + step numbers */ .ck-card { background: var(--card); border: 1px solid var(--line-l); border-radius: var(--r); padding: clamp(1.2rem, 2.4vw, 1.6rem); box-shadow: 0 18px 50px -38px rgba(20, 18, 10, .5); } .ck-card__h { display: flex; align-items: center; gap: .6rem; font-size: 1rem; font-weight: 700; color: var(--t-l); margin: 0 0 1.1rem; } .ck-step { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: linear-gradient(125deg, #F6E6B6 0%, #C9A24B 100%); color: #1A1305; font-size: .72rem; font-weight: 700; flex: none; } /* field grid (ids place the rows; everything else spans full width) */ .ck-fields, .checkout-sec .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: repeat(6, 1fr); gap: .9rem .8rem; } .checkout-sec p.form-row { float: none !important; width: auto !important; margin: 0; padding: 0; grid-column: 1 / -1; position: relative; } #billing_first_name_field, #shipping_first_name_field { grid-column: 1 / 4; } #billing_last_name_field, #shipping_last_name_field { grid-column: 4 / 7; } #billing_city_field, #shipping_city_field { grid-column: 1 / 3; } #billing_state_field, #shipping_state_field { grid-column: 3 / 5; } #billing_postcode_field, #shipping_postcode_field { grid-column: 5 / 7; } .checkout-sec .form-row label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t-l-mut); margin: 0 0 .35rem; } .checkout-sec .form-row label .required { color: var(--g-dk); text-decoration: none; } .checkout-sec .form-row label .optional { text-transform: none; letter-spacing: 0; font-weight: 500; opacity: .75; } .checkout-sec .form-row .woocommerce-input-wrapper { display: block; } .checkout-sec .input-text, .checkout-sec select, .checkout-sec textarea { width: 100%; height: 46px; padding: 0 .85rem; margin: 0; border: 1px solid var(--line-l); border-radius: 9px; background-color: #fff; font: 500 .9rem var(--f); color: var(--t-l); box-shadow: none; appearance: none; -webkit-appearance: none; transition: border-color .2s, box-shadow .2s; } .checkout-sec textarea { height: auto; min-height: 96px; padding: .7rem .85rem; } .checkout-sec select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238C6C2C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85rem center; background-size: 12px; padding-right: 2.3rem; cursor: pointer; } .checkout-sec .input-text:focus, .checkout-sec select:focus, .checkout-sec textarea:focus { outline: 0; border-color: var(--g); box-shadow: 0 0 0 3px rgba(201, 162, 75, .14); } .checkout-sec .woocommerce-invalid .input-text, .checkout-sec .woocommerce-invalid select { border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192, 57, 43, .1); } /* address line 2: collapsed behind a text toggle (checkout.js) */ #billing_address_2_field.is-collapsed { display: none; } .ck-addr2-toggle { grid-column: 1 / -1; justify-self: start; background: 0; border: 0; padding: 0; font: 600 .78rem var(--f); color: var(--g-dk); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; transition: color .2s; } .ck-addr2-toggle:hover { color: var(--t-l); } /* shipping toggle + additional fields (dormant until shipping methods exist; both wrappers render empty today — only style/show them when they have content) */ .checkout-sec .woocommerce-shipping-fields:has(h3), .checkout-sec .woocommerce-additional-fields:has(.form-row) { background: var(--card); border: 1px solid var(--line-l); border-radius: var(--r); padding: clamp(1.2rem, 2.4vw, 1.6rem); } .checkout-sec .col-2 .woocommerce-shipping-fields:has(h3) { margin-top: 1.1rem; } .checkout-sec .woocommerce-shipping-fields:not(:has(h3, .form-row)), .checkout-sec .woocommerce-additional-fields:not(:has(.form-row)) { display: none; } .checkout-sec .woocommerce-shipping-fields h3, .checkout-sec .woocommerce-additional-fields h3 { font-size: 1rem; font-weight: 700; color: var(--t-l); margin: 0 0 1rem; } .checkout-sec #ship-to-different-address { margin: 0; } .checkout-sec #ship-to-different-address label { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; font-size: .95rem; text-transform: none; letter-spacing: 0; color: var(--t-l); cursor: pointer; } .checkout-sec #ship-to-different-address input { width: 17px; height: 17px; accent-color: var(--g-dk); margin: 0; } .checkout-sec .shipping_address { padding-top: 1.1rem; } /* ---- payment ----------------------------------------------------------- */ .ck-pay__note { display: flex; align-items: flex-start; gap: .5rem; margin: -.3rem 0 1.05rem; font-size: .78rem; font-weight: 600; color: var(--t-l-mut); } .ck-pay__note .icon { color: var(--g-dk); font-size: 1.05rem; flex: none; margin-top: .1rem; } .checkout-sec #payment { background: transparent !important; border-radius: 0; } /* WC ships #payment-scoped defaults (1,1,1+); match/beat them with .checkout-page + #payment */ .checkout-page #payment ul.payment_methods { list-style: none; margin: 0 0 1.2rem; padding: 0; border: 0; display: flex; flex-direction: column; gap: .7rem; } .checkout-page #payment li.wc_payment_method { position: relative; margin: 0; padding: 0; border: 1px solid var(--line-l); border-radius: 11px; background: #fff; transition: border-color .2s, box-shadow .2s; } .checkout-page #payment li.wc_payment_method:has(> input:checked) { border-color: var(--g); box-shadow: 0 0 0 3px rgba(201, 162, 75, .12); } .checkout-page #payment li.wc_payment_method > input.input-radio { position: absolute; opacity: 0; pointer-events: none; } .checkout-page #payment label.ckpm { display: flex; align-items: center; gap: .65rem; padding: .9rem 1rem; margin: 0 !important; cursor: pointer; font-weight: 700; font-size: .88rem; text-transform: none; letter-spacing: 0; color: var(--t-l); } .ckpm__dot { width: 18px; height: 18px; border-radius: 999px; border: 2px solid var(--line-l); flex: none; display: grid; place-items: center; transition: border-color .2s; } .ckpm__dot::after { content: ""; width: 8px; height: 8px; border-radius: 999px; background: linear-gradient(125deg, #F6E6B6, #C9A24B); opacity: 0; transition: opacity .2s; } .wc_payment_method > input:checked + .ckpm .ckpm__dot { border-color: var(--g); } .wc_payment_method > input:checked + .ckpm .ckpm__dot::after { opacity: 1; } .checkout-page #payment label.ckpm img { max-height: 22px; width: auto; display: inline-block; margin: 0 0 0 .2rem; } .ckpm__sec { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; flex: none; font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--g-dk); background: #FBF4DF; border: 1px solid var(--g-hi); border-radius: 999px; padding: .22rem .55rem; } .ckpm__sec .icon { font-size: .8rem; } .checkout-page #payment div.payment_box { padding: .95rem 1rem 1.05rem; margin: 0 !important; background: var(--paper) !important; border-top: 1px solid var(--line-l); border-radius: 0 0 10px 10px; font-size: .85rem; color: var(--t-l-mut); } .checkout-page #payment div.payment_box::before { display: none !important; } .checkout-page #payment div.payment_box p { margin: 0 0 .5rem; } .checkout-page #payment div.payment_box p:last-child { margin-bottom: 0; } .checkout-page #payment div.payment_box #alpay-card-element { background: #fff; border: 1px solid var(--line-l); border-radius: 9px; padding: .85rem .9rem; min-height: 46px; } /* single live gateway: no radio chrome, fields open */ .checkout-page #payment .methods--solo li.wc_payment_method { border: 0; background: transparent; } .checkout-page #payment .methods--solo li.wc_payment_method:has(> input:checked) { border-color: transparent; box-shadow: none; } .checkout-page #payment .methods--solo label.ckpm { padding: 0 0 .8rem; cursor: default; } .checkout-page #payment .methods--solo .ckpm__dot { display: none; } .checkout-page #payment .methods--solo div.payment_box { border: 1px solid var(--line-l); border-radius: 11px; background: #fff !important; } /* place order */ .checkout-sec .place-order { padding: 0 !important; margin: 0; } .checkout-sec .ck-place { display: flex !important; width: 100%; align-items: center; justify-content: center; gap: .6rem; padding: 1.05rem 1.2rem !important; margin: 0 !important; border: 0 !important; border-radius: 12px !important; font: 700 .85rem/1 var(--f) !important; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; color: #1A1305 !important; background: linear-gradient(95deg, #E8CE8A, #C9A24B 52%, #E2C173) !important; box-shadow: 0 0 0 1px rgba(246, 230, 182, .4) inset !important; transition: transform .3s var(--ease), box-shadow .35s var(--ease); } .checkout-sec .ck-place:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -16px rgba(201, 162, 75, .85), 0 0 0 1px rgba(246, 230, 182, .55) inset !important; } .checkout-sec .ck-place:disabled { opacity: .6; cursor: wait; transform: none; } .checkout-sec .ck-place .icon { font-size: 1.05rem; flex: none; } .ck-place__total { font-weight: 700; margin-left: .35rem; padding-left: .8rem; border-left: 1px solid rgba(26, 19, 5, .25); } .ck-place__total .amount { color: inherit; } .ck-place__age { margin: .75rem 0 0; text-align: center; font-size: .72rem; color: var(--t-l-mut); } /* ---- order summary card ------------------------------------------------ */ .cksum { position: sticky; top: 24px; background: var(--card); border: 1px solid var(--line-l); border-radius: var(--r); padding: clamp(1.2rem, 2.4vw, 1.6rem); box-shadow: 0 22px 60px -40px rgba(20, 18, 10, .55); } .cksum__toggle { display: none; } .cksum__edit { display: inline-block; margin: .95rem 0 0; font-size: .78rem; font-weight: 600; color: var(--g-dk); text-decoration: underline; text-underline-offset: 3px; transition: color .2s; } .cksum__edit:hover { color: var(--t-l); } /* review table (single element — replaced wholesale by checkout fragments) */ .checkout-sec table.ckrev { width: 100%; border-collapse: collapse; margin: 0; border: 0 !important; background: 0; } .checkout-sec .ckrev th, .checkout-sec .ckrev td { border: 0 !important; background: 0 !important; padding: .5rem 0; font-size: .87rem; vertical-align: middle; } .checkout-sec .ckrev tbody td { border-bottom: 1px solid var(--line-l) !important; padding: .7rem 0; } .checkout-sec .ckrev .product-total { text-align: right; font-weight: 700; color: var(--t-l); white-space: nowrap; } .ckitem { display: flex; align-items: center; gap: .8rem; } .ckitem__media { position: relative; flex: none; } .ckitem__media img { width: 54px; height: 54px; object-fit: contain; display: block; border-radius: 9px; border: 1px solid var(--line-l); background: radial-gradient(circle at 50% 36%, #fff, #EFEBE0 78%); mix-blend-mode: multiply; } .ckitem__n { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: linear-gradient(95deg, #E8CE8A, #C9A24B); color: #1A1305; font-size: .64rem; font-weight: 700; display: grid; place-items: center; } .ckitem__txt { min-width: 0; display: flex; flex-direction: column; gap: .2rem; } .ckitem__name { font-weight: 700; font-size: .84rem; line-height: 1.3; color: var(--t-l); } .ckitem__unit { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; font-size: .74rem; color: var(--t-l-mut); } .ckitem__unit .amount { font-weight: 600; } .ckitem__unit s { opacity: .7; } .ckitem__save { font-style: normal; font-weight: 700; font-size: .62rem; letter-spacing: .04em; color: var(--g-dk); background: #FBF4DF; border: 1px solid var(--g-hi); border-radius: 3px; padding: .06rem .3rem; } .checkout-sec .ckrev tfoot th { text-align: left; font-weight: 600; color: var(--t-l-mut); } .checkout-sec .ckrev tfoot td { text-align: right; font-weight: 700; color: var(--t-l); } .checkout-sec .ckrev tfoot tr:first-child th, .checkout-sec .ckrev tfoot tr:first-child td { padding-top: .95rem; } .checkout-sec .ckrev .order-total th, .checkout-sec .ckrev .order-total td { padding-top: .95rem; border-top: 1px solid var(--line-l) !important; font-size: 1.16rem; color: var(--t-l); } .checkout-sec .ckrev .order-total td .amount { color: var(--g-dk); } .checkout-sec .ckrev ul#shipping_method { list-style: none; margin: 0; padding: 0; text-align: right; font-weight: 600; } .checkout-sec .ckrev ul#shipping_method li { margin: .15rem 0; } .checkout-sec .ckrev .woocommerce-shipping-destination { font-size: .74rem; font-weight: 500; color: var(--t-l-mut); margin: .35rem 0 0; } /* ---- notices ------------------------------------------------------------ */ .checkout-sec .woocommerce-message, .checkout-sec .woocommerce-info, .checkout-sec .woocommerce-error { list-style: none; background: #fff; color: var(--t-l); border-top: 3px solid var(--g); border-radius: 10px; box-shadow: 0 10px 30px -22px rgba(20, 18, 10, .5); padding: 1rem 1.2rem; margin: 0 0 1.4rem; font-size: .9rem; } .checkout-sec .woocommerce-error { border-top-color: #C0392B; } .checkout-sec .woocommerce-error li { margin: .25rem 0; font-weight: 600; } .checkout-sec .woocommerce-NoticeGroup { grid-column: 1 / -1; } /* WooCommerce ships these notices with an absolutely-positioned glyph (a green tick on the "added to your cart" message) pinned to the far left. Our card padding is tighter than WC's default, so that glyph overlapped the first characters of the text. Drop it — the gold top border already marks the card as a notice — so the message starts cleanly at the padding edge. */ .pdp-sec .woocommerce-message::before, .pdp-sec .woocommerce-info::before, .pdp-sec .woocommerce-error::before, .cart-sec .woocommerce-message::before, .cart-sec .woocommerce-info::before, .cart-sec .woocommerce-error::before, .checkout-sec .woocommerce-message::before, .checkout-sec .woocommerce-info::before, .checkout-sec .woocommerce-error::before { content: none; } /* ---- thank-you (order received) ---------------------------------------- */ .ckty { max-width: 760px; margin-inline: auto; } .ckty__head { text-align: center; padding: clamp(1.2rem, 3.5vw, 2.2rem) 0 1.6rem; } .ckty__check { display: inline-grid; place-items: center; width: 74px; height: 74px; border-radius: 999px; background: linear-gradient(125deg, #F6E6B6, #C9A24B); color: #1A1305; margin-bottom: 1.1rem; box-shadow: 0 18px 40px -18px rgba(201, 162, 75, .7); } .ckty__check .icon { font-size: 2rem; stroke-width: 2.2; } .ckty__h { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 700; color: var(--t-l); margin: 0 0 .6rem; } .ckty__sub { color: var(--t-l-mut); font-size: .95rem; margin: 0 auto; max-width: 52ch; } .ckty__facts { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 0 0 1.5rem !important; padding: 1.2rem 1.4rem; background: var(--card); border: 1px solid var(--line-l); border-radius: var(--r); } .ckty__facts li { float: none !important; width: auto !important; border: 0 !important; margin: 0 !important; padding: 0 !important; font-size: .68rem !important; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t-l-mut); } .ckty__facts li strong { display: block; font-size: .95rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--t-l); margin-top: .2rem; } .ckty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin: 0 0 2.2rem; padding: 0; } .ckty__actions .btn { border-radius: 10px; } .ckty .woocommerce-order-details, .ckty .woocommerce-customer-details { background: var(--card); border: 1px solid var(--line-l); border-radius: var(--r); padding: 1.2rem 1.4rem; margin: 0 0 1.2rem; } .ckty h2 { font-size: 1rem; font-weight: 700; color: var(--t-l); margin: 0 0 .9rem; } .ckty table.shop_table { width: 100%; border-collapse: collapse; border: 0 !important; margin: 0; } .ckty table.shop_table th, .ckty table.shop_table td { border: 0 !important; border-bottom: 1px solid var(--line-l) !important; background: 0 !important; padding: .55rem 0 !important; font-size: .85rem; text-align: left; } .ckty table.shop_table th:last-child, .ckty table.shop_table td:last-child { text-align: right; } .ckty table.shop_table tfoot tr:last-child th, .ckty table.shop_table tfoot tr:last-child td { border-bottom: 0 !important; font-weight: 700; } .ckty .woocommerce-customer-details address { border: 0; padding: 0; font-style: normal; color: var(--t-l-mut); line-height: 1.7; } .ckty__head--failed .woocommerce-notice { margin: 0 0 1rem; } /* ---- responsive --------------------------------------------------------- */ @media (max-width: 980px) { .ck-grid { grid-template-columns: 1fr; } .ck-side { order: -1; } .cksum { position: static; padding: .35rem 1.1rem; } .cksum__toggle { display: flex; width: 100%; align-items: center; gap: .6rem; background: 0; border: 0; padding: .85rem 0; font: 700 .85rem var(--f); color: var(--t-l); cursor: pointer; text-align: left; } .cksum__toggle > .icon { color: var(--g-dk); font-size: 1.15rem; flex: none; } .cksum__toggle-total { margin-left: auto; font-size: .98rem; } .cksum__toggle-total .amount { color: var(--g-dk); } .cksum__chev { transform: rotate(90deg); transition: transform .25s var(--ease); font-size: .78rem !important; color: var(--t-l-mut) !important; } .cksum.is-open .cksum__chev { transform: rotate(-90deg); } .cksum__body { display: none; padding: .2rem 0 1rem; } .cksum.is-open .cksum__body { display: block; } .cksum__body .csum__h { display: none; } } @media (max-width: 560px) { .ckhead__in { height: 58px; } .ckhead__secure { font-size: .64rem; } .ck-fields, .checkout-sec .woocommerce-shipping-fields__field-wrapper { gap: .75rem .6rem; } #billing_first_name_field, #shipping_first_name_field, #billing_last_name_field, #shipping_last_name_field, #billing_city_field, #shipping_city_field { grid-column: 1 / -1; } #billing_state_field, #shipping_state_field { grid-column: 1 / 4; } #billing_postcode_field, #shipping_postcode_field { grid-column: 4 / 7; } .ckpm__sec { display: none; } .ckty__actions { flex-direction: column; align-items: stretch; } .ckty__actions .btn { justify-content: center; } }