/* * Studio Moderna - Chrome styles * Shared + slim (checkout) + full storefront (desktop/mobile) header & footer. * All colors reference tokens.css variables (brand-swap point). */ /* shared ------------------------------------------------------------------ */ .site-main{min-height:40vh;} .slim-header__logo .custom-logo,.slim-header__logo img{height:33px;width:auto;display:block;} .slim-header__logo .sm-logo-text{font-size:22px;font-weight:700;color:var(--brand);text-decoration:none;} .sm-pay{display:inline-flex;align-items:center;gap:6px;} .sm-pay .pay-chip{display:flex;align-items:center;justify-content:center;height:24px;min-width:38px;padding:4px 7px;border-radius:4px;background:#fff;} .sm-pay .pay-chip span{font-size:11px;font-weight:700;color:var(--brand);} .sm-pay .pay-chip svg{display:block;} /* slim header (checkout) -------------------------------------------------- */ .slim-header{background:var(--surface);border-bottom:1px solid var(--line);} .slim-header__inner{max-width:1440px;margin:0 auto;padding:18px 40px;display:flex;align-items:center;justify-content:space-between;} .slim-header__right{display:flex;align-items:center;gap:22px;} .slim-header__phone{font-size:13px;color:var(--muted);} .slim-header__secure{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--brand);} /* checkout footer --------------------------------------------------------- */ .checkout-footer{background:var(--brand);color:var(--copy-link);font-size:12px;} .checkout-footer__inner{max-width:1440px;margin:0 auto;padding:22px 40px;display:flex;align-items:center;justify-content:space-between;gap:20px;} .checkout-footer a{color:var(--copy-link);text-decoration:none;} .checkout-footer a:hover{color:#fff;} .checkout-footer__copy{margin:0;} .checkout-footer__links{display:flex;align-items:center;gap:18px;} .checkout-footer__pay{display:flex;align-items:center;gap:14px;} .checkout-footer__secure{display:flex;align-items:center;gap:6px;} /* full storefront header (desktop) ---------------------------------------- */ .site-header{position:static;top:auto;z-index:50;background:var(--surface);} .topbar{background:var(--topbar-bg);} .topbar__inner{max-width:1440px;margin:0 auto;height:44px;display:flex;align-items:center;justify-content:space-between;gap:34px;padding:0 40px;} .topbar__util{display:flex;align-items:center;gap:34px;} .topbar__item{display:flex;align-items:center;gap:9px;color:#fff;font-size:12.5px;letter-spacing:.5px;text-decoration:none;} .header-main__inner{max-width:1440px;margin:0 auto;height:92px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 40px;} .header-logo .custom-logo,.header-logo img{height:38px;width:auto;display:block;} .header-logo .sm-logo-text{font-size:26px;font-weight:700;color:var(--brand);text-decoration:none;} .header-actions{display:flex;align-items:center;gap:26px;} .hact{display:flex;align-items:center;gap:9px;color:var(--header-ink);font-size:14px;letter-spacing:.3px;text-decoration:none;white-space:nowrap;} /* Two-line stack: label on top, small status/name meta below (CLUB5 status, and kept single-line for the account name). Colors mirror the account dropdown's Aktivë/Joaktivë chips. */ .hact__stack{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;line-height:1.15;gap:1px;} .hact__lbl{display:block;} .hact__status{font-size:11px;font-weight:700;letter-spacing:.2px;line-height:1.1;} .hact__status--on{color:var(--success);} .hact__status--off{color:var(--muted);} .hact__club5{width:21px;height:22px;display:block;-webkit-mask:url(../icons/club5.svg) center/contain no-repeat;mask:url(../icons/club5.svg) center/contain no-repeat;background:var(--brand);} /* Shared brand-colored CLUB5 star (masked). Used everywhere via sm_club5_star(); per-place classes below just tweak size. On brand-colored backgrounds the star stays white via its own rule (e.g. .club5dd__lock img). */ .sm-club5-star{display:block;flex-shrink:0;width:22px;height:22px;-webkit-mask:url(../icons/club5.svg) center/contain no-repeat;mask:url(../icons/club5.svg) center/contain no-repeat;background:var(--brand);} .hact--cart{gap:11px;} .sm-cart__ic{position:relative;display:inline-flex;color:var(--header-ink);font-size:22px;} .sm-cart__badge{position:absolute;top:-4px;right:-6px;width:16px;height:16px;border-radius:50%;background:var(--brand);color:#fff;font-size:9.5px;line-height:16px;text-align:center;font-weight:700;box-sizing:border-box;} .sm-cart__subtotal{font-size:16px;color:var(--header-ink);} /* desktop vs mobile header swap ------------------------------------------- */ .mobile-header{display:none;} @media (max-width:1023px){ .site-header{display:none;} .mobile-header{display:block;} } /* category nav + mega ----------------------------------------------------- */ .cat-nav{position:relative;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .cat-nav__inner{position:relative;max-width:1440px;margin:0 auto;padding:0 40px;} .cat-nav__scroll{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;} .cat-nav__scroll::-webkit-scrollbar{display:none;} .cat-nav__list{display:flex;align-items:center;gap:26px;height:56px;margin:0;padding:0;list-style:none;width:max-content;} .cat-nav__more{position:absolute;top:0;bottom:0;right:40px;width:60px;display:flex;align-items:center;justify-content:flex-end;border:0;padding:0;cursor:pointer;color:var(--brand);background:linear-gradient(to right,rgba(255,255,255,0),var(--surface) 55%);} .cat-nav__more[hidden]{display:none;} .cat-nav__more i{font-size:22px;line-height:1;} .cat-nav__empty{margin:0;padding:18px 0;color:var(--muted);font-size:13px;} /* Mobile category strip (rendered inside .mobile-header) */ .cat-nav--mobile{border-top:0;} .cat-nav--mobile .cat-nav__inner{padding:0 16px;} .cat-nav--mobile .cat-nav__list{height:48px;gap:22px;} .cat-nav--mobile .cat-nav__list .nav-link{font-size:13.5px;} .cat-nav--mobile .cat-nav__more{right:16px;width:52px;} /* Mobile utility strip (last row of .mobile-header): the "navy band" model (Figma 682:34) - a single-line bar on the brand's top-bar background, so it extends the promo-bar language: white bold order phone left, muted-white store locator right. Recolors per brand via --topbar-bg. */ .mutil{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;background:var(--topbar-bg);} .mutil__phone{display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:13px;font-weight:400;line-height:normal;text-decoration:none;} .mutil__phone i{font-size:16px;} .mutil__stores{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.85);font-size:13px;font-weight:400;line-height:normal;text-decoration:none;} .mutil__stores i{font-size:16px;color:#fff;} .nav-item{position:static;display:flex;align-items:center;height:56px;} .nav-link{display:flex;align-items:center;gap:6px;height:100%;color:var(--header-ink);font-size:14.5px;letter-spacing:.2px;text-transform:uppercase;text-decoration:none;} .nav-caret{width:auto;height:auto;font-size:15px;display:inline-flex;transition:transform .15s ease;} .nav-item.is-accent .nav-link{color:var(--sky-accent);} .nav-item.is-sale .nav-link{color:var(--sale);} .nav-item.align-right{margin-left:auto;} .mega-panel{position:absolute;left:0;top:100%;width:100%;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 22px 38px -10px rgba(0,0,0,.14);display:none;z-index:40;} .mega-panel__inner{max-width:1440px;margin:0 auto;display:flex;align-items:flex-start;gap:40px;padding:36px 40px 40px;} /* Subcategory columns cluster: a few groups pack tight on the left instead of stretching; many groups wrap to more rows. Products sit beside it. */ .mega-cols{flex:0 1 auto;display:flex;flex-wrap:wrap;gap:14px 36px;align-content:flex-start;} .mega-col{flex:0 0 auto;width:200px;min-width:0;} .mega-col__title{display:block;margin-bottom:14px;color:var(--heading);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;} .mega-col__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;} /* Grouped links column: childless subcategories packed together (uses the top-level item's name as the heading, then a multi-column link list so a handful of leaf links stay compact instead of stretching the panel). */ .mega-col--links{width:auto;max-width:520px;} .mega-col--links .mega-col__links{display:block;column-width:170px;column-gap:36px;} .mega-col--links .mega-link{break-inside:avoid;margin-bottom:11px;} .mega-col__title--plain{cursor:default;} /* Panels without products: let the columns breathe evenly across the panel. */ .mega-panel__inner:not(:has(.mega-feat)) .mega-cols{flex:1 1 auto;} .mega-panel__inner:not(:has(.mega-feat)) .mega-col{flex:1 1 0;width:auto;} .mega-link a{color:var(--ink);font-size:14px;line-height:1.45;text-decoration:none;} .mega-link a:hover{color:var(--brand);} .mega-col__all{display:inline-block;margin-top:14px;color:var(--sky-accent);font-size:14px;font-weight:700;text-decoration:none;} .mega-col__all:hover{text-decoration:underline;} /* "Të zgjedhura për ju" - up to 3 products from the Storefront mega tag */ .mega-feat{flex:1 1 360px;min-width:320px;margin-left:auto;border-left:1px solid var(--line);padding-left:40px;display:flex;flex-direction:column;gap:14px;} .mega-feat__label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);} .mega-feat__cards{display:flex;gap:20px;} .mega-prod{flex:1 1 0;min-width:0;max-width:230px;text-decoration:none;display:flex;flex-direction:column;} .mega-prod:hover .mega-prod__title{color:var(--brand);} .mega-prod__img{position:relative;display:flex;align-items:center;justify-content:center;height:148px;} .mega-prod__img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;} .mega-prod__badge{position:absolute;top:10px;left:10px;background:var(--sale);color:#fff;font-size:11px;font-weight:700;line-height:1;padding:4px 7px;border-radius:var(--badge-radius,0);} .mega-prod__body{display:flex;flex-direction:column;gap:7px;padding:12px 0 0;} .mega-prod__title{font-size:13px;line-height:1.4;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px;transition:color .15s ease;} .mega-prod__price{display:flex;align-items:baseline;gap:8px;font-size:15px;font-weight:700;color:var(--ink);} .mega-prod__price.is-sale{color:var(--sale);} .mega-prod__was{font-size:13px;font-weight:400;color:var(--muted);text-decoration:line-through;} .nav-item.has-mega.is-open .mega-panel{display:block;} .nav-item.has-mega.is-open .nav-caret{transform:rotate(180deg);} @media (hover:hover){ .nav-item.has-mega:hover .mega-panel{display:block;} .nav-item.has-mega:hover .nav-caret{transform:rotate(180deg);} } /* mobile header + off-canvas drawer --------------------------------------- */ body.drawer-open{overflow:hidden;} .mobile-header{position:static;top:auto;z-index:50;background:var(--surface);} /* Mobile store switcher - vertical brand tab + centered confirm modal (v2.119.0, rebuilt on Figma node 731:25 "M1 Centered confirm modal"). Collapsed: ONE rounded-left vertical tab on the right edge in THIS site's brand (var(--brand)) - shop glyph over the editable hdr_switch_label text. Tap: the tab fades and a CENTERED dialog card opens over the scrim on the mini-cart card recipe (348px, white, 1px #eceff3, radius 12 all corners, 18px padding, 0 18px 40px shadow). Interaction changes from tap-to-navigate to SELECT then CONFIRM, per the node: each store row is a radio row (20px control, #CBD2DC ring idle, var(--brand) fill + white dot selected - the theme's checkout radio language) with name/host text; the primary CTA reads "Vazhdo te {selected}" and carries the navigation; the ghost button is Mbyll. Tapping a row only moves the selection and retargets the CTA. The node's stray white "D" glyph (no backing shape, white on white) was judged a leftover and omitted. Layout note: scrim and the dialog are BOTH fixed direct children of the untransformed nav root (a transform ancestor would re-parent fixed positioning); only .msfab__box (the toggle) carries a transform. Closes on Mbyll, scrim tap, Escape or scroll. z-index 70 keeps everything under the drawer overlay (90), fullscreen search (200) and the PDP sticky bar (1200). */ .msfab{position:fixed;top:50%;right:env(safe-area-inset-right,0px);z-index:70;display:none;} @media (max-width:1023px){ .msfab{display:block;} } .msfab__scrim{position:fixed;inset:0;background:rgba(0,20,50,.35);opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease;} .msfab.is-open .msfab__scrim{opacity:1;visibility:visible;} .msfab__box{position:relative;transform:translateY(-50%);display:flex;align-items:center;justify-content:flex-end;} .msfab__toggle{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;width:40px;max-height:200px;padding:14px 8px 16px;border:0;border-radius:14px 0 0 14px;background:var(--brand);color:#fff;cursor:pointer;box-shadow:0 4px 14px rgba(0,15,46,.22);overflow:hidden;} .msfab__toggle:active{filter:brightness(.92);} .msfab__toggle i{font-size:19px;line-height:1;flex:0 0 auto;} .msfab__toggle-txt{writing-mode:vertical-rl;text-orientation:mixed;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1;white-space:nowrap;overflow:hidden;max-height:150px;} /* While open the flush panel replaces the handle. */ .msfab.is-open .msfab__toggle{opacity:0;visibility:hidden;pointer-events:none;transform:translateX(10px);} .msfab__toggle{transition:filter .15s ease,opacity .16s ease,transform .16s ease,visibility .16s ease;} /* Touch target: widen the hit area without moving pixels (house ::after pad). */ .msfab__toggle::after{content:"";position:absolute;inset:-6px 0 -6px -8px;} .msfab__menu{position:fixed;top:50%;left:50%;width:348px;max-width:calc(100vw - 32px);box-sizing:border-box;background:#fff;border:1px solid #eceff3;border-radius:12px;box-shadow:0 18px 40px rgba(0,10,36,.18);padding:18px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translate(-50%,-50%) scale(.96);transition:opacity .2s ease,transform .2s ease,visibility .2s ease;pointer-events:none;} .msfab.is-open .msfab__menu{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);pointer-events:auto;} .msfab__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 0 12px;border-bottom:1px solid #eceff3;} .msfab__title{margin:0;font-size:16px;font-weight:700;color:var(--cart-ink,#1A1A1A);} .msfab__count{margin:0;font-size:12.5px;color:var(--muted,#6B7280);} /* Radio rows: real buttons (selection, not navigation). */ .msfab__store{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;min-height:62px;padding:11px 0;margin:0;background:none;border:0;text-align:left;font-family:var(--font);cursor:pointer;transition:background .12s ease;} .msfab__store + .msfab__store{border-top:1px solid #eceff3;} .msfab__store:active{background:var(--bg,#F5F6F8);} .msfab__radio{position:relative;flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:#fff;border:1.5px solid #CBD2DC;box-sizing:border-box;transition:background .12s ease,border-color .12s ease;} .msfab__store.is-selected .msfab__radio{background:var(--brand);border-color:var(--brand);} .msfab__radio::after{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:50%;background:#fff;transform:translate(-50%,-50%) scale(0);transition:transform .12s ease;} .msfab__store.is-selected .msfab__radio::after{transform:translate(-50%,-50%) scale(1);} .msfab__rt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px;} .msfab__name{font-size:14px;font-weight:700;color:var(--cart-ink,#1A1A1A);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .msfab__host{font-size:12px;color:var(--muted,#6B7280);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* Confirm foot (node: filled CTA + ghost Mbyll, no divider). */ .msfab__foot{display:flex;flex-direction:column;gap:10px;padding-top:22px;} .msfab__go{display:flex;align-items:center;justify-content:center;height:43px;box-sizing:border-box;background:var(--brand);color:#fff;border-radius:var(--btn-radius);font-size:15px;font-weight:700;text-decoration:none;transition:filter .15s ease;} .msfab__go:active{filter:brightness(.92);} .msfab__cancel{display:flex;align-items:center;justify-content:center;height:40px;box-sizing:border-box;background:#fff;border:1.5px solid var(--brand);border-radius:var(--btn-radius);color:var(--brand);font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;transition:background .15s ease,color .15s ease;} .msfab__cancel:active{background:var(--brand);color:#fff;} @media (max-width:359px){ .msfab__toggle{width:36px;padding:12px 7px 14px;} .msfab__toggle-txt{font-size:10px;max-height:132px;} .msfab__menu{padding:14px;} .msfab__store{min-height:56px;padding:9px 0;} } .mpromo{display:flex;align-items:center;justify-content:center;gap:8px;height:34px;background:var(--topbar-bg);color:#fff;font-size:11px;letter-spacing:.4px;padding:0 12px;text-align:center;} .mpromo i{font-size:18px;} .mbar{display:flex;align-items:center;height:62px;padding:0 16px;} .mbar__burger{background:none;border:0;color:var(--header-ink);padding:4px;cursor:pointer;display:inline-flex;} .mbar__burger i{font-size:26px;} .mbar__logo{margin-left:12px;} .mbar__logo .custom-logo,.mbar__logo img{height:22px;width:auto;display:block;} .mbar__logo .sm-logo-text{font-size:20px;font-weight:700;color:var(--header-ink);text-decoration:none;} .mbar__actions{margin-left:auto;display:flex;align-items:center;gap:18px;} .mbar__actions a{color:var(--header-ink);display:inline-flex;} .mbar__actions i{font-size:24px;} .mbar__actions .hact__club5{width:23px;height:24px;} .mbar__cart{position:relative;} .mbar__cart .sm-cart__badge{position:absolute;top:-4px;right:-7px;} .drawer-overlay{position:fixed;inset:0;background:rgba(0,20,50,.45);opacity:0;visibility:hidden;transition:opacity .2s ease;z-index:90;} .drawer-overlay.is-open{opacity:1;visibility:visible;} .mobile-drawer{position:fixed;top:0;left:0;height:100%;width:86%;max-width:360px;background:#fff;z-index:100;transform:translateX(-100%);transition:transform .25s ease;display:flex;flex-direction:column;overflow-y:auto;} .mobile-drawer.is-open{transform:translateX(0);} .mobile-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--line);} .mobile-drawer__logo .custom-logo,.mobile-drawer__logo img{height:24px;width:auto;display:block;} .mobile-drawer__close{background:none;border:0;color:var(--brand);cursor:pointer;display:inline-flex;} .mobile-drawer__close i{font-size:24px;} .drawer-menu{list-style:none;margin:0;padding:6px 0;} .drawer-menu li{border-bottom:1px solid var(--line);position:relative;} .drawer-menu a{display:block;padding:14px 16px;color:var(--brand);font-size:15px;letter-spacing:.2px;text-transform:uppercase;text-decoration:none;} .drawer-menu .menu-item-has-children > a{padding-right:52px;} .drawer-toggle{position:absolute;right:0;top:0;height:49px;width:52px;background:none;border:0;color:var(--brand);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;} .drawer-toggle i{font-size:18px;transition:transform .2s ease;} .drawer-menu .menu-item-has-children.is-open > .drawer-toggle i{transform:rotate(180deg);} .drawer-menu .sub-menu{list-style:none;margin:0;padding:0;background:var(--bg);max-height:0;overflow:hidden;transition:max-height .25s ease;} .drawer-menu .menu-item-has-children.is-open > .sub-menu{max-height:1200px;} .drawer-menu .sub-menu a{text-transform:none;color:var(--footer-link);font-size:14px;padding-left:28px;} .mobile-drawer__foot{margin-top:auto;padding:16px;display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line);} .mobile-drawer__foot a{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:14px;text-decoration:none;} /* Drill-down drawer panels (chrome.js builds these from .drawer-menu) */ .mobile-drawer.has-panels{overflow:hidden;} .mobile-drawer.has-panels .drawer-menu-wrap{flex:1;min-height:0;position:relative;overflow:hidden;} .drawer-panel{position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch;transform:translateX(100%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s;z-index:1;} .drawer-panel.is-active{transform:translateX(0);visibility:visible;transition:transform .25s ease;z-index:2;} .drawer-panel.is-prev{transform:translateX(-28%);visibility:visible;z-index:1;} .drawer-noanim .drawer-panel{transition:none;} .drawer-plist{list-style:none;margin:0;padding:6px 0;} .drawer-plist li{border-bottom:1px solid var(--line);} .drawer-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;box-sizing:border-box;padding:14px 16px;background:none;border:0;text-align:left;cursor:pointer;text-decoration:none;color:var(--ink);font-family:var(--font);font-size:15px;letter-spacing:.2px;text-transform:uppercase;} .drawer-row i{font-size:18px;color:var(--muted);flex:none;} .drawer-panel[data-level]:not([data-level="0"]) .drawer-row{text-transform:none;color:var(--ink);letter-spacing:0;} .drawer-panel[data-level]:not([data-level="0"]) .drawer-row i{color:var(--muted);} .drawer-back{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:14px 16px;background:var(--bg);border:0;border-bottom:1px solid var(--line);color:var(--ink);font-family:var(--font);font-size:15px;font-weight:700;cursor:pointer;text-align:left;} .drawer-back i{font-size:18px;color:var(--brand);} .drawer-all{display:block;padding:13px 16px;border-bottom:1px solid var(--line);color:var(--sky-accent);font-size:14px;font-weight:700;text-decoration:none;} .mobile-drawer__foot i{font-size:20px;color:var(--brand);} /* type + Iconoir icon sizing ---------------------------------------------- */ /* Light-only design: pin the canvas. body carried no background at all, so dark-mode browsers painted the root canvas black behind/around sections; color-scheme:light also stops UA auto-darkening of form controls. */ html{color-scheme:light;} body{font-family:var(--font);color:var(--ink);background:var(--surface,#fff);-webkit-font-smoothing:antialiased;} [class^="iconoir-"],[class*=" iconoir-"]{display:inline-flex;align-items:center;line-height:1;} .topbar__item i{font-size:18px;opacity:.9;} /* ── Top-bar store switcher (Dyqani: inline list) ── */ .topbar__switch{display:flex;align-items:center;gap:12px;} .topbar__switch-lbl{color:rgba(255,255,255,.7);font-size:12.5px;letter-spacing:.5px;} .topbar__stores{display:flex;align-items:center;list-style:none;margin:0;padding:0;} .topbar__stores li{display:flex;align-items:center;} .topbar__stores li:not(:last-child)::after{content:"";width:1px;height:12px;background:rgba(255,255,255,.32);margin:0 14px;} .topbar__store{color:rgba(255,255,255,.6);font-size:12.5px;letter-spacing:.5px;text-decoration:none;transition:color .15s ease;white-space:nowrap;} .topbar__store:hover{color:#fff;} .topbar__store.is-current{color:#fff;font-weight:700;} .slim-header__secure i{font-size:16px;} .checkout-footer__secure i{font-size:14px;} .hact__ic{font-size:22px;} .hact__caret{font-size:15px;} /* responsive (slim chrome) ------------------------------------------------ */ @media (max-width:767px){ .slim-header__inner{padding-left:16px;padding-right:16px;} .slim-header__phone{display:none;} /* Figma 288:2 mobile footer: stacked + centered, order payment -> links -> copyright (markup is copy/links/pay, so reverse it). */ .checkout-footer__inner{flex-direction:column-reverse;align-items:center;gap:14px;padding:26px 16px 30px;text-align:center;} .checkout-footer__links{flex-wrap:wrap;justify-content:center;} } /* search box (native) — Figma header: 520x52, --line border, divider rule, * Iconoir magnifier on the right. Autocomplete dropdown (.sm-search__results) * is populated by the header-search JS; base form works without it. * -------------------------------------------------------------------------- */ .header-search{flex:1 1 520px;max-width:520px;} .msearch{padding:0 16px 12px;display:flex;align-items:center;gap:6px;} .msearch__back{display:none;flex:0 0 auto;width:40px;height:46px;align-items:center;justify-content:center;background:none;border:0;color:var(--brand);cursor:pointer;padding:0;} .msearch__back i{font-size:24px;} /* Mobile full-screen search takeover. Focusing the header search expands .msearch to a full-screen overlay: back arrow + field pinned on top, results filling the rest of the screen. Only the mobile .msearch participates. */ body.sm-search-fs .msearch{position:fixed;inset:0;z-index:200;background:#fff;padding:12px 12px 0;gap:6px;align-items:flex-start;} body.sm-search-fs .msearch__back{display:inline-flex;height:52px;} body.sm-search-fs .msearch .sm-search{height:52px;} /* Results become a full-height panel below the field instead of a dropdown. */ body.sm-search-fs .msearch .sm-search__results{position:fixed;left:0;right:0;top:76px;bottom:0;max-height:none;z-index:200;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;background:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;} .sm-search{position:relative;display:flex;align-items:center;width:100%;max-width:520px;height:52px;background:#fff;border:1px solid var(--line);padding:0 14px 0 18px;border-radius:var(--card-radius);box-sizing:border-box;} .sm-search__input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font-family:var(--font);font-size:15px;color:var(--ink);} .sm-search__input::placeholder{color:var(--muted);opacity:1;} .sm-search__input::-webkit-search-cancel-button,.sm-search__input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;} .sm-search__clear{flex-shrink:0;width:22px;height:22px;display:none;align-items:center;justify-content:center;background:none;border:0;padding:0;margin-right:8px;color:var(--muted);cursor:pointer;} .sm-search__clear.is-visible{display:inline-flex;} .sm-search__clear i{font-size:20px;} .sm-search__clear:hover{color:var(--ink);} .sm-search:focus-within{border-color:var(--brand);} .sm-search__rule{width:1px;height:26px;background:var(--line);flex-shrink:0;margin:0 14px;} .sm-search__submit{flex-shrink:0;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;padding:0;color:var(--header-ink);cursor:pointer;} .sm-search__submit i{font-size:24px;} /* mobile search: shorter, subtle radius, no divider rule */ .msearch .sm-search{height:46px;border-radius:var(--card-radius);padding:0 12px 0 14px;max-width:none;} .msearch .sm-search__input{font-size:16px;} .msearch .sm-search__rule{display:none;} .msearch .sm-search__submit{width:21px;height:21px;} .msearch .sm-search__submit i{font-size:21px;} /* live search dropdown — grouped: categories, products, "see all" footer */ .sm-search__results{position:absolute;left:0;right:0;top:calc(100% + 9px);z-index:60;background:#fff;border:1px solid var(--line);border-radius:var(--card-radius);box-shadow:0 14px 24px rgba(0,40,95,.10);max-height:74vh;overflow-y:auto;} .sm-search__results[hidden]{display:none;} .sm-search__group{border-top:1px solid var(--line);padding:6px 0;} .sm-search__group:first-child{border-top:0;} .sm-search__grouphd{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 16px 6px;} /* category rows */ .sm-search__cat{display:flex;align-items:center;gap:10px;padding:9px 16px;text-decoration:none;color:var(--ink);} .sm-search__cat-ic{width:17px;height:17px;color:var(--muted);flex-shrink:0;} .sm-search__cat-name{font-size:14px;color:var(--cart-ink);} .sm-search__cat-count{margin-left:auto;font-size:12px;color:var(--muted);background:var(--brand-tint);border-radius:999px;padding:1px 9px;} .sm-search__cat:hover,.sm-search__cat.is-active{background:var(--brand-tint);} /* Attribute-value shortcut: exact-match chip that applies an archive filter. */ .sm-search__group--attr{padding-bottom:8px;} .sm-search__attr{display:flex;align-items:center;gap:10px;margin:2px 10px;padding:9px 12px;text-decoration:none;color:var(--ink);background:var(--brand-tint);border-radius:calc(var(--card-radius) * .5);} .sm-search__attr-ic{width:18px;height:18px;color:var(--brand);flex-shrink:0;} .sm-search__attr-txt{font-size:14px;line-height:1.2;} .sm-search__attr-lbl{color:var(--muted);} .sm-search__attr-val{color:var(--brand);font-weight:700;} .sm-search__attr-count{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 5px;box-sizing:border-box;font-size:12px;font-weight:700;line-height:1;color:#fff;background:var(--brand);border-radius:999px;} .sm-search__attr:hover{background:color-mix(in srgb,var(--brand) 16%,#fff);} /* product rows */ .sm-search__prod{display:flex;align-items:center;gap:12px;padding:9px 16px;text-decoration:none;color:var(--ink);} .sm-search__prod-thumb{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff;overflow:hidden;} .sm-search__prod-thumb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;} .sm-search__prod-main{display:flex;flex-direction:column;gap:2px;min-width:0;} .sm-search__prod-name{font-size:14px;color:var(--ink);line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;} /* Search-as-you-type match highlight: the typed query characters inside each result name render in the brand colour, bold, on a transparent background (override the browser's default yellow fill). */ .sm-search__hl{background:transparent;color:var(--brand);font-weight:700;padding:0;} .sm-search__prod-price{font-size:14px;font-weight:700;color:var(--card-price-ink,var(--brand));} .sm-search__prod-price del{font-weight:400;color:var(--muted);font-size:12px;margin-right:5px;} .sm-search__prod:hover,.sm-search__prod.is-active{background:var(--brand-tint);} .sm-search__prod.is-oos .sm-search__prod-thumb img{opacity:.5;filter:grayscale(.35);} /* footer "see all results" */ .sm-search__all{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 16px;border-top:1px solid var(--line);font-size:14px;font-weight:700;color:var(--brand);text-decoration:none;background:var(--bg);position:sticky;bottom:0;} .sm-search__all i{font-size:16px;} .sm-search__all:hover,.sm-search__all.is-active{background:var(--brand-tint);} /* empty + searching states */ /* No-results state: the "no match" line, a divider, two suggestions, and a support line whose phone/email are brand-coloured tel:/mailto: links. */ .sm-search__empty{padding:18px 20px 20px;color:var(--muted);font-size:14px;} .sm-search__empty-hd{margin:0;text-align:center;color:var(--muted);font-size:14px;} .sm-search__empty-rule{height:1px;background:var(--line);margin:14px 0;} .sm-search__empty-tips{margin:0;padding-left:22px;list-style:disc;color:var(--ink);font-size:13.5px;line-height:1.5;} .sm-search__empty-tips li{padding-left:2px;margin:0 0 6px;} .sm-search__empty-tips li:last-child{margin-bottom:0;} .sm-search__empty-tips li::marker{color:var(--brand);} .sm-search__empty-support{margin:14px 0 0;color:var(--muted);font-size:13px;line-height:1.55;} .sm-search__empty-lnk{color:var(--brand);font-weight:700;text-decoration:none;white-space:nowrap;} .sm-search__empty-lnk:hover{text-decoration:underline;} /* =========================================================================== * Shop footer - desktop (white + navy copyright) / mobile (navy, accordions) * ========================================================================= */ .shop-footer{background:#fff;border-top:1px solid var(--line);} /* ── Footer help + newsletter band (Figma 319:17 / mobile 433:556) ── */ .footer-help{background:var(--brand);border-top:var(--footer-top-border,0);} .footer-help__inner{max-width:1440px;margin:0 auto;padding:52px 40px;display:flex;align-items:center;justify-content:space-between;gap:40px;box-sizing:border-box;} .footer-help__contact{display:flex;flex-direction:column;gap:6px;} .footer-help__lbl{margin:0;font-size:22px;color:#fff;} .footer-help__phone{font-size:36px;color:#fff;text-decoration:none;line-height:1.1;display:inline-flex;align-items:center;gap:12px;} .footer-help__phone--support{font-size:22px;opacity:.92;} .footer-help__hours{margin:0;font-size:14px;color:rgba(255,255,255,.78);} .footer-help__news{width:540px;max-width:100%;display:flex;flex-direction:column;gap:12px;} .footer-help__news-title{margin:0;font-size:22px;color:#fff;} .footer-help__news-sub{margin:0;font-size:15px;color:rgba(255,255,255,.78);line-height:1.45;} .footer-help__form{display:flex;width:100%;} .footer-help__email{flex:1;min-width:0;height:50px;border:0;outline:0;background:#fff;padding:0 16px;font-family:var(--font);font-size:15px;color:var(--ink);box-sizing:border-box;} .footer-help__email::placeholder{color:var(--muted);opacity:1;} .footer-help__submit{flex-shrink:0;width:150px;height:50px;border:0;background:#fff;color:var(--brand);font-family:var(--font);font-size:15px;font-weight:700;letter-spacing:.3px;cursor:pointer;} .footer-help__submit:hover{background:#f2f3f5;} @media (max-width:1023px){ .footer-help__inner{flex-direction:column;align-items:stretch;gap:42px;padding:32px 20px;} .footer-help__news{width:100%;} .footer-help__phone{font-size:32px;} } .footer-top{max-width:1440px;margin:0 auto;padding:0 40px;} /* brand bar */ .footer-brandbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:44px 0 30px;} .footer-brandbar__logo .custom-logo,.footer-brandbar__logo img{height:var(--footer-logo-h,38px);width:auto;display:block;} /* Footer logo strip (Storefront > Footer > "Footer logos"): images right of the brand logo; margin-right:auto keeps the group hugging the logo while the social icons stay pinned to the far right of the space-between bar. */ .footer-brandbar__logos{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-right:auto;margin-left:8px;padding-left:26px;border-left:1px solid var(--line);} .footer-blogo{display:inline-flex;align-items:center;text-decoration:none;} .footer-blogo img{height:var(--footer-blogo-h,34px);width:auto;display:block;} .footer-follow{display:flex;align-items:center;gap:12px;} .footer-follow__label{color:var(--muted);font-size:13px;} .footer-soc{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--footer-soc-radius,19px);background:var(--badge-bg);color:#fff;text-decoration:none;} .footer-soc i{font-size:18px;} .footer-soc:hover{filter:brightness(.93);} /* USP cards */ .footer-usps{display:flex;gap:20px;padding:10px 0 18px;} .footer-usp{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:13px;border:1px solid var(--footer-usp-border,var(--line));border-radius:var(--footer-usp-radius,0);box-shadow:var(--footer-usp-shadow,none);padding:18px;background:#fff;} .footer-usp__ic{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--footer-usp-ic-radius,22px);background:var(--brand-tint);color:var(--brand);flex-shrink:0;} .footer-usp__ic i{font-size:22px;} .footer-usp__tx{display:flex;flex-direction:column;gap:2px;min-width:0;} .footer-usp__tx strong{color:var(--heading);font-size:14px;font-weight:700;} .footer-usp__tx span{color:var(--muted);font-size:12px;} /* columns */ .footer-cols{display:flex;gap:40px;padding:42px 0 50px;} .footer-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:14px;} .footer-col__title{margin:0;color:var(--heading);font-size:14px;font-weight:700;letter-spacing:.4px;} .footer-col__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;} .footer-col__list a{color:var(--footer-link);font-size:14px;text-decoration:none;} .footer-col__list a:hover{color:var(--brand);} .footer-col__list .is-underline a,.footer-col__list a.is-underline{text-decoration:underline;} .footer-col--contact{gap:14px;} .footer-crow{display:flex;align-items:center;gap:10px;color:var(--footer-link);font-size:14px;text-decoration:none;} .footer-crow i{font-size:17px;color:var(--brand);flex-shrink:0;} .footer-crow:hover{color:var(--brand);} .footer-crow--addr{align-items:flex-start;} .footer-crow--addr i{margin-top:2px;} /* copyright */ .footer-copy{background:var(--footer-copy-bg,var(--brand));border-radius:var(--footer-copy-radius,0);} .footer-copy__inner{max-width:1440px;margin:0 auto;padding:18px 40px;display:flex;align-items:center;justify-content:space-between;gap:20px;} .footer-copy__left{display:flex;align-items:center;flex-wrap:wrap;gap:18px;font-size:13px;} .footer-copy__left span{color:#fff;} .footer-copy__left a{color:var(--copy-link);font-size:13px;text-decoration:none;} .footer-copy__left a:hover{color:#fff;} .footer-copy__dot{color:var(--copy-dim);} .footer-copy__right{display:flex;align-items:center;gap:14px;} .footer-secure{display:flex;align-items:center;gap:6px;color:var(--copy-link);font-size:13px;} .footer-secure i{font-size:15px;} .footer-copy__right .sm-pay{gap:8px;} .footer-copy__right .pay-chip{height:26px;min-width:42px;border-radius:var(--pay-chip-r,4px);} /* mobile footer (hidden on desktop) */ .mfooter{display:none;background:var(--brand);color:#fff;padding:28px 16px 24px;flex-direction:column;gap:20px;} .mfooter__logo .custom-logo,.mfooter__logo img{height:28px;width:auto;display:block;filter:brightness(0) invert(1);} /* Same footer-logo rows on mobile: white chips (like the payment chips) so any artwork stays legible on the navy/brand background; no invert filter here. */ .mfooter__logos{display:flex;align-items:center;flex-wrap:wrap;gap:10px;} .mfooter__logos .footer-blogo{background:#fff;border-radius:8px;padding:6px 10px;} .mfooter__logos .footer-blogo img{height:24px;width:auto;display:block;} .mfooter__trust{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;} .mfooter__ti{display:flex;align-items:center;gap:9px;color:#fff;font-size:13px;line-height:18px;} .mfooter__ti i{font-size:20px;flex-shrink:0;} .mfooter__acc{display:flex;flex-direction:column;} .macc{border-bottom:1px solid rgba(255,255,255,.12);} .macc__head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 0;background:none;border:0;color:#fff;font-family:var(--font);font-size:15px;line-height:20px;text-align:left;cursor:pointer;} .macc__head i{font-size:18px;transition:transform .2s ease;flex-shrink:0;} .macc.is-open .macc__head i{transform:rotate(180deg);} .macc__panel{max-height:0;overflow:hidden;transition:max-height .25s ease;} .macc.is-open .macc__panel{max-height:600px;} .macc__panel ul{list-style:none;margin:0;padding:0 0 18px;display:flex;flex-direction:column;gap:13px;} .macc__panel a{color:var(--copy-link);font-size:14px;line-height:19px;text-decoration:none;} .mfooter__contact{display:flex;flex-direction:column;gap:13px;} .mfooter__cr{display:flex;align-items:center;gap:10px;color:#fff;font-size:14px;text-decoration:none;} .mfooter__cr i{font-size:18px;flex-shrink:0;} .mfooter .sm-pay{gap:8px;flex-wrap:wrap;} .mfooter__copy{margin:0;color:#9fb6d6;font-size:12px;line-height:16px;text-align:center;} .mfooter__copy .up{text-transform:uppercase;} @media (max-width:1023px){ .shop-footer{display:none;} .mfooter{display:flex;} /* On single-product, the fixed sticky buy-bar (~74px) overlays the page bottom, hiding the footer payments/copyright. Reserve space so the whole footer clears it. env(safe-area-inset-bottom) covers iOS home-indicator. */ body.single-product .mfooter{padding-bottom:calc(94px + env(safe-area-inset-bottom, 0px));} } /* =========================================================================== * Off-canvas cart drawer (mini-cart) * ========================================================================= */ .sm-cd__ship{display:flex;flex-direction:column;gap:10px;padding:14px 20px;background:var(--cart-ship-bg);} .sm-cd__ship-row{display:flex;align-items:center;gap:9px;} .sm-cd__ship-row i{font-size:22px;color:var(--cart-ink);flex-shrink:0;} .sm-cd__ship-row p{margin:0;color:var(--cart-ink);font-size:14px;} .sm-cd__ship-row strong{font-weight:700;color:var(--cart-ship-hl);} .sm-cd__track{height:9px;border-radius:var(--cart-track-r,5px);background:var(--cart-track);overflow:hidden;} .sm-cd__bar{display:block;height:9px;border-radius:var(--cart-track-r,5px);background:var(--cart-bar);transition:width .3s ease;} .sm-cd__divider{height:1px;background:#eceff3;flex-shrink:0;} /* items */ .sm-cd__items{padding:6px 20px;} .sm-cd__item{display:flex;gap:14px;align-items:flex-start;padding:16px 0;} .sm-cd__thumb{width:76px;height:76px;border:1px solid #eceff3;border-radius:var(--cart-thumb-r);overflow:hidden;flex-shrink:0;} .sm-cd__thumb img{width:100%;height:100%;object-fit:cover;display:block;} .sm-cd__right{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:7px;} .sm-cd__trow{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;} .sm-cd__name{flex:1 1 0;min-width:0;color:var(--cart-ink);font-size:14px;line-height:1.25;text-decoration:none;} .sm-cd__name:hover{text-decoration:underline;} .sm-cd__rm{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:0;background:none;color:var(--muted);cursor:pointer;flex-shrink:0;} .sm-cd__rm:hover{color:var(--sale);} .sm-cd__rm i{font-size:16px;} .sm-cd__meta{color:var(--muted);font-size:13px;} .sm-cd__meta p{margin:0;} .sm-cd__brow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:2px;} .sm-cd__qty{display:flex;align-items:center;border:var(--cart-qty-border);border-radius:var(--cart-qty-r);} .sm-cd__step{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;background:none;color:var(--cart-ink);cursor:pointer;} .sm-cd__step i{font-size:16px;} .sm-cd__step:disabled{opacity:.4;cursor:default;} .sm-cd__n{box-sizing:border-box;display:block;width:38px;height:30px;padding:0;margin:0;border:0;background:none;text-align:center;color:var(--cart-ink);font-family:inherit;font-size:15px;font-weight:700;appearance:none;-webkit-appearance:none;border-radius:0;} .sm-cd__n:focus{outline:none;} .sm-cd__n::-webkit-outer-spin-button,.sm-cd__n::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;} .sm-cd__pr{display:flex;align-items:center;gap:7px;} .sm-cd__was{color:#8a93a0;font-size:13px;text-decoration:line-through;} .sm-cd__now{color:var(--cart-ink);font-size:17px;font-weight:700;} /* empty */ /* foot */ .sm-cd__club5{display:flex;align-items:center;gap:8px;} .sm-cd__club5-ic{width:22px;height:22px;display:block;flex-shrink:0;} .sm-cd__club5 p{margin:0;color:var(--cart-ink);font-size:13px;} .sm-cd__club5 strong{font-weight:700;} .sm-cd__trust{display:flex;align-items:center;gap:18px;padding:2px 0;} .sm-cd__trust span{display:flex;align-items:center;gap:6px;color:var(--cart-ink);font-size:12px;} .sm-cd__trust i{font-size:15px;} .sm-cd__cta{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;box-sizing:border-box;padding:15px;background:var(--cta);color:#fff;font-size:17px;font-weight:700;text-decoration:none;border-radius:var(--cart-cta-r);} .sm-cd__cta:hover{filter:brightness(.93);} .sm-cd__cta i{font-size:18px;} .sm-cd__sec{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--muted);font-size:12px;} .sm-cd__sec i{font-size:14px;} /* =========================================================================== * Checkout step bar (Figma 146:2): full-width white band under the storefront * header on checkout + order-received. Brand circle for done/active steps. * ========================================================================= */ .sm-costeps{background:var(--surface);border-bottom:1px solid var(--line);} .sm-costeps__inner{display:flex;align-items:center;justify-content:center;gap:16px;padding:18px 16px;} .sm-costeps__step{display:flex;align-items:center;gap:10px;text-decoration:none;} .sm-costeps__circ{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--line);color:var(--muted);font-size:13px;font-weight:700;} .sm-costeps__circ i{font-size:14px;} .sm-costeps__step.is-done .sm-costeps__circ,.sm-costeps__step.is-active .sm-costeps__circ{background:var(--brand);color:#fff;} .sm-costeps__lbl{font-size:14px;color:var(--muted);} .sm-costeps__step.is-done .sm-costeps__lbl{color:var(--heading);} .sm-costeps__step.is-active .sm-costeps__lbl{color:var(--heading);font-weight:700;} a.sm-costeps__step:hover .sm-costeps__lbl{text-decoration:underline;} .sm-costeps__line{width:56px;height:1px;background:#d8dee6;} @media (max-width:767px){ .sm-costeps__inner{gap:10px;padding:14px 12px;} .sm-costeps__line{width:20px;} .sm-costeps__lbl{font-size:12.5px;} } @media (max-width:480px){ .sm-costeps__step:not(.is-active) .sm-costeps__lbl{display:none;} .sm-costeps__line{width:14px;} } /* =========================================================================== * Mini cart - header hover dropdown (drawer retired v2.78.0, Figma 677:2). * Opens on hover (hover-capable devices) and flashes open for a few seconds * after an AJAX add-to-cart. Token-driven per brand. * ========================================================================= */ .hact-cartwrap{position:relative;display:flex;align-items:center;} .sm-mc{position:absolute;top:100%;right:0;padding-top:12px;width:368px;display:none;z-index:140;} @media (hover:hover){.hact-cartwrap:hover .sm-mc{display:block;}} .hact-cartwrap.is-open .sm-mc{display:block;} /* v2.97.0: while the header cart is scrolled out of view the dropdown pins to the viewport (same top-right corner) so add-to-cart feedback is visible from anywhere on the page. chrome.js toggles .is-pinned and sets the exact right offset (inline) to match the header anchor's edge. */ .hact-cartwrap.is-pinned .sm-mc{position:fixed;top:10px;right:16px;padding-top:0;z-index:1300;} .sm-mc__panel{display:flex;flex-direction:column;gap:12px;padding:18px;background:var(--surface);border:1px solid #eceff3;border-radius:var(--cart-panel-r);box-shadow:0 18px 40px -6px rgba(0,10,36,.18);} .sm-mc__head{display:flex;align-items:center;justify-content:space-between;gap:10px;} .sm-mc__title{margin:0;color:var(--cart-ink);font-size:16px;font-weight:700;} .sm-mc__count{margin:0;color:var(--muted);font-size:12.5px;} .sm-mc__items{display:flex;flex-direction:column;} .sm-mc__item{display:flex;gap:12px;align-items:flex-start;padding:10px 0;} .sm-mc__item + .sm-mc__item{border-top:1px solid #eceff3;} .sm-mc__thumb{width:56px;height:56px;border:1px solid #eceff3;border-radius:calc(var(--cart-thumb-r) * .8);overflow:hidden;flex-shrink:0;} .sm-mc__thumb img{width:100%;height:100%;object-fit:cover;display:block;} .sm-mc__right{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:4px;} .sm-mc__name{color:var(--cart-ink);font-size:13.5px;line-height:1.3;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .sm-mc__name:hover{text-decoration:underline;} .sm-mc__meta{color:var(--muted);font-size:12px;} .sm-mc__meta p{margin:0;} .sm-mc__pl{display:flex;align-items:center;gap:6px;} .sm-mc__q{color:var(--muted);font-size:12.5px;} .sm-mc__p{color:var(--cart-ink);font-size:14px;font-weight:700;} .sm-mc__more{margin:2px 0 0;color:var(--muted);font-size:12.5px;} .sm-mc__ship{display:flex;align-items:center;gap:8px;} .sm-mc__ship i{font-size:18px;color:var(--cart-ink);flex-shrink:0;} .sm-mc__ship p{margin:0;color:var(--cart-ink);font-size:12.5px;} .sm-mc__ship strong{font-weight:700;color:var(--cart-ship-hl);} .sm-mc__st{display:flex;align-items:center;justify-content:space-between;color:var(--cart-ink);font-weight:700;} .sm-mc__st span:first-child{font-size:14px;} .sm-mc__st-val{font-size:18px;} .sm-mc__cta{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;background:var(--cta);color:#fff;font-size:15px;font-weight:700;text-decoration:none;border-radius:var(--cart-cta-r);} .sm-mc__cta:hover{filter:brightness(.93);} .sm-mc__cta i{font-size:16px;} .sm-mc__view{display:flex;align-items:center;justify-content:center;padding:11px;border:1.5px solid var(--cta);color:var(--cta);font-size:14px;font-weight:700;text-decoration:none;border-radius:var(--cart-cta-r);} .sm-mc__view:hover{background:var(--cta);color:#fff;} .sm-mc__empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 6px;text-align:center;} .sm-mc__empty i{font-size:38px;color:#cbd5e1;} .sm-mc__empty p{margin:0;color:var(--muted);font-size:14px;} /* =========================================================================== * Cart page (Figma 676:2) - dedicated page that replaced the drawer. * Reuses the .sm-cd__* item / ship / summary anatomy, sized up for the page. * ========================================================================= */ .sm-cart{max-width:1440px;margin:0 auto;padding:26px 40px 64px;box-sizing:border-box;} #sm-cart-page.is-loading .sm-cart{opacity:.55;pointer-events:none;} .sm-cart__crumb{margin:0 0 16px;color:var(--muted);font-size:13px;display:flex;gap:8px;} .sm-cart__crumb a{color:var(--muted);text-decoration:none;} .sm-cart__crumb a:hover{text-decoration:underline;} .sm-cart__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 22px;} .sm-cart__title{margin:0;color:var(--cart-ink);font-size:30px;font-weight:700;} .sm-cart__count{margin:4px 0 0;color:var(--muted);font-size:14px;} .sm-cart__continue{color:var(--cta);font-size:14px;font-weight:700;text-decoration:none;} .sm-cart__continue:hover{text-decoration:underline;} .sm-cart__cols{display:flex;align-items:flex-start;gap:28px;} .sm-cart__left{flex:1 1 auto;min-width:0;} .sm-cart__rightcol{flex:0 0 400px;max-width:400px;} .sm-cart__card{background:var(--surface);border:1px solid #eceff3;border-radius:var(--card-radius);overflow:hidden;} .sm-cart .sm-cd__ship{padding:16px 24px;} .sm-cart .sm-cd__items{padding:4px 24px 0;} .sm-cart .sm-cd__item{padding:18px 0;gap:16px;} .sm-cart .sm-cd__thumb{width:96px;height:96px;} .sm-cart .sm-cd__name{font-size:15px;} .sm-cart .sm-cd__now{font-size:18px;} .sm-cart__coupon{padding:18px 24px 20px;} .sm-cart__couponform{display:flex;align-items:center;gap:12px;} .sm-cart__cpn{flex:1 1 auto;min-width:0;height:46px;border:1px solid #d8dee6;border-radius:var(--btn-radius);padding:0 14px;font-family:inherit;font-size:14px;color:var(--ink);background:#fff;box-sizing:border-box;} .sm-cart__cpn:focus{outline:2px solid var(--brand);outline-offset:-2px;} .sm-cart__apply{flex:0 0 auto;height:46px;padding:0 22px;border:1.5px solid var(--cta);border-radius:var(--btn-radius);background:none;color:var(--cta);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s ease,color .15s ease;} .sm-cart__apply:hover{background:var(--cta);color:#fff;} .sm-cart__chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 24px 18px;} .sm-cart__chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;background:var(--bg);border:1px solid var(--line);border-radius:calc(var(--btn-radius) * .7);color:var(--cart-ink);font-size:12.5px;font-weight:700;text-decoration:none;} .sm-cart__chip i{font-size:13px;color:var(--muted);} .sm-cart__chip:hover i{color:var(--sale);} .sm-cart__summary{display:flex;flex-direction:column;gap:13px;padding:24px;overflow:visible;} .sm-cart__sumtitle{margin:0;color:var(--cart-ink);font-size:18px;font-weight:700;} .sm-cart__row{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--cart-ink);font-size:14px;} .sm-cart__val{font-weight:700;} .sm-cart__neg{color:var(--sale);font-weight:700;} .sm-cart__mutedval{color:var(--muted);font-size:13px;} .sm-cart__row--total{font-weight:700;} .sm-cart__row--total > span:first-child{font-size:16px;} .sm-cart__totalval{font-size:22px;font-weight:700;} .sm-cart__tax{margin:-6px 0 0;color:var(--muted);font-size:12px;} @media (max-width:480px){ } /* =========================================================================== * Checkout (WooCommerce) - two-column layout styled to the design * ========================================================================= */ .woocommerce-checkout .site-main{background:#fff;} .sm-co__title{max-width:1440px;margin:0 auto;padding:28px 40px 4px;font-size:28px;color:var(--heading);font-weight:400;} .sm-co{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:32px;align-items:start;max-width:1440px;margin:0 auto;padding:16px 40px 44px;--co-field-radius:calc(var(--card-radius) * .5);} .sm-co__left{grid-column:1;display:flex;flex-direction:column;gap:18px;min-width:0;} /* Checkout step wizard: payment is its own step. The form class decides which group is visible; hidden inputs still POST, so one WC form serves both. */ .sm-co__stepgroup{display:flex;flex-direction:column;gap:18px;width:100%;} .sm-co.is-costep-1 [data-costep="2"]{display:none;} .sm-co.is-costep-2 [data-costep="1"]{display:none;} .sm-co.is-costep-1 #place_order,.sm-co.is-costep-1 .sm-co-terms{display:none;} .sm-co.is-costep-2 .sm-co-rev__next{display:none;} .sm-co-rev__next i{font-size:18px;} .sm-co__stepback{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;border:0;background:none;padding:0;margin:0 0 4px;color:var(--muted);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;} .sm-co__stepback:hover{color:var(--brand);} .sm-co__stepback i{font-size:16px;} .sm-costeps__step[data-step="details"].is-done{cursor:pointer;} .sm-co__right{grid-column:2;position:sticky;top:20px;} .sm-co > *:not(.sm-co__left):not(.sm-co__right){grid-column:1 / -1;} .sm-co__card{background:#fff;border:1px solid var(--line);border-radius:var(--card-radius);padding:22px 24px 24px;} .sm-co__card-title{margin:0 0 16px;font-size:18px;color:var(--heading);} .sm-co__sum-title{margin:0 0 14px;font-size:18px;font-weight:700;color:var(--heading);} /* hide WC default section headings + coupon toggle clutter */ .sm-co .woocommerce-billing-fields > h3, .sm-co .woocommerce-shipping-fields > h3, .sm-co .woocommerce-additional-fields > h3, .sm-co #ship-to-different-address{display:none;} /* fields — CSS grid pairs fields reliably (WC's own float/width:47% is ignored inside a grid, which flex could not reliably override). */ .sm-co .woocommerce-billing-fields__field-wrapper, .sm-co .woocommerce-shipping-fields__field-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;} .sm-co .form-row{display:flex;flex-direction:column;gap:7px;margin:0;min-width:0;float:none;grid-column:1 / -1;} .sm-co .form-row-first{grid-column:1;} .sm-co .form-row-last{grid-column:2;} .sm-co .form-row-wide{grid-column:1 / -1;} .sm-co label{font-size:13px;font-weight:700;color:var(--cart-ink);} .sm-co label .optional{display:none;} .sm-co .required{color:var(--sale);text-decoration:none;} .sm-co input.input-text, .sm-co select, .sm-co .select2-container .select2-selection--single{height:48px;border:1px solid #d8dee6;border-radius:var(--co-field-radius);padding:0 14px;font-family:var(--font);font-size:14px;color:var(--ink);background:#fff;width:100%;box-shadow:none;} .sm-co input.input-text::placeholder{color:var(--muted);} .sm-co input,.sm-co select,.sm-co textarea{box-sizing:border-box;} .sm-co select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px;cursor:pointer;} /* WooCommerce wraps each input in . That span is inline by default, so inputs (width:100% of the span) collapse to ~content width inside the grid cell. Force the wrapper to fill the cell. */ .sm-co .woocommerce-input-wrapper{display:block;width:100%;} .sm-co .select2-container .select2-selection--single{display:flex;align-items:center;} .sm-co .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:normal;padding:0;color:var(--ink);} .sm-co .select2-container--default .select2-selection--single .select2-selection__arrow{height:46px;} .sm-co input.input-text:focus,.sm-co select:focus{outline:0;border-color:var(--brand);} /* City + postcode must pair; address + country are full-width. WooCommerce's country locale resets these fields' classes to form-row-wide after our filter, so pin the grid columns by id (an id beats the class-based grid-column). */ .sm-co #billing_city_field{grid-column:1;} .sm-co #billing_postcode_field{grid-column:2;} .sm-co #billing_address_1_field, .sm-co #billing_country_field{grid-column:1 / -1;} /* Single selling-country: WooCommerce prints the country as static text + a hidden input (there is no dropdown to choose from). Box it to match the other fields. Covers both markups: text inside .woocommerce-input-wrapper, or a bare / if this WC build omits the wrapper. NOTE: this store sells to one country; if you enable multiple, the select2 dropdown here will need this wrapper box removed. */ .sm-co #billing_country_field .woocommerce-input-wrapper:not(:has(select)), .sm-co #billing_country_field > strong, .sm-co #billing_country_field > bdi{display:flex;align-items:center;min-height:48px;border:1px solid #d8dee6;border-radius:var(--co-field-radius);padding:0 14px;background:#fff;} .sm-co #billing_country_field .woocommerce-input-wrapper > *, .sm-co #billing_country_field > strong, .sm-co #billing_country_field > bdi{font-weight:400;font-size:14px;color:var(--ink);} .sm-co #billing_country_field input[type=hidden]{display:none;} /* radios as the design's pill */ .sm-co input[type=radio]{appearance:none;-webkit-appearance:none;width:22px;height:22px;min-width:22px;border:1.5px solid #c2c8d0;border-radius:11px;position:relative;margin:0;cursor:pointer;} .sm-co input[type=radio]:checked{border-color:var(--brand);} .sm-co input[type=radio]:checked::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--brand);} /* CLUB5 / login card */ .sm-co-club5{background:#fff;border:1px solid var(--brand);border-left-width:4px;border-radius:var(--card-radius);padding:22px 24px 24px;display:flex;flex-direction:column;gap:13px;} .sm-co-club5__login{display:flex;flex-direction:column;gap:13px;width:100%;} .sm-co-club5__login-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;} .sm-co-club5__lg{display:flex;align-items:center;gap:12px;} .sm-co-club5__lg > i{font-size:22px;color:var(--cart-ink);} .sm-co-club5__tb{display:flex;flex-direction:column;gap:3px;} .sm-co-club5__tb strong{font-size:15px;color:var(--cart-ink);} .sm-co-club5__tb span{font-size:13px;color:#39414e;line-height:18px;} .sm-co-club5__btn{display:flex;align-items:center;justify-content:center;height:44px;padding:0 24px;background:var(--cta);color:#fff;font-size:14px;font-weight:700;font-family:inherit;border:0;border-radius:var(--btn-radius);cursor:pointer;text-decoration:none;white-space:nowrap;} .sm-co-club5__btn:hover{filter:brightness(.93);} .sm-co-club5__toggle{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:40px;height:40px;padding:0;border:0;background:none;color:var(--cart-ink);cursor:pointer;} .sm-co-club5__toggle i{font-size:24px;line-height:1;transition:transform .2s ease;} .sm-co-club5__toggle[aria-expanded="true"] i{transform:rotate(180deg);} .sm-co-club5__or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;} .sm-co-club5__or span{flex:1;height:1px;background:var(--line);} .sm-co-club5__h{display:flex;align-items:center;gap:10px;} .sm-co-club5__ic{width:22px;height:22px;display:block;} .sm-co-club5__h strong{font-size:17px;color:var(--cart-ink);} .sm-co-club5__desc{margin:0;font-size:13px;line-height:1.5;color:#39414e;} .sm-co-club5__row{display:flex;gap:10px;} .sm-co-club5__input{flex:1;height:48px;border:1px solid #d8dee6;border-radius:var(--co-field-radius);padding:0 14px;font-family:var(--font);font-size:14px;color:var(--ink);} .sm-co-club5__input::placeholder{color:var(--muted);} .sm-co-club5__apply{height:48px;width:110px;border:0;border-radius:var(--btn-radius);background:var(--cta);color:#fff;font-size:14px;font-weight:700;cursor:pointer;} .sm-co-club5__apply:hover{filter:brightness(.93);} /* shipping + payment option cards */ .sm-co .woocommerce-shipping-fields,.sm-co .woocommerce-additional-fields{margin-top:8px;} .sm-co #shipping_method,.sm-co .wc_payment_methods{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;} .sm-co #shipping_method li,.sm-co .wc_payment_method{position:relative;border:1px solid var(--line);padding:14px 16px;display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin:0;} .sm-co #shipping_method li:has(input:checked), .sm-co .wc_payment_method:has(input:checked){border-color:var(--brand);border-width:1.5px;} .sm-co #shipping_method label,.sm-co .wc_payment_method > label{font-weight:700;font-size:15px;color:var(--cart-ink);margin:0;display:inline-flex;align-items:center;gap:8px;flex:1;cursor:pointer;} .sm-co .wc_payment_method .payment_box{flex:0 0 100%;margin:8px 0 0;padding:0;background:none;font-size:13px;color:var(--muted);} .sm-co .wc_payment_method .payment_box::before{display:none;} .sm-co .wc_payment_method img{max-height:24px;width:auto;margin-left:auto;} /* order review (summary) */ .sm-co__right .woocommerce-checkout-review-order-table, .sm-co__right .woocommerce-checkout-review-order-table tbody, .sm-co__right .woocommerce-checkout-review-order-table tfoot, .sm-co__right .woocommerce-checkout-review-order-table tr, .sm-co__right .woocommerce-checkout-review-order-table td, .sm-co__right .woocommerce-checkout-review-order-table th{display:block;width:auto;border:0;padding:0;text-align:left;} .sm-co__right .cart_item{overflow:hidden;padding:14px 0;border-bottom:1px solid #eceff3;} .sm-co-rev__thumb{float:left;margin-right:12px;} .sm-co-rev__thumb img{width:72px;height:72px;border-radius:var(--cart-thumb-r,10px);object-fit:cover;display:block;} .sm-co__right .cart_item .product-name{font-size:14px;font-weight:700;color:var(--cart-ink);line-height:1.3;} .sm-co__right .cart_item .product-quantity, .sm-co__right .cart_item .variation{font-size:12px;font-weight:400;color:var(--muted);} .sm-co__right .cart_item .variation{margin:4px 0 0;} .sm-co__right .cart_item .product-total{margin-top:4px;font-size:14px;font-weight:700;color:var(--cart-ink);} .sm-co__right .cart-subtotal, .sm-co__right .woocommerce-shipping-totals, .sm-co__right .order-total{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:14px;color:var(--cart-ink);} .sm-co__right .cart-subtotal th,.sm-co__right .order-total th{font-weight:400;} .sm-co__right .woocommerce-shipping-totals .amount{color:var(--success);font-weight:700;} .sm-co__right .order-total{border-top:1px solid #eceff3;margin-top:6px;padding-top:14px;padding-bottom:16px;font-weight:700;} .sm-co__right .order-total th{font-size:16px;} .sm-co__right .order-total .amount{font-size:22px;} #place_order{width:100%;height:54px;margin-top:6px;border:0;border-radius:var(--btn-radius);background:var(--cta);color:#fff;font-family:var(--font);font-size:17px;font-weight:700;cursor:pointer;} #place_order:hover{filter:brightness(.93);} .sm-co-rev__sec{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;color:var(--muted);font-size:12px;} .sm-co-rev__sec i{font-size:14px;} .sm-co-rev__trust{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:8px;} .sm-co-rev__trust span{display:flex;align-items:center;gap:6px;color:var(--cart-ink);font-size:12px;} .sm-co-rev__trust i{font-size:14px;} /* coupon toggle (kept functional, slimmed) */ .woocommerce-checkout .woocommerce-form-coupon-toggle{max-width:1440px;margin:0 auto;padding:0 40px;} .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{background:var(--brand-tint);border-top-color:var(--brand);} @media (max-width:1023px){ .sm-co{grid-template-columns:1fr;gap:12px;padding:8px 16px 28px;} .sm-co__left,.sm-co__right{grid-column:1;} .sm-co__right{position:static;} .sm-co__title{padding:8px 16px 4px;} } /* ---- checkout summary refinements (override generic table-block rules) ---- */ .sm-co__right table.shop_table thead{display:none;} .sm-co__right table.shop_table tbody tr.cart_item{display:block;overflow:hidden;padding:14px 0;border-bottom:1px solid #eceff3;} .sm-co__right table.shop_table tbody td.product-name{display:block;font-size:14px;color:var(--cart-ink);font-weight:700;line-height:1.3;} .sm-co__right table.shop_table tbody td.product-name .product-quantity, .sm-co__right table.shop_table tbody td.product-name .variation{font-weight:400;color:var(--muted);font-size:12px;} .sm-co__right table.shop_table tbody td.product-total{display:block;text-align:left;margin-top:4px;font-weight:700;font-size:14px;color:var(--cart-ink);} .sm-co__right table.shop_table tfoot tr{display:flex;align-items:center;justify-content:space-between;padding:8px 0;} .sm-co__right table.shop_table tfoot th{font-weight:400;font-size:14px;color:var(--cart-ink);} .sm-co__right table.shop_table tfoot td{font-weight:700;font-size:14px;color:var(--cart-ink);text-align:right;} .sm-co__right table.shop_table tfoot tr.woocommerce-shipping-totals td{color:var(--success);} .sm-co__right table.shop_table tfoot tr.order-total{border-top:1px solid #eceff3;margin-top:6px;padding-top:14px;padding-bottom:16px;} .sm-co__right table.shop_table tfoot tr.order-total th{font-size:16px;font-weight:700;} .sm-co__right table.shop_table tfoot tr.order-total td{font-size:22px;font-weight:700;} .sm-co__right table.shop_table tfoot tr.order-total td .amount{font-size:22px;font-weight:700;} /* =========================================================================== * Checkout v2 - shipping + payment as LEFT cards, summary + CTA on the RIGHT * ========================================================================= */ /* left shipping card */ .sm-co-ship{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;} .sm-co-ship__opt{position:relative;border:1px solid var(--line);padding:13px 16px;display:flex;align-items:center;gap:13px;margin:0;} .sm-co-ship__opt:has(input:checked){border-color:var(--brand);border-width:1.5px;} .sm-co-ship__label{flex:1;margin:0;font-weight:700;font-size:15px;color:var(--cart-ink);cursor:pointer;} .sm-co-ship__sub{display:block;margin-top:2px;font-weight:400;font-size:13px;color:var(--muted);} .sm-co-ship__pr{font-weight:700;font-size:15px;color:var(--cart-ink);white-space:nowrap;} .sm-co-ship__free{color:var(--success);} .sm-co-ship__none{margin:0;font-size:14px;color:var(--muted);} /* payment card lives in the left column now; methods already styled via .sm-co .wc_payment_method */ .sm-co__card--pay #payment{background:none;} .sm-co__card--pay .wc_payment_methods{margin:0;} /* payment-method icon (prepended to the gateway label) */ .sm-co-pay__ic{flex:0 0 auto;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;color:var(--cart-ink);} .sm-co-pay__ic svg{width:22px;height:22px;display:block;} .sm-co-pay__label{flex:1;min-width:0;} /* label already has gap:8px; the icon + label sit inline with the radio */ /* custom summary table */ .sm-co-sum{display:block;width:100%;border:0;margin:0;} .sm-co-sum tbody,.sm-co-sum tfoot{display:block;} .sm-co-sum tr{display:block;} .sm-co-sum th,.sm-co-sum td{display:block;padding:0;border:0;background:none;text-align:left;} .sm-co-sum tr.cart_item{padding:14px 0;border-bottom:1px solid #eceff3;} .sm-co-sum td.sm-co-sum__cell{display:flex;gap:12px;align-items:flex-start;} .sm-co-sum__thumb img{width:72px;height:72px;border-radius:var(--cart-thumb-r,10px);object-fit:cover;display:block;} .sm-co-sum__rt{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;} .sm-co-sum__r1{display:flex;justify-content:space-between;gap:8px;font-weight:700;font-size:14px;color:var(--cart-ink);line-height:1.3;} .sm-co-sum__nm{flex:1;min-width:0;} .sm-co-sum__nm-lnk{color:inherit;text-decoration:none;} .sm-co-sum__nm-lnk:hover{text-decoration:underline;} .sm-co-sum__pr{white-space:nowrap;display:inline-flex;flex-direction:column;align-items:flex-end;gap:1px;} .sm-co-sum__pr-now{font-weight:700;} .sm-co-sum__meta{font-size:12px;color:var(--muted);} .sm-co-sum__qty{display:block;color:var(--muted);font-size:12px;} .sm-co-sum tr.sm-co-sum__tax{display:flex;margin-top:-6px;padding:0 0 8px;} .sm-co-sum__tax td{padding-top:0;color:var(--muted);font-size:12px;} .sm-co-sum__meta p{margin:0;} .sm-co-sum tr.sm-co-sum__coupon-row{padding:14px 0;border-bottom:1px solid #eceff3;} .sm-co-sum__coupon{display:flex;gap:10px;} .sm-co-sum__coupon-in{flex:1;height:46px;border:1px solid #d8dee6;border-radius:var(--co-field-radius);padding:0 14px;font-family:var(--font);font-size:14px;color:var(--ink);} .sm-co-sum__coupon-in::placeholder{color:var(--muted);} .sm-co-sum__coupon-btn{height:46px;width:100px;border:0;border-radius:var(--btn-radius);background:var(--cta);color:#fff;font-size:14px;font-weight:700;cursor:pointer;} .sm-co-sum__coupon-btn:hover{filter:brightness(.93);} .sm-co-sum__applied{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:13px;color:var(--cart-ink);} .sm-co-sum__rmcoupon{color:var(--sale);text-decoration:none;font-size:18px;line-height:1;} .sm-co-sum tr.sm-co-sum__line{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:14px;color:var(--cart-ink);} .sm-co-sum tr.sm-co-sum__line th{font-weight:400;} .sm-co-sum tr.sm-co-sum__line td{font-weight:700;} .sm-co-sum__ship .sm-co-sum__free{color:var(--success);} .sm-co-sum tr.sm-co-sum__save td{color:var(--sale);} .sm-co-sum tr.sm-co-sum__total{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #eceff3;margin-top:6px;padding-top:14px;padding-bottom:16px;font-weight:700;color:var(--cart-ink);} .sm-co-sum tr.sm-co-sum__total th{font-size:16px;} .sm-co-sum tr.sm-co-sum__total td{font-size:22px;} .sm-co-sum tr.sm-co-sum__club5-row{padding:16px 0;} .sm-co-sum__club5{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--cart-ink);} .sm-co-sum__club5 img{width:22px;height:22px;} /* place-order CTA in the summary */ .sm-co-rev__place{margin:22px 0 0;padding:0;} /* Shared CTA recipe for both checkout buttons: the step-1 "Vazhdo te pagesa" wizard button and the real #place_order submit (whose ID rules below keep winning with the same values). Wizard button carries no Woo .button class, so WooCommerce's grey button skin can never take it over. */ .sm-co-rev__cta{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:54px;margin:0;border:0;border-radius:var(--btn-radius);background:var(--cta);color:#fff;font-family:var(--font);font-size:17px;font-weight:700;cursor:pointer;} .sm-co-rev__cta:hover{filter:brightness(.93);} .sm-co-rev__place .woocommerce-terms-and-conditions-wrapper{margin-bottom:12px;font-size:13px;color:var(--muted);} #place_order{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:54px;margin:0;border:0;border-radius:var(--btn-radius);background:var(--cta);color:#fff;font-family:var(--font);font-size:17px;font-weight:700;cursor:pointer;} #place_order i{font-size:16px;} #place_order:hover{filter:brightness(.93);} /* ---- checkout fixes: summary border, radios, Apliko centering ---- */ .sm-co__sum-card{background:#fff;border:1px solid var(--line);border-radius:var(--card-radius);padding:22px 22px 24px;} .sm-co__sum-title{margin:0;font-size:18px;font-weight:700;color:var(--heading);} .sm-co__sum-rule{height:1px;background:#eceff3;margin:14px 0;} .sm-co__right #order_review{margin:0;} /* radio: thin ring + small centered dot (matches the Figma option control) */ .sm-co input[type=radio]{appearance:none;-webkit-appearance:none;width:22px;height:22px;min-width:22px;border:1.5px solid #c2c8d0;border-radius:50%;position:relative;margin:0;padding:0;cursor:pointer;background:#fff;box-shadow:none;} .sm-co input[type=radio]:checked{border-color:var(--brand);} .sm-co input[type=radio]:checked::after{content:"";position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;background:var(--brand);transform:translate(-50%,-50%);} /* centre the Apliko labels (theme button base was left-aligning them) */ .sm-co-club5__apply, .sm-co-sum__coupon-btn{display:flex;align-items:center;justify-content:center;text-align:center;padding:0;line-height:1;} /* Bricks wraps content in #brx-content (width:1100px); let checkout use the full 1440 */ .woocommerce-checkout #brx-content, .woocommerce-checkout #brx-content.wordpress{width:100%;max-width:100%;} /* ── Method cards: exact match to Figma node 147:51 ────────────────────── Outer card keeps its 1px #e5e7eb border + white bg (same as the details card); inside, each option is its own bordered box. Selected = 1.5px navy + sky fill; unselected = 1px #e5e7eb + white. Two borders is the design. */ .sm-co__card.sm-co__card--pay, .sm-co__card.sm-co__card--ship{border:1px solid var(--line);background:#fff;border-radius:var(--card-radius);padding:24px 26px 26px;} .sm-co__card--pay #payment, .sm-co__card--pay #payment .woocommerce-checkout-payment, .sm-co__card--pay ul.wc_payment_methods, .sm-co__card--pay ul.payment_methods{border:0;background:none;box-shadow:none;margin:0;padding:0;} /* option rows */ .sm-co #shipping_method,.sm-co .wc_payment_methods{gap:16px;} .sm-co #shipping_method li, .sm-co .wc_payment_method, .sm-co-ship__opt{border:1px solid var(--line);background:#fff;border-radius:var(--btn-radius);padding:15px 18px;gap:13px;} .sm-co #shipping_method li:has(input:checked), .sm-co .wc_payment_method:has(input:checked), .sm-co-ship__opt:has(input:checked){border:1.5px solid var(--brand);} /* ── Checkout: login dropdown panel (CLUB5 card) ────────────────────────── */ .sm-co-login__panel{display:flex;flex-direction:column;gap:14px;width:100%;} .sm-co-login__panel[hidden]{display:none;} .sm-co-login__fields{display:flex;gap:16px;} .sm-co-login__field{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:7px;} .sm-co-login__field label{font-size:13px;font-weight:700;color:var(--cart-ink);} .sm-co-login__input{height:48px;width:100%;border:1px solid #d8dee6;border-radius:var(--co-field-radius);background:#fff;padding:0 14px;font-size:14px;font-family:inherit;color:var(--ink);} .sm-co-login__input:focus{outline:none;border-color:var(--brand);} .sm-co-login__action{display:flex;align-items:center;justify-content:space-between;gap:12px;} .sm-co-login__forgot{font-size:13px;color:var(--sky-accent);text-decoration:none;} .sm-co-login__forgot:hover{text-decoration:underline;} .sm-co-login__feedback{font-size:13px;} .sm-co-login__feedback[hidden]{display:none;} .sm-co-login__feedback.is-error{color:var(--sale);} .sm-co-login__feedback.is-success{color:var(--success);} /* ── Checkout: accept-terms row ─────────────────────────────────────────── */ .sm-co-terms{display:flex;flex-direction:column;gap:14px;width:100%;} .sm-co-terms__hr{height:1px;width:100%;background:var(--line);} .sm-co-terms__row{display:flex;align-items:flex-start;gap:10px;width:100%;} .sm-co input[type=checkbox].sm-co-terms__cb{appearance:none;-webkit-appearance:none;box-sizing:border-box;flex:0 0 20px;width:20px;height:20px;min-width:20px;margin:1px 0 0;padding:0;border:1.5px solid var(--brand);border-radius:4px;background:#fff;cursor:pointer;position:relative;box-shadow:none;} .sm-co input[type=checkbox].sm-co-terms__cb:checked{background-color:var(--brand);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:13px 13px;} .sm-co label.sm-co-terms__txt{flex:1 1 0;min-width:0;font-size:14px;font-weight:400;line-height:1.45;color:var(--ink);cursor:pointer;} .sm-co-terms__txt a{color:var(--sky-accent);font-weight:400;text-decoration:underline;} /* ── Checkout: account-creation block (WC "Create an account?" + password) ── */ .sm-co .woocommerce-account-fields, .sm-co .create-account{margin-top:8px;width:100%;} .sm-co label.woocommerce-form__label-for-checkbox{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;color:var(--cart-ink);cursor:pointer;margin:0 0 6px;} .sm-co input[type=checkbox].input-checkbox{appearance:none;-webkit-appearance:none;box-sizing:border-box;flex:0 0 20px;width:20px;height:20px;min-width:20px;margin:0;padding:0;border:1.5px solid var(--brand);border-radius:4px;background:#fff;cursor:pointer;position:relative;box-shadow:none;} .sm-co input[type=checkbox].input-checkbox:checked{background-color:var(--brand);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:13px 13px;} .sm-co .create-account .form-row{margin:0;} /* ── Checkout: mobile back link ─────────────────────────────────────────── */ /* Empty-cart checkout state (Figma 653:2). Brand-tokenised: navy on Dormeo, red on TOP SHOP, orange on Delimano, charcoal on Rovus. */ .sm-co-empty{display:flex;align-items:flex-start;justify-content:center;width:100%;min-height:60vh;padding:56px 24px;box-sizing:border-box;background:var(--bg);} .sm-co-empty__stack{width:100%;max-width:1440px;padding:0 40px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:8px;} .sm-co-empty__card{width:560px;max-width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:22px;background:#fff;border:1px solid var(--line);border-radius:var(--card-radius);padding:48px 56px;text-align:center;} .sm-co-empty__icon{width:96px;height:96px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:var(--brand-tint);border-radius:50%;color:var(--brand);} .sm-co-empty__icon i{font-size:44px;line-height:1;} .sm-co-empty__icon svg{width:100%;height:100%;display:block;} .sm-co-empty__title{margin:0;font-size:28px;line-height:1.2;color:var(--brand);} .sm-co-empty__sub{margin:0;max-width:400px;font-size:15px;line-height:1.55;color:var(--muted);} .sm-co-empty__actions{display:flex;gap:12px;align-items:center;justify-content:center;padding-top:6px;flex-wrap:wrap;} .sm-co-empty__btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 24px;font-weight:700;font-size:15px;line-height:1;text-decoration:none;border-radius:var(--btn-radius);transition:background .15s ease,color .15s ease,opacity .15s ease;} .sm-co-empty__btn--primary{background:var(--brand);color:#fff;border:1.5px solid var(--brand);} .sm-co-empty__btn--primary:hover{background:var(--brand-700,var(--brand));opacity:.96;} .sm-co-empty__btn--ghost{background:#fff;color:var(--brand);border:1.5px solid var(--brand);} .sm-co-empty__btn--ghost:hover{background:var(--brand-tint);} @media(max-width:600px){ .sm-co-empty{padding:32px 16px;} .sm-co-empty__card{padding:36px 24px;gap:18px;} .sm-co-empty__title{font-size:23px;} .sm-co-empty__btn{flex:1 1 auto;} } @media (max-width:767px){ .sm-co-login__fields{flex-direction:column;} .sm-co-club5__login-row .sm-co-club5__tb span{display:none;} } /* ═══ Account / Login (Figma 153:2 desktop, 430:2 mobile) ═════════════════ */ .sm-auth{display:flex;justify-content:center;align-items:flex-start;background:var(--bg);padding:56px 16px;text-align:left;} .sm-auth__card{width:480px;max-width:100%;box-sizing:border-box;border:1px solid var(--line);background:#fff;padding:44px 48px;display:flex;flex-direction:column;gap:16px;border-radius:var(--card-radius);} /* neutralize WooCommerce's default form.login / form.register framing + theme centering */ .woocommerce .sm-auth form.login, .woocommerce .sm-auth form.register, .sm-auth .sm-auth__form{border:0;padding:0;margin:0;border-radius:0;background:none;box-shadow:none;width:100%;text-align:left;} .sm-auth .sm-auth__field label, .sm-auth .sm-auth__input input{text-align:left;} .sm-auth__tabs{display:flex;width:100%;} .sm-auth__tab{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;padding:4px 0 13px;border:0;border-bottom:1px solid var(--line);background:none;font-family:inherit;font-size:15px;color:var(--muted);cursor:pointer;} .sm-auth__tab.is-active{color:var(--brand);font-weight:700;border-bottom-color:var(--brand);} .sm-auth__panel{display:flex;flex-direction:column;gap:16px;width:100%;} .sm-auth__panel[hidden]{display:none;} .sm-auth__form{display:flex;flex-direction:column;gap:16px;width:100%;} .sm-auth__hg{display:flex;flex-direction:column;gap:5px;width:100%;} .sm-auth__title{margin:0;font-size:24px;font-weight:400;line-height:normal;color:var(--heading);} .sm-auth__sub{margin:0;font-size:14px;color:var(--muted);} .sm-auth__field{display:flex;flex-direction:column;gap:7px;width:100%;} .sm-auth__field label{font-size:13px;font-weight:700;color:var(--cart-ink);} .sm-auth__input{display:flex;align-items:center;gap:10px;height:48px;border:1px solid #d8dee6;background:#fff;border-radius:calc(var(--card-radius) * .5);padding:0 14px;width:100%;box-sizing:border-box;} .sm-auth__input input{flex:1 1 0;min-width:0;height:100%;margin:0;padding:0;border:0;outline:none;background:none;box-shadow:none;font-family:inherit;font-size:14px;color:var(--ink);} .sm-auth__input input:focus{outline:none;box-shadow:none;} .sm-auth__input input::placeholder{color:var(--muted);} .sm-auth__input--pw:focus-within,.sm-auth__input:focus-within{border-color:var(--brand);} .sm-auth__eye{display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:0;border:0;background:none;color:var(--muted);cursor:pointer;} .sm-auth__eye i{font-size:20px;line-height:1;} .sm-auth__rf{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;} .sm-auth__remember{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--cart-ink);cursor:pointer;} .sm-auth input[type=checkbox].sm-auth__cb{appearance:none;-webkit-appearance:none;box-sizing:border-box;flex:0 0 20px;width:20px;height:20px;min-width:20px;margin:0;padding:0;border:1.5px solid #c2c8d0;border-radius:4px;background:#fff;cursor:pointer;box-shadow:none;} .sm-auth input[type=checkbox].sm-auth__cb:checked{border-color:var(--brand);background-color:var(--brand);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:13px 13px;} .sm-auth__forgot{font-size:13px;font-weight:700;color:var(--sky-accent);text-decoration:none;white-space:nowrap;} .sm-auth__forgot:hover{text-decoration:underline;} .sm-auth__btn{display:flex;align-items:center;justify-content:center;width:100%;height:52px;border:0;border-radius:var(--btn-radius);background:var(--cta);color:#fff;font-family:inherit;font-size:16px;font-weight:700;cursor:pointer;text-decoration:none;} .sm-auth__btn:hover{filter:brightness(.93);} /* Lost-password confirmation ("check your email"): brand-tinted mail chip above the heading; the rest reuses the standard card anatomy. */ .sm-auth__mail{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--brand-tint);color:var(--brand);margin-bottom:4px;} .sm-auth__mail i{font-size:26px;line-height:1;} .sm-auth__bot{display:flex;align-items:center;justify-content:center;gap:6px;margin:0;font-size:14px;color:var(--muted);} .sm-auth__link{padding:0;border:0;background:none;font-family:inherit;font-size:14px;font-weight:700;color:var(--sky-accent);cursor:pointer;text-decoration:none;} .sm-auth__link:hover{text-decoration:underline;} /* register: two-up name row, CLUB5 accent box, terms */ .sm-auth__row{display:flex;gap:14px;width:100%;} .sm-auth__row .sm-auth__field{flex:1 1 0;min-width:0;} .sm-auth__club5{display:flex;flex-direction:column;gap:9px;width:100%;box-sizing:border-box;border:1px solid var(--brand);border-left-width:4px;background:#fff;padding:14px 15px;border-radius:var(--card-radius);} .sm-auth__club5-hd{display:flex;align-items:center;gap:9px;} .sm-auth__club5-ic{display:block;width:22px;height:22px;} .sm-auth__club5-hd strong{font-size:14px;color:var(--heading);} .sm-auth__club5-desc{margin:0;font-size:12px;line-height:1.42;color:#39414e;} .sm-auth__terms{display:flex;align-items:flex-start;gap:10px;width:100%;} .sm-auth__terms-txt{flex:1 1 0;min-width:0;font-size:13px;font-weight:400;line-height:1.45;color:#39414e;cursor:pointer;} .sm-auth__terms-txt a{color:var(--sky-accent);text-decoration:underline;} @media (max-width:767px){ .sm-auth{padding:24px 16px 28px;} .sm-auth__card{padding:28px 20px;gap:14px;box-shadow:0 2px 12px rgba(0,0,0,.06);} } /* ===== Header hover dropdowns (CLUB5 + account) ===== */ .hmenu{position:relative;display:inline-flex;align-items:center;} .hmenu__panel{position:absolute;top:100%;right:0;z-index:1300;padding-top:10px;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .14s ease,transform .14s ease,visibility .14s ease;pointer-events:none;} .hmenu:hover .hmenu__panel,.hmenu:focus-within .hmenu__panel{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;} .hmenu:hover .hact__caret{transform:rotate(180deg);} /* ═══════════════════ MY ACCOUNT (Figma 613:2) ═══════════════════ */ .woocommerce-account #site-main{background:var(--bg);} .woocommerce-account .woocommerce{max-width:1440px;margin:0 auto;padding:28px 40px 56px;box-sizing:border-box;} .sm-acct__title{margin:0 0 24px;font-size:28px;font-weight:400;color:var(--heading);} .sm-acct{display:flex;align-items:flex-start;gap:32px;} /* nav sidebar card */ .woocommerce-MyAccount-navigation{flex:0 0 260px;width:260px;box-sizing:border-box;background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:10px;} .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;} .woocommerce-MyAccount-navigation li{margin:0;} .woocommerce-MyAccount-navigation li a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:calc(var(--card-radius) * .5);font-size:14px;color:var(--cart-ink);text-decoration:none;transition:background .12s ease;} .woocommerce-MyAccount-navigation li a i{font-size:19px;flex-shrink:0;line-height:1;} .woocommerce-MyAccount-navigation li a:hover{background:var(--bg);} .woocommerce-MyAccount-navigation li.is-active a{background:var(--brand);color:#fff;font-weight:700;} /* content column */ .woocommerce-MyAccount-content{flex:1;min-width:0;} .woocommerce-MyAccount-content > p{margin:0 0 14px;font-size:15px;line-height:1.6;color:var(--ink);} .woocommerce-MyAccount-content a:not(.button):not(.sm-acct-dash__card){color:var(--sky-accent);} /* dashboard */ .sm-acct-dash{display:flex;flex-direction:column;gap:18px;} .sm-acct-dash__greet{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:22px 24px 24px;} .sm-acct-dash__hi{margin:0 0 8px;font-size:20px;font-weight:700;color:var(--heading);} .sm-acct-dash__intro{margin:0;font-size:14px;line-height:1.55;color:var(--muted);} .sm-acct-dash__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} .sm-acct-dash__card{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:20px 20px 22px;text-decoration:none;transition:box-shadow .15s ease,border-color .15s ease;} .sm-acct-dash__card:hover{border-color:var(--brand);box-shadow:0 6px 20px -2px rgba(0,15,46,.08);} .sm-acct-dash__ic{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--brand-tint);border-radius:8px;} .sm-acct-dash__ic i{font-size:22px;color:var(--brand);} .sm-acct-dash__ct{font-size:16px;font-weight:700;color:var(--heading);} .sm-acct-dash__cs{font-size:13px;color:var(--muted);} /* orders table — restrained, summary-style. Header is a light strip with muted labels (NOT --heading, which is brand-red on TOP SHOP / brand-orange on Delimano and reads wrong on a data table). Status renders as a tinted pill coloured by state (see the orders.php template override + status rules). */ .woocommerce-orders-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);overflow:hidden;} .woocommerce-orders-table thead th{text-align:left;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);background:var(--bg);padding:14px 16px;border-bottom:1px solid var(--line);} .woocommerce-orders-table tbody td{padding:16px;font-size:14px;color:var(--ink);border-bottom:1px solid #eceff3;vertical-align:middle;} .woocommerce-orders-table tbody tr:last-child td{border-bottom:0;} .woocommerce-orders-table tbody tr:hover td{background:#fafbfc;} .woocommerce-orders-table td.woocommerce-orders-table__cell-order-number a{color:var(--sky-accent);font-weight:700;text-decoration:none;} .woocommerce-orders-table td.woocommerce-orders-table__cell-order-number a:hover{text-decoration:underline;} .woocommerce-orders-table td.woocommerce-orders-table__cell-order-total{font-weight:700;color:var(--heading);white-space:nowrap;} .woocommerce-orders-table th.woocommerce-orders-table__header-order-actions, .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions{text-align:right;} /* status pill — tinted by order state (classes added in the orders.php override) */ .woocommerce-orders-table .sm-ostatus{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12.5px;font-weight:700;line-height:1.5;white-space:nowrap;background:var(--brand-tint);color:var(--heading);} .woocommerce-orders-table .sm-ostatus--processing, .woocommerce-orders-table .sm-ostatus--on-hold, .woocommerce-orders-table .sm-ostatus--pending{background:#fff4e0;color:#a2670a;} .woocommerce-orders-table .sm-ostatus--completed{background:#e6f6ec;color:var(--success);} .woocommerce-orders-table .sm-ostatus--cancelled, .woocommerce-orders-table .sm-ostatus--failed{background:#fdecec;color:var(--sale);} .woocommerce-orders-table .sm-ostatus--refunded{background:#eef1f5;color:var(--muted);} /* buttons */ .woocommerce-MyAccount-content .button,.woocommerce-MyAccount-content button[type=submit],.woocommerce-Address .button{display:inline-flex;align-items:center;justify-content:center;background:var(--brand);color:#fff;border:0;border-radius:var(--btn-radius);padding:11px 22px;font-family:var(--font);font-size:14px;font-weight:700;text-decoration:none;cursor:pointer;transition:filter .15s ease;} .woocommerce-MyAccount-content .button:hover,.woocommerce-MyAccount-content button[type=submit]:hover{filter:brightness(.95);} .woocommerce-orders-table .button{padding:8px 18px;font-size:13px;} .woocommerce-pagination .button{background:var(--surface);color:var(--brand);border:1px solid var(--brand);} /* addresses */ .woocommerce-Addresses{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:6px;} .woocommerce-Address{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:24px;} .woocommerce-Address-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;} .woocommerce-Address-title h2,.woocommerce-Address-title h3{margin:0;font-size:18px;font-weight:700;color:var(--heading);} .woocommerce-Address-title a{font-size:13px;color:var(--sky-accent);text-decoration:none;} .woocommerce-Address address{font-style:normal;font-size:14px;line-height:1.7;color:var(--ink);} /* forms (account details / edit address) — checkout field styling */ .woocommerce-EditAccountForm,.woocommerce-address-fields{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:26px;max-width:760px;} .woocommerce-MyAccount-content .woocommerce-form-row,.woocommerce-address-fields .form-row{display:flex;flex-direction:column;gap:7px;margin:0 0 16px;} .woocommerce-MyAccount-content .woocommerce-form-row label,.woocommerce-address-fields .form-row label{font-size:13px;font-weight:700;color:var(--cart-ink);} .sm-club5-lbl{display:inline-flex;align-items:center;gap:7px;} .sm-club5-lbl .sm-club5-lbl__star{width:17px;height:17px;flex-shrink:0;background:var(--brand);} /* CLUB5 code: masked by default; eye toggle + copy pinned to the right edge. */ .sm-club5-code{position:relative;display:block;} .sm-club5-code__input{padding-right:88px !important;letter-spacing:.06em;} .sm-club5-code__btns{position:absolute;top:0;right:6px;bottom:0;display:flex;align-items:center;gap:2px;} .sm-club5-code__btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:0;border-radius:8px;background:none;color:var(--muted);font-size:19px;line-height:1;cursor:pointer;transition:color .15s ease,background .15s ease;} .sm-club5-code__btn:hover{color:var(--brand);background:var(--brand-tint);} .sm-club5-code__btn i{font-size:19px;line-height:1;display:block;} .sm-club5-code__btn.is-copied{color:var(--success);} .woocommerce-MyAccount-content input.input-text,.woocommerce-MyAccount-content input[type=text],.woocommerce-MyAccount-content input[type=email],.woocommerce-MyAccount-content input[type=password],.woocommerce-MyAccount-content input[type=tel],.woocommerce-address-fields input.input-text,.woocommerce-address-fields input[type=text],.woocommerce-address-fields input[type=email],.woocommerce-address-fields input[type=tel],.woocommerce-address-fields select{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;width:100%;height:48px;border:1px solid #d8dee6;border-radius:calc(var(--card-radius) * .5);padding:0 14px;font-family:var(--font);font-size:14px;line-height:normal;color:var(--ink);background:#fff;box-shadow:none;} .woocommerce-MyAccount-content input:focus,.woocommerce-address-fields input:focus,.woocommerce-address-fields select:focus{outline:0;border-color:var(--brand);box-shadow:none;} .woocommerce-MyAccount-content .woocommerce-form-row em,.woocommerce-MyAccount-content .woocommerce-form-row .description{font-size:12px;color:var(--muted);font-style:normal;} .woocommerce-MyAccount-content fieldset{border:1px solid var(--line);border-radius:var(--card-radius);padding:20px 22px 4px;margin:22px 0 0;} .woocommerce-MyAccount-content fieldset legend{font-size:16px;font-weight:700;color:var(--heading);padding:0 6px;} /* Password fields: drop WC's unstyled show-password toggle (grey blobs) and clean up the strength meter now that WC's stylesheet is dequeued on account. */ .woocommerce-MyAccount-content .show-password-input{display:none;} .woocommerce-MyAccount-content .password-input{display:block;position:relative;} .woocommerce-MyAccount-content .woocommerce-password-strength{margin-top:8px;padding:8px 12px;border-radius:calc(var(--card-radius) * .5);font-size:12.5px;font-weight:700;text-align:center;} .woocommerce-MyAccount-content .woocommerce-password-strength.strong{background:#e6f6ec;color:var(--success);} .woocommerce-MyAccount-content .woocommerce-password-strength.good{background:#fff6e6;color:#b26a00;} .woocommerce-MyAccount-content .woocommerce-password-strength.short,.woocommerce-MyAccount-content .woocommerce-password-strength.bad{background:#fdecec;color:var(--sale);} .woocommerce-MyAccount-content .woocommerce-password-hint{display:block;margin-top:6px;font-size:12px;line-height:1.45;color:var(--muted);} /* ── Single order view (view-order) ── */ .woocommerce-MyAccount-content mark{background:transparent;padding:0;} .woocommerce-MyAccount-content mark.order-number,.woocommerce-MyAccount-content mark.order-date{color:var(--heading);font-weight:700;} .woocommerce-MyAccount-content mark.order-status{display:inline-block;padding:2px 11px;border-radius:999px;background:var(--brand-tint);color:var(--heading);font-weight:700;font-size:13px;line-height:1.6;} .woocommerce-MyAccount-content .woocommerce-order-details__title,.woocommerce-MyAccount-content .woocommerce-customer-details h2,.woocommerce-MyAccount-content .woocommerce-column__title{font-size:20px;font-weight:700;color:var(--heading);margin:30px 0 14px;} .woocommerce-MyAccount-content .order-again{margin:0 0 20px;} .woocommerce-MyAccount-content table.woocommerce-table--order-details{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);overflow:hidden;} .woocommerce-MyAccount-content .woocommerce-table--order-details th{text-align:left;font-size:13px;font-weight:700;color:var(--heading);padding:14px 16px;border-bottom:1px solid var(--line);} .woocommerce-MyAccount-content .woocommerce-table--order-details td{padding:13px 16px;font-size:14px;color:var(--ink);border-bottom:1px solid #eceff3;vertical-align:top;} .woocommerce-MyAccount-content .woocommerce-table--order-details tfoot tr:last-child th,.woocommerce-MyAccount-content .woocommerce-table--order-details tfoot tr:last-child td{border-bottom:0;} .woocommerce-MyAccount-content .woocommerce-table--order-details tfoot tr:last-child th,.woocommerce-MyAccount-content .woocommerce-table--order-details tfoot tr:last-child td.amount{font-size:16px;color:var(--heading);} .woocommerce-MyAccount-content .woocommerce-table--order-details .product-name a{color:var(--sky-accent);text-decoration:none;font-weight:700;} .woocommerce-MyAccount-content .woocommerce-table--order-details td.product-total,.woocommerce-MyAccount-content .woocommerce-table--order-details .amount,.woocommerce-MyAccount-content .woocommerce-table--order-details tfoot th{font-weight:700;color:var(--heading);} /* addresses on the order (sm-oaddr cards - template override renders the same card for the single-address AND two-address variants; the deep selectors outrank the generic customer-details h2/address rules above) */ .sm-oaddr{display:grid;grid-template-columns:1fr;gap:24px;margin-top:26px;} .sm-oaddr--2{grid-template-columns:1fr 1fr;} .sm-oaddr .sm-oaddr__card{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:24px;box-sizing:border-box;min-width:0;} .sm-oaddr .sm-oaddr__card .sm-oaddr__title{margin:0 0 12px;font-size:18px;font-weight:700;color:var(--heading);} .sm-oaddr .sm-oaddr__card .sm-oaddr__addr{font-style:normal;font-size:14px;line-height:1.7;color:var(--ink);border:0;padding:0;margin:0;} .sm-oaddr .sm-oaddr__card .sm-oaddr__row{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:14px;color:var(--ink);} .sm-oaddr .sm-oaddr__card .sm-oaddr__row i{font-size:17px;line-height:1;color:var(--muted);} .sm-oaddr .sm-oaddr__card .sm-oaddr__row a{color:var(--ink);text-decoration:none;} .sm-oaddr .sm-oaddr__card .sm-oaddr__row a:hover{text-decoration:underline;} @media (max-width:767px){.sm-oaddr--2{grid-template-columns:1fr;}} /* WooCommerce notices -------------------------------------------------------- * Figma: Moderna UI-UX node 644:2 (checkout notifications). One shell for all * three WC notice types (success / error / info) plus an opt-in amber warning. * Structure = coloured icon disc + message body + dismiss. All colour comes * from shared brand tokens (--success / --sale / --sky-accent + a local amber), * so the banners adapt across TOP SHOP / Dormeo / Delimano / Rovus. * * Templates: woocommerce/notices/{success,error,notice}.php add the .sm-notice * wrapper, icon and dismiss button. The .sm-notice scoping is deliberate so the * checkout coupon-toggle strip (a bare .woocommerce-info, styled separately * below) is never caught by these rules. * -------------------------------------------------------------------------- */ .sm-notice{ --notice-accent:var(--sky-accent); /* per-type accent, overridden below */ --notice-bg:#E8F1FB; /* per-type pale tint */ list-style:none; display:flex; align-items:center; gap:12px; margin:0 0 10px; padding:14px 16px; border:0; border-left:4px solid var(--notice-accent); border-radius:0; /* single-sided border -> no radius */ background:var(--notice-bg); color:var(--ink); font-size:15px; line-height:1.35; } .sm-notice:last-child{margin-bottom:0;} .sm-notice::before{content:none;} /* kill WC's default ::before glyph */ /* icon disc — filled with the type accent, white glyph */ .sm-notice__ic{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--notice-accent); color:#fff; font-size:12px; line-height:1; } .sm-notice__ic i{font-size:12px;} /* message body — WC drops the raw message text here; NEVER --brand as ink (red-on-green on TOP SHOP, orange on Delimano). Ink carries the message; the type accent lives in the disc + left border. */ .sm-notice__body{flex:1 1 auto;min-width:0;color:var(--cart-ink);font-weight:700;font-size:15px;} .sm-notice__body a:not(.button){color:var(--sky-accent);text-decoration:underline;} /* WC action buttons inside a notice (Shihni shportën / Continue): brand ghost chip floated right, same language as the toast action. Compound selector outranks WooCommerce core's grey `.woocommerce a.button` skin. */ .sm-notice .sm-notice__body .button{ float:right; margin:-6px 0 -6px 14px; padding:9px 16px; background:none; border:1.5px solid var(--brand); border-radius:calc(var(--btn-radius) * .7); color:var(--brand); font-family:var(--font); font-weight:700; font-size:13px; line-height:1; text-decoration:none; box-shadow:none; min-width:0; } .sm-notice .sm-notice__body .button:hover{background:var(--brand);color:#fff;filter:none;} /* dismiss */ .sm-notice__x{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; padding:0; background:none; border:0; color:var(--muted); font-size:18px; line-height:1; cursor:pointer; transition:color .15s ease; } .sm-notice__x:hover{color:var(--ink);} /* per-type accents + tints */ .sm-notice--success{--notice-accent:var(--success);--notice-bg:#EAF7EF;} .sm-notice--info{--notice-accent:var(--sky-accent);--notice-bg:#E8F1FB;} .sm-notice--error{--notice-accent:var(--sale);--notice-bg:#FDEDEE;} .sm-notice--warning{--notice-accent:#F5A623;--notice-bg:#FFF6E6;} /* dismissing state — collapse smoothly */ .sm-notice.is-dismissing{opacity:0;transform:translateY(-4px);transition:opacity .2s ease,transform .2s ease;} /* Notices container: notices printed full-bleed; pin them to the same 1440/40 shell as the page content. */ .woocommerce-notices-wrapper{max-width:1440px;margin:0 auto;padding:0 40px;box-sizing:border-box;} .woocommerce-notices-wrapper:not(:empty){padding-top:16px;} @media (max-width:1023px){ .woocommerce-notices-wrapper{padding-left:16px;padding-right:16px;} } /* Neutralize WooCommerce core's notice chrome on our shells regardless of stylesheet order: the colored border-top strips, grey background, oversized padding and the ::before glyph all leak from woocommerce.css because the shells keep the core classes for JS/plugin compatibility. Compound selectors (0,2,0) outrank core's single-class rules. */ .sm-notice.woocommerce-error, .sm-notice.woocommerce-message, .sm-notice.woocommerce-info{border-top:0;border-right:0;border-bottom:0;border-left:4px solid var(--notice-accent);background:var(--notice-bg);padding:14px 16px;margin:0 0 10px;list-style:none;} .sm-notice.woocommerce-error::before, .sm-notice.woocommerce-message::before, .sm-notice.woocommerce-info::before{content:none;display:none;} @media (max-width:1023px){ .woocommerce-account .woocommerce{padding:20px 16px 40px;} .sm-acct{flex-direction:column;gap:20px;} .woocommerce-MyAccount-navigation{flex:0 0 auto;width:100%;} .woocommerce-MyAccount-content{width:100%;} .sm-acct__title{font-size:24px;} .sm-acct-dash__cards{grid-template-columns:1fr;} .woocommerce-MyAccount-content .woocommerce-customer-details .woocommerce-columns--addresses{grid-template-columns:1fr;} .woocommerce-Addresses{grid-template-columns:1fr;} /* Address card header: stack title over the edit link on mobile so neither wraps awkwardly (the side-by-side space-between squeezes both). */ .woocommerce-Address-title{flex-direction:column;align-items:flex-start;gap:6px;} .woocommerce-Address{padding:20px;} .woocommerce-orders-table thead{display:none;} .woocommerce-orders-table tr{display:block;border-bottom:1px solid var(--line);} .woocommerce-orders-table tbody td{display:flex;justify-content:space-between;gap:12px;border:0;padding:10px 16px;} .woocommerce-orders-table tbody td::before{content:attr(data-title);font-weight:700;color:var(--heading);} .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions{justify-content:flex-end;} .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before{display:none;} } .hmenu__card{background:#fff;border:1px solid var(--line);border-radius:var(--card-radius);box-shadow:0 10px 26px rgba(0,40,95,.14);display:flex;flex-direction:column;overflow:hidden;} .hmenu__card.club5dd,.hmenu__card.acctdd{border:0;} .hmenu__ico{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;} .hmenu__ico svg{display:block;} .hmenu__row{display:flex;align-items:center;gap:12px;padding:11px 16px;color:var(--ink);font-size:14px;line-height:1.25;text-decoration:none;width:100%;box-sizing:border-box;background:#fff;transition:background .12s ease;} .hmenu__row:hover{background:var(--bg);} .hmenu__row>.hmenu__ico{flex:0 0 18px;width:18px;height:18px;color:var(--brand);font-size:16px;line-height:1;} .hmenu__row>.hmenu__ico--mask{width:16px;height:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;background:var(--brand);} .hmenu__row>span:not(.hmenu__ico){flex:1 1 auto;min-width:0;} .hmenu__divider{height:1px;background:var(--line);width:100%;} /* CLUB5 dropdown */ .club5dd{width:320px;} .club5dd__band{background:var(--brand);display:flex;flex-direction:column;gap:4px;padding:14px 16px;} .club5dd__lock{display:flex;align-items:center;gap:8px;} .club5dd__lock img{width:22px;height:22px;display:block;filter:brightness(0) invert(1);} .club5dd__lock strong{font-size:18px;font-weight:700;color:#fff;} .club5dd__bandsub{margin:0;font-size:12px;line-height:1.4;color:var(--brand-tint);} .club5dd__benefits{display:flex;flex-direction:column;gap:11px;padding:14px 16px;} .club5dd__b{display:flex;align-items:center;gap:10px;} .club5dd__b>.hmenu__ico{width:16px;height:16px;color:var(--brand);} .club5dd__b>.hmenu__ico svg{width:16px;height:16px;} .club5dd__b>span:not(.hmenu__ico){font-size:13px;color:var(--ink);line-height:1.3;} .club5dd__price{background:var(--brand-tint);display:flex;flex-direction:column;gap:6px;padding:12px 16px;} .club5dd__price-l{margin:0;font-size:12px;color:var(--muted);} .club5dd__pr{display:flex;align-items:center;gap:8px;} .club5dd__pr-now{font-size:20px;font-weight:700;color:var(--brand);} .club5dd__pr-old{font-size:13px;color:var(--muted);text-decoration:line-through;} .club5dd__pr-chip{background:var(--brand);color:#fff;border-radius:var(--badge-radius);font-size:10px;font-weight:700;padding:2px 6px;} .club5dd__cta{display:flex;flex-direction:column;gap:10px;padding:14px 16px 16px;} .club5dd__btn{display:flex;align-items:center;justify-content:center;background:var(--cta);color:#fff;border-radius:var(--btn-radius);font-size:14px;font-weight:700;padding:12px 16px;text-decoration:none;} .club5dd__btn:hover{filter:brightness(.93);} .club5dd__link{display:flex;align-items:center;justify-content:center;color:var(--brand);font-size:13px;text-decoration:none;} .club5dd__link:hover{text-decoration:underline;} /* account dropdown */ .acctdd{width:300px;} .acctdd__head{display:flex;flex-direction:column;gap:3px;padding:16px 16px 12px;} .acctdd__head strong{font-size:16px;font-weight:700;color:var(--heading);} .acctdd__head p{margin:0;font-size:12px;color:var(--muted);} .acctdd__btns{display:flex;flex-direction:column;gap:8px;padding:0 16px 16px;} .acctdd__btn{display:flex;align-items:center;justify-content:center;padding:12px 16px;font-size:14px;font-weight:700;text-decoration:none;border-radius:var(--btn-radius);} .acctdd__btn--primary{background:var(--cta);color:#fff;} .acctdd__btn--primary:hover{filter:brightness(.93);} .acctdd__btn--ghost{background:#fff;border:1px solid var(--brand);color:var(--brand);} .acctdd__btn--ghost:hover{background:var(--brand-tint);} .acctdd__links,.acctdd__menu{display:flex;flex-direction:column;padding:8px 0;} .acctdd__logout{display:flex;flex-direction:column;padding:4px 0 8px;} .acctdd__logout .hmenu__row{padding:12px 16px;color:var(--muted);} .acctdd__logout .hmenu__row>.hmenu__ico{color:var(--muted);} /* Account dropdown header - matches the CLUB5 band: brand-colour background, white text. */ .acctdd__user{background:var(--brand);display:flex;align-items:center;gap:12px;padding:14px 16px;} .acctdd__info{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto;} .acctdd__name{font-size:14px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .acctdd__email{font-size:11px;color:var(--brand-tint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .acctdd__chip{align-self:flex-start;background:rgba(255,255,255,.16);color:#fff;font-size:10px;font-weight:700;padding:2px 6px;margin-top:1px;} .acctdd__status{font-size:12px;font-weight:700;flex:0 0 auto;} .acctdd__status--on{color:var(--success);} .acctdd__status--off{color:var(--muted);} /* ===== Order received (Thank You) - Figma 159:2 / 301:2 ===== */ .sm-ty{background:#fff;padding:56px 24px;} .sm-ty__content{max-width:880px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:24px;box-sizing:border-box;} .sm-ty__hero{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;} .sm-ty__check{display:block;width:88px;height:88px;} .sm-ty__check svg{display:block;width:100%;height:100%;} .sm-ty__title{margin:0;font-size:32px;color:var(--heading);line-height:1.15;} .sm-ty__sub{margin:0;max-width:600px;font-size:15px;color:var(--muted);line-height:1.5;} .sm-ty__sub strong{color:var(--muted);font-weight:700;} .sm-ty__orderno{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;padding:11px 18px;font-size:14px;} .sm-ty__orderno strong{font-weight:700;} .sm-ty__card{background:#fff;border:1px solid var(--line);padding:24px 26px;display:flex;flex-direction:column;gap:13px;width:100%;box-sizing:border-box;} .sm-ty__card-h{margin:0;font-size:18px;color:var(--brand);} .sm-ty__divider{height:1px;background:var(--line);width:100%;} .sm-ty__lbl{margin:0;font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--muted);text-transform:uppercase;} .sm-ty__val{margin:0;font-size:14px;color:var(--brand);} /* bank */ .sm-ty__bank-desc{margin:0;font-size:14px;line-height:1.5;color:#39414e;} .sm-ty__bank-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;} .sm-ty__bank-cell{display:flex;flex-direction:column;gap:4px;min-width:0;} /* summary */ .sm-ty__two{display:flex;flex-direction:column;gap:24px;} .sm-ty__item{display:flex;gap:12px;align-items:flex-start;} .sm-ty__item-img{width:64px;height:64px;flex:0 0 64px;overflow:hidden;background:var(--bg);} .sm-ty__item-img img{width:100%;height:100%;object-fit:cover;display:block;} .sm-ty__item-rt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px;} .sm-ty__item-r1{display:flex;justify-content:space-between;gap:12px;font-size:14px;font-weight:700;color:var(--brand);} .sm-ty__item-name{margin:0;flex:1 1 auto;min-width:0;} .sm-ty__item-price{margin:0;white-space:nowrap;} .sm-ty__item-meta{margin:0;font-size:12px;color:var(--muted);} .sm-ty__trow{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--brand);} .sm-ty__trow p{margin:0;} .sm-ty__bold{font-weight:700;} .sm-ty__free{color:var(--success);} .sm-ty__save{color:var(--sale);} .sm-ty__trow--total p:first-child{font-size:16px;font-weight:700;} .sm-ty__trow--total p:last-child{font-size:20px;font-weight:700;} .sm-ty__c5line{display:flex;align-items:center;gap:8px;} .sm-ty__c5ic{width:22px;height:22px;display:block;flex:0 0 22px;object-fit:contain;} .sm-ty__c5line span{font-size:13px;color:var(--brand);} .sm-ty__pm{display:flex;flex-direction:column;gap:3px;} /* delivery */ .sm-ty__addr{display:flex;flex-direction:column;gap:4px;} .sm-ty__addr-name{margin:0;font-size:14px;font-weight:700;color:var(--brand);} .sm-ty__addr-l{margin:0;font-size:14px;color:#39414e;} .sm-ty__lb{display:flex;flex-direction:column;gap:4px;} .sm-ty__free-row{display:flex;align-items:center;gap:7px;color:var(--success);} .sm-ty__free-row i{font-size:15px;line-height:1;} .sm-ty__free-row span{font-size:13px;font-weight:700;} /* club5 strip */ .sm-ty__strip{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border:1px solid var(--brand);border-left-width:4px;padding:18px 24px;} .sm-ty__strip-l{display:flex;align-items:center;gap:14px;min-width:0;} .sm-ty__strip-ic{width:22px;height:22px;display:block;flex:0 0 22px;object-fit:contain;} .sm-ty__strip-t{display:flex;flex-direction:column;gap:3px;min-width:0;} .sm-ty__strip-h{margin:0;font-size:16px;font-weight:700;color:var(--brand);} .sm-ty__strip-sub{margin:0;font-size:13px;color:#39414e;} .sm-ty__strip-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:var(--cta);color:#fff;font-size:14px;font-weight:700;padding:12px 22px;text-decoration:none;white-space:nowrap;} .sm-ty__strip-btn:hover{filter:brightness(.93);} /* cta + support */ .sm-ty__cta{display:flex;gap:12px;justify-content:center;} .sm-ty__btn{display:inline-flex;align-items:center;justify-content:center;background:var(--cta);color:#fff;font-size:16px;font-weight:700;padding:16px 30px;text-decoration:none;} .sm-ty__btn:hover{filter:brightness(.93);} .sm-ty__btn--ghost{background:#fff;border:1.5px solid var(--brand);color:var(--brand);} .sm-ty__btn--ghost:hover{background:var(--brand-tint);} .sm-ty__sup{margin:0 auto;max-width:640px;text-align:center;font-size:13px;color:var(--muted);padding-top:2px;} @media (max-width:767px){ .sm-ty{padding:20px 16px;} .sm-ty__content{gap:14px;} .sm-ty__hero{gap:14px;} .sm-ty__check{width:72px;height:72px;} .sm-ty__title{font-size:26px;} .sm-ty__sub{max-width:none;} .sm-ty__two{gap:14px;} .sm-ty__bank-grid{grid-template-columns:1fr;gap:14px;} .sm-ty__strip{flex-direction:column;align-items:stretch;gap:12px;padding:18px 20px;} .sm-ty__strip-btn{width:100%;} .sm-ty__cta{flex-direction:column;} .sm-ty__btn{width:100%;} } /* ============================================================ SINGLE PRODUCT (PDP) - Figma 131:2 / 412:2 ============================================================ */ .sm-pdp{--slate:#39414e;--strike:#8a93a0;font-family:var(--font);color:var(--ink);} /* let the product page run full-width; .sm-pdp__wrap (1440/40px) centers to match the header */ body.single-product main.site-main{max-width:none;width:100%;margin:0;padding:0;} .single-product .woocommerce-breadcrumb{max-width:1440px;margin:14px auto 4px;padding:0 40px;box-sizing:border-box;font-size:14px;color:var(--muted);} .single-product .woocommerce-breadcrumb a{color:var(--brand);text-decoration:none;} .sm-pdp__wrap{max-width:1440px;margin:0 auto;padding:0 40px;width:100%;box-sizing:border-box;} .sm-pdp__hrfull{height:1px;background:#e5e7ea;width:100%;max-width:1440px;margin:0 auto;} .sm-pdp__hr{height:1px;background:var(--line);width:100%;} .sm-pdp__sec{padding:28px 40px;} .sm-pdp__h{margin:0 0 16px;color:var(--heading);font-size:30px;font-weight:400;line-height:1.2;} .sm-pdp__h3{margin:18px 0 12px;color:var(--brand);font-size:18px;font-weight:700;} /* buy: 2-col desktop */ .sm-pdp__buy{display:flex;gap:40px;align-items:flex-start;padding:26px 40px 34px;} .sm-pdp__gallery{flex:0 0 46%;max-width:46%;display:flex;flex-direction:column;gap:14px;position:sticky;top:96px;} .sm-pdp__box{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:18px;} /* gallery */ .sm-pdp__main{position:relative;background:#f2f7fd;border-radius:var(--card-radius);overflow:hidden;aspect-ratio:4/3;} .sm-pdp__main>img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;} .sm-pdp__badge{position:absolute;left:14px;top:14px;background:var(--badge-bg);color:#fff;font-weight:700;font-size:16px;padding:6px 11px;border-radius:var(--badge-radius);} .sm-pdp__round{position:absolute;left:auto;right:14px;top:14px;width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--brand);padding:0;} .sm-pdp__round--2{top:66px;} .sm-pdp__round.is-on{background:var(--brand);color:#fff;border-color:var(--brand);} .sm-pdp__rico{font-size:20px;line-height:1;} .sm-pdp__thumbs{display:flex;gap:12px;flex-wrap:wrap;} .sm-pdp__thumb{width:78px;height:78px;border-radius:calc(var(--card-radius) * .5);border:1px solid var(--line);background:#f2f7fd;overflow:hidden;cursor:pointer;padding:0;} .sm-pdp__thumb.is-active{border:1px solid var(--brand);} .sm-pdp__thumb>img{width:100%;height:100%;object-fit:cover;display:block;} /* title / rating / availability */ .sm-pdp__title{margin:0;color:var(--heading);font-size:30px;font-weight:700;line-height:1.18;} .sm-pdp__rating{display:flex;gap:10px;align-items:center;} .sm-pdp__stars{display:inline-flex;gap:1px;align-items:center;} .sm-pdp__star{color:#d8dee6;font-size:var(--st,14px);line-height:1;} .sm-pdp__star.is-on{color:#f5a623;} .sm-pdp__rnum{color:var(--brand);font-weight:700;font-size:15px;} .sm-pdp__rcount{color:var(--muted);font-size:14px;text-decoration:none;} .sm-pdp__avail{display:flex;gap:14px;align-items:center;flex-wrap:wrap;} .sm-pdp__dot{width:8px;height:8px;border-radius:50%;background:var(--success);display:inline-block;} .sm-pdp__dot--out{background:var(--sale);} .sm-pdp__instock{color:var(--success);font-weight:700;font-size:14px;} .sm-pdp__outstock{color:var(--sale);font-weight:700;font-size:14px;} .sm-pdp__sku{color:var(--muted);font-size:13px;} .sm-pdp__model{color:var(--muted);font-size:13px;} .sm-pdp__model[hidden]{display:none;} .sm-pdp__short{color:var(--slate);font-size:15px;line-height:1.52;} .sm-pdp__short p{margin:0;} /* price */ .sm-pdp__price{display:flex;flex-direction:column;gap:6px;} .sm-pdp__pr1{display:flex;gap:12px;align-items:center;flex-wrap:wrap;} .sm-pdp__now{color:var(--brand);font-weight:700;font-size:28px;} .sm-pdp__now .woocommerce-Price-amount{font-size:inherit;} .sm-pdp__was{color:var(--strike);font-size:18px;text-decoration:line-through;} .sm-pdp__pbadge{background:var(--badge-bg);color:#fff;font-weight:700;font-size:14px;padding:4px 9px;border-radius:var(--badge-radius);} .sm-pdp__save{margin:0;color:var(--sale);font-weight:700;font-size:14px;} /* club5 highlight */ .sm-pdp__club5{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--brand);padding:14px 18px;text-decoration:none;color:var(--brand);} .sm-pdp__club5-l{display:flex;gap:12px;align-items:center;} .sm-pdp__club5-ic{width:22px;height:22px;display:block;flex:0 0 22px;} .sm-pdp__club5-t{display:flex;flex-direction:column;gap:2px;} .sm-pdp__club5-row{display:flex;gap:6px;align-items:baseline;font-weight:700;} .sm-pdp__club5-row>span{font-size:14px;} .sm-pdp__club5-row>strong{font-size:20px;} .sm-pdp__club5-row strong .woocommerce-Price-amount{font-size:inherit;} .sm-pdp__club5-sub{font-size:12px;font-weight:400;} .sm-pdp__club5-cta{font-weight:700;font-size:14px;white-space:nowrap;} /* variations */ .sm-pdp__form{display:flex;flex-direction:column;gap:18px;width:100%;} .sm-pdp__form .single_variation_wrap{display:flex;flex-direction:column;gap:18px;} .sm-pdp__vg{display:flex;flex-direction:column;gap:9px;} .sm-pdp__vlabel{margin:0;color:var(--brand);font-weight:700;font-size:14px;} .sm-pdp__vrow{display:flex;gap:10px;flex-wrap:wrap;} .sm-pdp__pill{background:#fff;border:1px solid #d8dee6;border-radius:calc(var(--btn-radius) * .5);color:var(--brand);font-size:14px;font-weight:400;padding:9px 16px;cursor:pointer;font-family:inherit;line-height:1.1;} .sm-pdp__pill.is-active{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700;} /* Out-of-stock variation: dimmed + struck so in-stock options stand out. Still clickable (WooCommerce shows the "out of stock" message on select). */ .sm-pdp__pill.is-oos{color:var(--muted);border-color:#e5e7eb;background:var(--bg);text-decoration:line-through;text-decoration-color:var(--muted);opacity:.7;} .sm-pdp__pill.is-oos.is-active{background:var(--muted);border-color:var(--muted);color:#fff;text-decoration:none;opacity:1;} .sm-pdp__variations{display:none;} .sm-pdp__vselect{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden;} .sm-pdp__form .single_variation,.sm-pdp__form .reset_variations{display:none!important;} /* cart row */ .sm-pdp__cartrow{display:flex;gap:12px;align-items:center;width:100%;} .sm-pdp__stepper{display:flex;align-items:center;border:1px solid #d8dee6;flex:0 0 auto;border-radius:var(--btn-radius);overflow:hidden;} .sm-pdp__step{width:42px;height:52px;display:flex;align-items:center;justify-content:center;border:0;background:none;color:var(--brand);cursor:pointer;} .sm-pdp__step i{font-size:18px;} .sm-pdp__qin{width:40px;height:52px;border:0;background:none;text-align:center;color:var(--brand);font-family:inherit;font-size:16px;font-weight:700;padding:0;appearance:none;-webkit-appearance:none;border-radius:0;} .sm-pdp__qin:focus{outline:none;} .sm-pdp__qin::-webkit-outer-spin-button,.sm-pdp__qin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;} .sm-pdp__atc{flex:1 1 auto;min-width:0;height:52px;display:flex;gap:10px;align-items:center;justify-content:center;background:var(--cta);color:#fff;border:0;border-radius:var(--btn-radius);font-family:inherit;font-weight:700;font-size:16px;cursor:pointer;padding:0 24px;transition:background .15s ease;} .sm-pdp__atc i{font-size:20px;} .sm-pdp__atc:hover{filter:brightness(.93);} .sm-pdp__atc.disabled,.sm-pdp__atc:disabled{opacity:.45;cursor:not-allowed;} .sm-pdp__atc.disabled:hover,.sm-pdp__atc:disabled:hover{filter:none;} /* Out of stock: muted, inert (opacity handled by the .disabled rule above). */ .sm-pdp__atc.is-oos{background:var(--muted);pointer-events:none;} /* Quantity stepper is inert too when the product can't be bought. */ .sm-pdp__stepper:has(.sm-pdp__qin:disabled){opacity:.45;} .sm-pdp__step:disabled,.sm-pdp__qin:disabled{cursor:not-allowed;} /* fav/share inline */ .sm-pdp__fsrow{display:flex;gap:24px;align-items:center;padding-top:2px;padding-bottom:20px;} .sm-pdp__inline{display:flex;gap:7px;align-items:center;background:none;border:0;cursor:pointer;color:#4e5763;font-family:inherit;font-size:14px;padding:0;} .sm-pdp__inline.is-on{color:var(--brand);} .sm-pdp__iico{font-size:20px;line-height:1;} /* Wishlist heart: Iconoir glyph pair. Outline (iconoir-heart) by default; solid (iconoir-heart-solid) in brand color when saved (.is-on). */ .sm-pdp__heart{width:20px;height:20px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;transition:transform .15s ease;} .sm-pdp__heart i{font-size:20px;line-height:1;} .sm-pdp__heart .sm-pdp__heart-s{display:none;color:var(--brand);} .sm-pdp__inline.is-on .sm-pdp__heart .sm-pdp__heart-o{display:none;} .sm-pdp__inline.is-on .sm-pdp__heart .sm-pdp__heart-s{display:inline;} .sm-pdp__inline:active .sm-pdp__heart{transform:scale(.88);} /* features */ .sm-pdp__fcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;} .sm-pdp__fcard{border:1px solid var(--line);padding:24px 22px;display:flex;flex-direction:column;gap:12px;} .sm-pdp__fchip{width:48px;height:48px;border-radius:24px;background:var(--brand-tint);display:flex;align-items:center;justify-content:center;color:var(--brand);} .sm-pdp__fico{font-size:24px;line-height:1;} .sm-pdp__ftitle{margin:0;color:var(--heading);font-weight:700;font-size:17px;} .sm-pdp__ftext{margin:0;color:var(--slate);font-size:14px;line-height:1.52;} /* description */ .sm-pdp__desc{color:var(--slate);font-size:15px;line-height:1.65;} .sm-pdp__desc p{margin:0 0 14px;} .sm-pdp__desc p:last-child{margin-bottom:0;} .sm-pdp__checklist{display:grid;grid-template-columns:1fr 1fr;gap:11px 28px;} .sm-pdp__ci{display:flex;gap:10px;align-items:center;color:var(--slate);font-size:14px;} .sm-pdp__cico{font-size:18px;line-height:1;color:var(--brand);flex:0 0 auto;} /* specs */ .sm-pdp__spec{border:1px solid var(--line);border-radius:var(--card-radius);overflow:hidden;} .sm-pdp__srow{display:flex;gap:24px;padding:14px 18px;font-size:14px;background:#fff;} .sm-pdp__srow.is-alt{background:#f8fafc;} .sm-pdp__slabel{color:var(--muted);flex:0 0 300px;width:300px;} .sm-pdp__sval{color:var(--cart-ink);font-weight:700;text-align:left;} /* reviews */ .sm-pdp__rev{background:#fff;width:100%;} .sm-pdp__revtop{display:flex;gap:14px;align-items:stretch;} .sm-pdp__agg{flex:0 0 280px;background:#fff;border:1px solid var(--line);border-radius:var(--card-radius);box-shadow:0 6px 20px -2px rgba(0,15,46,.08);display:flex;flex-direction:column;gap:8px;align-items:center;padding:22px 18px;} .sm-pdp__agg-n{margin:0;color:var(--brand);font-weight:700;font-size:48px;line-height:1;} .sm-pdp__agg-c{margin:0;color:var(--muted);font-size:14px;} .sm-pdp__wbtn{margin-top:4px;width:100%;background:var(--cta);color:#fff;border-radius:var(--btn-radius);font-weight:700;font-size:14px;text-align:center;padding:12px 18px;text-decoration:none;box-sizing:border-box;} .sm-pdp__bars{flex:1 1 auto;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;gap:12px;justify-content:center;padding:18px;} .sm-pdp__brow{display:flex;gap:12px;align-items:center;} .sm-pdp__blab{display:inline-flex;gap:3px;align-items:center;color:var(--brand);font-weight:700;font-size:13px;} .sm-pdp__bstar{font-size:14px;line-height:1;color:#f5a623;} .sm-pdp__btrack{flex:1 1 auto;height:9px;background:#e5e7eb;border-radius:5px;overflow:hidden;} .sm-pdp__bfill{display:block;height:9px;background:var(--brand);border-radius:5px;} .sm-pdp__bcount{width:30px;color:var(--muted);font-size:13px;} .sm-pdp__rlist{display:flex;flex-direction:column;gap:14px;margin-top:14px;} .sm-pdp__rcard{background:#fff;border:1px solid var(--line);border-radius:var(--card-radius);box-shadow:0 6px 20px -2px rgba(0,15,46,.08);padding:18px 20px;display:flex;flex-direction:column;gap:11px;} .sm-pdp__rhead{display:flex;align-items:center;justify-content:space-between;gap:12px;} .sm-pdp__who{display:flex;gap:12px;align-items:center;} .sm-pdp__rav{width:40px;height:40px;border-radius:20px;background:var(--brand-tint);color:var(--brand);font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;flex:0 0 40px;} .sm-pdp__rnm{display:flex;flex-direction:column;gap:2px;} .sm-pdp__rwho{color:var(--cart-ink);font-weight:700;font-size:14px;} .sm-pdp__rver{display:inline-flex;gap:5px;align-items:center;color:var(--success);font-size:12px;} .sm-pdp__rverico{font-size:14px;line-height:1;color:var(--success);} .sm-pdp__rdate{color:var(--muted);font-size:13px;white-space:nowrap;} .sm-pdp__rtext{margin:0;color:var(--slate);font-size:14px;line-height:1.58;} .sm-pdp__seeall{display:flex;align-items:center;justify-content:center;height:50px;margin-top:14px;border:1.5px solid var(--brand);border-radius:var(--btn-radius);color:var(--brand);font-weight:700;font-size:15px;text-decoration:none;background:#fff;} /* reviews - empty state (no reviews yet) */ .sm-pdp__re{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#fff;border:1px solid var(--line);border-radius:var(--card-radius);box-shadow:0 6px 20px -2px rgba(0,15,46,.025);padding:22px 28px;} .sm-pdp__re-l{display:flex;align-items:center;gap:16px;min-width:0;} .sm-pdp__re-badge{flex:0 0 48px;width:48px;height:48px;border-radius:50%;background:var(--brand-tint);display:inline-flex;align-items:center;justify-content:center;} .sm-pdp__re-star{font-size:22px;line-height:1;color:var(--brand);} .sm-pdp__re-txt{min-width:0;} .sm-pdp__re-title{margin:0;color:var(--brand);font-weight:700;font-size:17px;line-height:1.3;} .sm-pdp__re-sub{margin:4px 0 0;color:var(--muted);font-size:14px;line-height:1.4;} .sm-pdp__re-btn{width:auto;margin-top:0;flex:0 0 auto;white-space:nowrap;} /* related — horizontal carousel with bottom-right arrows */ .sm-pdp__rel{display:flex;align-items:stretch;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;} .sm-pdp__rel::-webkit-scrollbar{display:none;} .sm-pdp__rel .sm-pc{flex:0 0 calc((100% - 48px) / 4);height:auto;scroll-snap-align:start;} /* Related-products header: title on the left, carousel arrows on the right of the same row (instead of below the carousel). */ .sm-pdp__relhead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 16px;} .sm-pdp__relhead .sm-pdp__h{margin:0;} .sm-pdp__rel-nav{display:flex;justify-content:flex-end;gap:8px;flex:0 0 auto;} .sm-pdp__rel-nav[hidden]{display:none;} .sm-pdp__rel-arrow{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--surface);color:var(--brand);cursor:pointer;border-radius:var(--btn-radius);transition:background .15s ease,opacity .15s ease;} .sm-pdp__rel-arrow:hover:not([disabled]){background:var(--bg);} .sm-pdp__rel-arrow[disabled]{opacity:.35;cursor:default;} .sm-pdp__rel-arrow i{font-size:20px;line-height:1;} /* sticky buybar */ .sm-pdp__sticky{position:fixed;left:0;right:0;bottom:0;z-index:1200;background:#fff;border-top:1px solid #e5e7ea;box-shadow:0 -2px 10px rgba(0,0,0,.1);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;padding-bottom:calc(11px + env(safe-area-inset-bottom, 0px));} .sm-pdp__sticky[hidden]{display:none;} .sm-pdp__sticky-price{display:flex;flex-direction:column;gap:1px;} .sm-pdp__sticky-row{display:flex;gap:7px;align-items:center;} .sm-pdp__sticky-now{color:var(--brand);font-weight:700;font-size:20px;} .sm-pdp__sticky-now .woocommerce-Price-amount{font-size:inherit;} .sm-pdp__sticky-was{color:var(--muted);font-size:13px;text-decoration:line-through;} .sm-pdp__sticky-save{color:var(--success);font-weight:700;font-size:11px;} .sm-pdp__sticky-atc{display:flex;gap:10px;align-items:center;justify-content:center;height:52px;width:200px;background:var(--cta);color:#fff;border:0;border-radius:var(--btn-radius);font-family:inherit;font-weight:700;font-size:16px;cursor:pointer;} .sm-pdp__sticky-ico{font-size:20px;line-height:1;} /* responsive */ @media(max-width:1200px){ .sm-pdp__rel .sm-pc{flex:0 0 calc((100% - 32px) / 3);} } @media(max-width:980px){ .sm-pdp__rel .sm-pc{flex:0 0 calc((100% - 16px) / 2);} } @media(max-width:767px){ .sm-pdp__buy{flex-direction:column;gap:18px;padding:16px 16px 18px;border-radius:var(--btn-radius) var(--btn-radius) 0 0;} .sm-pdp__wrap{padding:0 16px;} .sm-pdp__sec{padding:22px 16px;} .sm-pdp__gallery,.sm-pdp__box{max-width:100%;flex:1 1 auto;position:static;} .sm-pdp__h{font-size:19px;} .sm-pdp__title{font-size:22px;} .sm-pdp__fcards{grid-template-columns:1fr;} .sm-pdp__checklist{grid-template-columns:1fr;} .sm-pdp__revtop{flex-direction:column;} .sm-pdp__re{flex-direction:column;align-items:flex-start;gap:16px;} .sm-pdp__re-btn{width:100%;text-align:center;} .sm-pdp__agg{flex:1 1 auto;} .sm-pdp__srow{flex-direction:column;gap:2px;} .sm-pdp__slabel{flex:none;width:auto;} .sm-pdp__sval{text-align:left;} .sm-pdp__rel{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px;} .sm-pdp__rel .sm-pc{flex:0 0 calc((100vw - 32px - 12px) / 1.3);width:calc((100vw - 32px - 12px) / 1.3);scroll-snap-align:start;} } @media(min-width:768px){ .sm-pdp__sticky{display:none;} } /* =========================================================================== * PRODUCT CARD (.sm-pc) — Figma 63:8 (Dormeo) / 65:48 (TS) / 65:2 (Delimano) / 58:354 (Rovus) * One component, four brands. NO default brand: every brand sets its own * corner/badge/button via tokens. Base carries only what all four share. * Token-driven: --card-radius, --badge-radius, --btn-bg/-fg/-border, --card-title, --accent. * Structural-only variants (can't be a value) live in the .sm-brand-* block: * badge placement (Delimano floats over image), image centering (Dormeo/Rovus), * button absence (Rovus), rating hide (Dormeo/Rovus per frame). * ========================================================================= */ .sm-pc{display:flex;flex-direction:column;height:100%;background:var(--surface);border:1px solid #eceff3;border-radius:var(--card-radius);overflow:hidden;box-shadow:0 6px 20px -2px rgba(0,15,46,.08);position:relative;} /* Fixed-height media box, same across every brand. Product fits whole (contain) on a clean white box so nothing is cropped and every card image lines up. */ .sm-pc__media{position:relative;width:100%;height:230px;background:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:14px;box-sizing:border-box;} .sm-pc__media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;border-radius:var(--card-radius);} /* Variant hint overlay: info-only swatches of the first variation attribute, pinned to the image bottom-left, with the attribute name in a small caption above them. Brand-tokened: sharp on Dormeo/Rovus, rounded on TOP SHOP/Delimano; OOS terms dimmed + struck; the +N chip uses --brand. */ .sm-pc__variants{position:absolute;left:20px;bottom:12px;z-index:2;display:flex;flex-direction:column;gap:5px;max-width:calc(100% - 40px);pointer-events:none;} .sm-pc__vlabel{align-self:flex-start;font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--muted);background:rgba(255,255,255,.9);padding:2px 6px;border-radius:calc(var(--btn-radius) * .5);text-transform:uppercase;} .sm-pc__vrow{display:flex;flex-wrap:nowrap;gap:6px;overflow:hidden;max-width:100%;} .sm-pc__vswatch[hidden]{display:none;} .sm-pc__vswatch{display:inline-flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid #cbd2dc;border-radius:calc(var(--btn-radius) * .5);padding:6px 10px;font-family:var(--font);font-size:13px;line-height:1;color:var(--ink);white-space:nowrap;} .sm-pc__vswatch.is-oos{background:#f4f6f8;color:var(--muted);border-color:var(--line);text-decoration:line-through;} .sm-pc__vmore{font-weight:700;color:var(--brand);} /* OOS card: the whole media dims, so keep the variant hint legible above it. */ .sm-pc.is-oos .sm-pc__variants{opacity:1;} .sm-pc__badge{display:inline-flex;align-items:center;justify-content:center;background:var(--badge-bg);color:#fff;font-weight:700;font-size:17px;padding:7px 13px;border-radius:var(--badge-radius);align-self:flex-start;} /* Body grows to fill remaining height so buttons bottom-align across the row. */ .sm-pc__body{display:flex;flex-direction:column;flex:1 1 auto;gap:12px;padding:16px 20px 18px;width:100%;box-sizing:border-box;} .sm-pc__title{margin:0;color:var(--card-title);font-size:18px;line-height:1.3;font-weight:400;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;} .sm-pc__rating{display:flex;align-items:center;gap:7px;} .sm-pc__stars{display:flex;align-items:center;gap:2px;color:#f5a623;font-size:15px;} .sm-pc__rating-count{color:var(--muted);font-size:14px;} .sm-pc__urgency{display:flex;align-items:center;gap:6px;color:var(--sale);font-size:14px;font-weight:700;} .sm-pc__price{display:flex;align-items:center;gap:10px;padding-top:2px;} .sm-pc__was{color:var(--strike,#8a93a0);font-size:15px;text-decoration:line-through;} .sm-pc__now{display:flex;align-items:center;gap:5px;color:var(--card-price-ink);} .sm-pc__now-lbl{font-size:16px;font-weight:400;} .sm-pc__now-val{font-size:22px;font-weight:700;} .sm-pc__club5{display:flex;align-items:center;gap:8px;color:var(--card-price-ink);font-size:16px;} .sm-pc__club5 .sm-pc__club5-ic{width:22px;height:22px;flex-shrink:0;} .sm-pc__club5 b{font-weight:700;} .sm-pc__club5 .sm-pc__info{width:18px;height:18px;color:var(--muted);flex-shrink:0;} /* Club5 price tooltip (Figma 630:32). Brand-tokened via --tip-*. Dormeo = navy fill; Delimano / Rovus / TOP SHOP = white bg + light border. Card is overflow:hidden, so we lift the clip ONLY while a tooltip is active (hover / focus-within / tap-open) - carousels here are CSS grid, not a horizontal-scroll viewport, so no neighbour clips the popover. */ .sm-pc__info-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;cursor:help;outline:none;} .sm-pc__info-wrap .sm-pc__info{width:18px;height:18px;} .sm-pc:has(.sm-pc__info-wrap:hover), .sm-pc:has(.sm-pc__info-wrap:focus-within), .sm-pc:has(.sm-tip.is-open){overflow:visible;} /* Related-products row (PDP) is a horizontal-scroll viewport, so overflow-x:auto also clips the upward tooltip on the y-axis. Lift the clip on the row itself while a card tooltip is active. Scroll position is preserved because the clip only drops during hover/focus/tap, and the row is not scrolled meanwhile. */ .sm-pdp__rel:has(.sm-pc__info-wrap:hover), .sm-pdp__rel:has(.sm-pc__info-wrap:focus-within), .sm-pdp__rel:has(.sm-tip.is-open){overflow:visible;} .sm-tip{position:absolute;left:auto;right:-6px;bottom:calc(100% + 12px);width:268px;max-width:min(268px,78vw);z-index:50;box-sizing:border-box;background:var(--tip-bg);color:var(--tip-body);border:1px solid var(--tip-border);border-radius:var(--tip-radius);box-shadow:var(--tip-shadow);padding:16px 18px;display:flex;flex-direction:column;gap:10px;text-align:left;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(4px);transition:opacity .16s ease,transform .16s ease,visibility .16s;} .sm-pc__info-wrap:hover .sm-tip, .sm-pc__info-wrap:focus-within .sm-tip, .sm-tip.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);} .sm-tip__title{font-weight:700;font-size:14px;line-height:normal;letter-spacing:.2px;color:var(--tip-ink);} .sm-tip__body{font-weight:400;font-size:13px;line-height:1.45;color:var(--tip-body);} .sm-tip__amt{font-weight:600;color:var(--tip-ink);white-space:nowrap;} .sm-tip__chip{align-self:flex-start;background:var(--tip-chip-bg);color:var(--tip-chip-ink);font-weight:700;font-size:12px;line-height:normal;padding:6px 10px;border-radius:calc(var(--tip-radius) * .55);} .sm-tip__chip--btn{align-self:stretch;text-align:center;text-decoration:none;padding:10px 14px;font-size:13px;cursor:pointer;background:var(--brand);color:#fff;border-radius:calc(var(--tip-radius) * .55);transition:filter .15s ease,background .15s ease,color .15s ease;} .sm-tip__chip--btn:hover{filter:brightness(.94);} /* down-pointing arrow, aligned under the info icon on the card's right edge. inherits --tip-border so white brands get the light edge; Dormeo's border is transparent so it reads as a solid navy point. */ .sm-tip::after{content:"";position:absolute;top:100%;right:16px;width:14px;height:14px;margin-top:-7px;background:var(--tip-arrow);border-right:1px solid var(--tip-border);border-bottom:1px solid var(--tip-border);transform:rotate(45deg);} /* Button: fully token-driven. Filled brands set bg=fg-contrast; ghost sets bg #fff. margin-top:auto pins it to the card bottom so every row bottom-aligns even when some cards have a Club5 line and others don't. */ .sm-pc__btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:auto;padding:13px;border-radius:var(--btn-radius);font-weight:700;font-size:16px;font-family:inherit;cursor:pointer;text-decoration:none;box-sizing:border-box;background:var(--btn-bg);color:var(--btn-fg);border:1.5px solid var(--btn-border);transition:filter .15s ease,background .15s ease,color .15s ease;} .sm-pc__btn i{font-size:20px;} .sm-pc__btn:hover{filter:brightness(.96);} /* ---- Out-of-stock + needs-choice button states ------------------------- */ /* Needs choice (variable/grouped/etc): styled exactly like the buy button; it's a real link to the PDP, so no visual difference is needed. */ /* Out of stock: inert chip. Muted, no pointer, cannot be added. Overrides the token bg/border so it never looks clickable regardless of brand. */ .sm-pc__btn.is-oos{background:var(--bg);color:var(--muted);border-color:var(--line);cursor:pointer;} .sm-pc__btn.is-oos:hover{color:var(--cart-ink);border-color:var(--muted);filter:none;} /* OOS image treatment: dim the photo and drop a ribbon so the state reads at a glance in the grid, before the eye reaches the button. */ .sm-pc.is-oos .sm-pc__media img{opacity:.5;filter:grayscale(.35);} .sm-pc__oos-flag{position:absolute;left:0;top:14px;z-index:3;background:var(--ink);color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;padding:6px 12px 6px 10px;} /* Rovus normally hides the card button entirely, but OOS + needs-choice are information the shopper needs, so re-show the button ONLY in those states. */ .sm-brand-rovus .sm-pc__btn.is-oos, .sm-brand-rovus .sm-pc__btn.is-select{display:flex;} /* Foot accent bar — visible only when --accent is a real color (Rovus lime). */ .sm-pc__accent{height:5px;width:100%;background:var(--accent);} /* ---- Structural variants (NOT expressible as a token value) ------------- */ /* NOTE: media height + image fit are intentionally unified across ALL brands in the base .sm-pc__media rule (one 230px contain box), so cards line up in a mixed-product row. Per-brand image-height overrides were removed on purpose — "same height card" beats matching each Figma frame's cosmetic image height. */ /* Dormeo & Rovus: no rating row in the frame (hide even if data exists). */ .sm-brand-dormeo .sm-pc__rating, .sm-brand-rovus .sm-pc__rating{display:none;} /* Dormeo & Rovus: looser content gap. */ .sm-brand-dormeo .sm-pc__body, .sm-brand-rovus .sm-pc__body{gap:14px;padding-bottom:20px;} /* Delimano: badge floats over the image (others keep it in content flow). Media height is unified in the base rule — no per-brand height here. */ .sm-brand-delimano .sm-pc__badge{position:absolute;left:14px;top:14px;} /* TOP SHOP: ghost button inverts on hover to filled. */ .sm-brand-topshop .sm-pc__body{gap:11px;} .sm-brand-topshop .sm-pc__btn{padding:12px;} .sm-brand-topshop .sm-pc__btn:hover{background:var(--brand);color:#fff;filter:none;} /* Rovus: card has no add-to-cart button at all. */ .sm-brand-rovus .sm-pc__btn{display:none;} /* ========================================================================= * SHOP ARCHIVE (Figma 141:3) — two-column: filter sidebar + product grid * Card partial: content-product.php (.sm-pc, shared w/ homepage). Engine: inc/sm-archive.php * All colors via tokens; brand divergence handled at the tail of this block. * ======================================================================= */ .sm-archive{background:var(--surface);} .sm-archive__inner{max-width:1440px;margin:0 auto;padding:0 40px;} /* ---- Breadcrumb --------------------------------------------------------- */ .sm-archive__bc{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);padding:28px 0 0;} .sm-archive__bc a{color:var(--muted);text-decoration:none;} .sm-archive__bc a:hover{color:var(--brand);} .sm-archive__bc-sep{color:var(--line);} /* ---- Title row + toolbar ----------------------------------------------- */ .sm-archive__titlerow{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:14px 0 24px;} .sm-archive__title{font-family:var(--font);font-size:30px;font-weight:700;color:var(--brand);line-height:1.2;margin:0;} .sm-archive__title span{color:var(--muted);font-weight:400;} .sm-archive__toolbar{display:flex;align-items:center;gap:24px;flex-shrink:0;} .sm-archive__count{font-size:14px;color:var(--muted);white-space:nowrap;} /* Sort dropdown */ .sm-archive__sort{position:relative;} .sm-archive__sort-btn{display:inline-flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--btn-radius);padding:11px 16px;font-family:var(--font);font-size:14px;color:var(--brand);cursor:pointer;white-space:nowrap;} .sm-archive__sort-btn strong{font-weight:700;} .sm-archive__sort-btn i{font-size:14px;transition:transform .15s;} .sm-archive__sort[data-sm-sort] .sm-archive__sort-btn[aria-expanded="true"] i{transform:rotate(180deg);} .sm-archive__sort-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:220px;background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);box-shadow:0 12px 32px rgba(0,40,95,.12);padding:6px;margin:0;list-style:none;} .sm-archive__sort-item{padding:10px 14px;border-radius:calc(var(--card-radius) * .5);font-size:14px;color:var(--ink);cursor:pointer;} .sm-archive__sort-item:hover{background:var(--bg);} .sm-archive__sort-item.is-active{color:var(--cart-ink);font-weight:700;background:var(--brand-tint);} /* ---- Main two-column layout -------------------------------------------- */ .sm-archive__main{display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:start;padding-bottom:40px;} .sm-archive__right{min-width:0;} /* ========================================================================= * FILTER SIDEBAR (.sm-fltr) — Figma 141:114 * ======================================================================= */ .sm-archive__sidebar{position:static;top:auto;} .sm-fltr__scroll{display:contents;} .sm-fltr{background:var(--surface);border:1px solid #eceff3;border-radius:var(--card-radius);box-shadow:0 6px 20px -2px rgba(0,15,46,.08);padding:18px 20px 20px;} .sm-fltr__head{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;} .sm-fltr__title{font-family:var(--font);font-size:17px;font-weight:700;color:var(--heading);} .sm-fltr__clear{font-size:13px;color:var(--filter-clear);text-decoration:none;cursor:pointer;} .sm-fltr__clear:hover{text-decoration:underline;} /* Active chips */ .sm-fltr__chips{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:14px;} .sm-fltr__chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--brand);padding:5px 8px 5px 10px;font-size:12px;color:var(--brand);text-decoration:none;} .sm-fltr__chip i{font-size:12px;} .sm-fltr__chip:hover{background:var(--brand);color:#fff;} /* Group */ .sm-fltr__grp{border-top:1px solid var(--line);} .sm-fltr__grp:first-of-type{border-top:0;} /* Header row: the collapse button (title + chevron) plus an optional info tooltip icon sitting just after it. The button keeps its full-width click target for toggling; the info wrap is a sibling so its own hover/tap tooltip never triggers the collapse. */ /* Header row: [ title (i) .......... chevron ]. The title button hugs its label; the info tooltip follows the name with a small gap; a flex margin pushes the chevron to the far right. Only the title toggles collapse - the chevron is decorative and rotates via the group's is-collapsed class. */ .sm-fltr__ghrow{display:flex;align-items:center;gap:7px;padding:16px 0 6px;cursor:pointer;} .sm-fltr__gh{display:inline-flex;align-items:center;flex:0 0 auto;background:none;border:0;padding:0;font-family:var(--font);font-size:15px;font-weight:700;color:var(--heading);cursor:pointer;} .sm-fltr__ghlabel{line-height:1.2;} .sm-fltr__chev{margin-left:auto;font-size:14px;line-height:1;color:var(--heading);transition:transform .15s;} .sm-fltr__grp.is-collapsed .sm-fltr__chev{transform:rotate(-90deg);} .sm-fltr__gbody{display:flex;flex-direction:column;padding-bottom:16px;} .sm-fltr__grp.is-collapsed .sm-fltr__gbody{display:none;} /* Filter info tooltip: reuses the shared .sm-tip bubble. The wrap is the positioning context + hover/tap target; the bubble anchors to it. */ .sm-fltr__tip-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:0 0 auto;cursor:help;outline:none;} .sm-fltr__tip-ic{font-size:16px;line-height:1;color:var(--muted);} .sm-fltr__tip-wrap:hover .sm-fltr__tip-ic, .sm-fltr__tip-wrap:focus-visible .sm-fltr__tip-ic{color:var(--brand);} /* Anchor the shared bubble to this small icon. The icon now sits next to the filter name (left of the row), so the bubble opens to the RIGHT (left-aligned to the icon) to stay inside the panel, with its arrow near the left edge. */ .sm-fltr__tip{left:-8px;right:auto;bottom:calc(100% + 10px);width:240px;max-width:min(240px,72vw);} .sm-fltr__tip::after{right:auto;left:14px;} /* Off-canvas panel breakpoint: the panel head sits pinned above the scroll area, so a tooltip opening UPWARD from the first groups (CLUB5 / in-stock toggles) lands on top of the "Filtrat" header and clips at the scroll edge. Open it downward instead, with the arrow flipped to point up (top + left borders form the upward point of the rotated square). */ @media (max-width:900px){ .sm-fltr__tip{bottom:auto;top:calc(100% + 10px);} .sm-fltr__tip::after{top:auto;bottom:100%;margin-top:0;margin-bottom:-7px;border-right:0;border-bottom:0;border-left:1px solid var(--tip-border);border-top:1px solid var(--tip-border);} } .sm-fltr__tip-wrap:hover .sm-fltr__tip, .sm-fltr__tip-wrap:focus-within .sm-fltr__tip, .sm-fltr__tip.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);} /* CLUB5 toggle sits inside a label; nudge its tip icon to align with the text baseline and stop the star/label from stretching it. */ .sm-fltr__sw-lbl .sm-fltr__tip-wrap{margin-left:2px;} /* Checkbox option row */ .sm-fltr__opt{display:flex;align-items:center;gap:10px;padding:7px 0;cursor:pointer;position:relative;} .sm-fltr__opt[hidden]{display:none;} .sm-fltr__cb{position:absolute;opacity:0;width:0;height:0;} .sm-fltr__box{flex-shrink:0;width:20px;height:20px;background:var(--surface);border:1.5px solid #cbd2dc;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;} .sm-fltr__box i{font-size:13px;color:#fff;opacity:0;} .sm-fltr__cb:checked + .sm-fltr__box{background:var(--brand);border-color:var(--brand);} .sm-fltr__cb:checked + .sm-fltr__box i{opacity:1;} .sm-fltr__cb:focus-visible + .sm-fltr__box{outline:2px solid var(--sky-accent);outline-offset:2px;} .sm-fltr__label{flex:1;font-size:14px;color:var(--ink);} .sm-fltr__opt.is-checked .sm-fltr__label{font-weight:700;} .sm-fltr__count{font-size:13px;color:var(--muted);} /* Boolean toggle switches (top of sidebar): CLUB5-only + in-stock-only. Star/icon + label left, pill right. Colours via brand tokens. */ .sm-fltr__grp--club5, .sm-fltr__grp--instock{padding:14px 0;} .sm-fltr__sw{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;} .sm-fltr__sw-lbl{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px;font-weight:400;color:var(--ink);} .sm-fltr__sw-lbl .sm-fltr__c5-star{flex-shrink:0;width:20px;height:20px;} .sm-fltr__sw-ic{flex-shrink:0;width:20px;height:20px;font-size:20px;line-height:1;color:var(--brand);display:inline-flex;align-items:center;justify-content:center;} .sm-fltr__sw-cb{position:absolute;opacity:0;width:0;height:0;} .sm-fltr__sw-track{flex:0 0 auto;position:relative;width:42px;height:24px;background:#cbd2dc;border-radius:999px;transition:background .18s ease;} .sm-fltr__sw-knob{position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .18s ease;} .sm-fltr__sw-cb:checked ~ .sm-fltr__sw-track{background:var(--brand);} .sm-fltr__sw-cb:checked ~ .sm-fltr__sw-track .sm-fltr__sw-knob{transform:translateX(18px);} .sm-fltr__sw-cb:focus-visible ~ .sm-fltr__sw-track{outline:2px solid var(--sky-accent);outline-offset:2px;} .sm-fltr__more{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;margin-top:4px;padding:4px 0;background:none;border:0;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;color:var(--sky-accent);} .sm-fltr__more[hidden]{display:none;} .sm-fltr__more:hover{text-decoration:underline;} .sm-fltr__more-chev{font-size:15px;line-height:1;transition:transform .2s;} .sm-fltr__more[aria-expanded="true"] .sm-fltr__more-chev{transform:rotate(180deg);} .sm-fltr__search{position:relative;margin-bottom:10px;} .sm-fltr__search-ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:15px;line-height:1;color:var(--muted);pointer-events:none;} .sm-fltr__search-in{width:100%;box-sizing:border-box;padding:8px 10px 8px 32px;border:1px solid var(--line);border-radius:var(--btn-radius);font-family:inherit;font-size:13px;color:var(--ink);background:var(--surface);} .sm-fltr__search-in::placeholder{color:var(--muted);} .sm-fltr__search-in:focus{outline:none;border-color:var(--brand);} /* Price group */ .sm-fltr__hist{position:relative;height:46px;display:flex;align-items:flex-end;gap:6px;margin-bottom:14px;} /* Heights come from inline styles (real per-bucket product counts). Color is state-driven: bars inside the selected range use the brand color, bars outside are muted grey. JS toggles .is-in / .is-out on every slider move. */ .sm-fltr__bar{flex:1;background:#d3d8e0;border-radius:min(var(--card-radius),3px);min-height:6px;transition:background .12s ease;} .sm-fltr__bar.is-in{background:var(--brand);} .sm-fltr__bar.is-out{background:#d3d8e0;} .sm-fltr__slider{position:relative;height:22px;margin:0 12px 14px;} .sm-fltr__track{position:absolute;left:0;right:0;top:9px;height:4px;background:var(--line);border-radius:2px;} .sm-fltr__range{position:absolute;top:9px;height:4px;background:var(--brand);border-radius:2px;} .sm-fltr__knob{position:absolute;top:4px;width:14px;height:14px;margin-left:-7px;background:var(--surface);border:2px solid var(--brand);border-radius:50%;cursor:grab;box-shadow:0 1px 4px rgba(0,40,95,.2);} .sm-fltr__knob:active{cursor:grabbing;} .sm-fltr__knob:focus-visible{outline:2px solid var(--sky-accent);outline-offset:2px;} .sm-fltr__pfields{display:flex;align-items:center;gap:8px;} .sm-fltr__pfield{flex:1;display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid #d8dee6;border-radius:var(--btn-radius);padding:9px 12px;min-width:0;} .sm-fltr__pfield input{border:0;outline:0;background:none;font-family:var(--font);font-size:15px;color:var(--cart-ink);width:100%;min-width:0;-moz-appearance:textfield;} .sm-fltr__pfield input::-webkit-outer-spin-button,.sm-fltr__pfield input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;} .sm-fltr__cur{font-size:14px;color:var(--muted);flex-shrink:0;padding-left:4px;} .sm-fltr__dash{color:#9aa3ae;font-size:14px;} .sm-fltr__apply{margin-top:8px;width:100%;background:var(--brand);color:#fff;border:0;border-radius:var(--btn-radius);padding:12px;font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;} /* ========================================================================= * ARCHIVE PRODUCT GRID — renders the rich .sm-pc card (same as homepage). * The grid keeps the .sm-ac-grid selector (template + archive.js target it); * cards inside are .sm-pc, so they just need to fill the cell. All card * styling lives in the PRODUCT CARD block above — single source, no divergence. * ======================================================================= */ .sm-ac-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start;} .sm-ac-grid .sm-pc{width:100%;} /* ---- Load more ---------------------------------------------------------- */ .sm-archive__loadmore{display:flex;flex-direction:column;align-items:center;gap:16px;padding:36px 0 8px;} .sm-archive__showing{font-size:14px;color:var(--muted);} .sm-archive__lm-btn{display:inline-flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--brand);border-radius:var(--btn-radius);color:var(--brand);font-family:var(--font);font-size:15px;font-weight:700;padding:14px 34px;cursor:pointer;transition:background .15s,color .15s;} .sm-archive__lm-btn:hover{background:var(--brand);color:#fff;} .sm-archive__lm-btn.is-loading{opacity:.6;pointer-events:none;} .sm-archive__lm-btn.is-loading i{animation:sm-spin .8s linear infinite;} @keyframes sm-spin{to{transform:rotate(360deg);}} /* ---- Empty state -------------------------------------------------------- */ .sm-archive__empty{text-align:center;padding:64px 20px;color:var(--muted);} .sm-archive__empty i{font-size:40px;color:var(--line);display:block;margin-bottom:12px;} .sm-archive__empty-clear{display:inline-block;margin-top:16px;color:var(--filter-clear);text-decoration:underline;} /* ---- SEO description ---------------------------------------------------- */ .sm-archive__seo{border-top:1px solid var(--line);padding:36px 0;max-width:1316px;} .sm-archive__seo :is(h2,h3){font-family:var(--font);color:var(--brand);font-weight:700;} .sm-archive__seo h2{font-size:22px;margin:0 0 14px;} .sm-archive__seo h3{font-size:17px;margin:24px 0 12px;} .sm-archive__seo p{font-size:15px;line-height:1.6;color:var(--ink);margin:0 0 14px;} /* ========================================================================= * RESPONSIVE * ======================================================================= */ @media(max-width:1200px){ .sm-ac-grid{grid-template-columns:repeat(3,1fr);} } @media(max-width:1024px){ .sm-archive__main{grid-template-columns:240px 1fr;gap:24px;} } @media(max-width:900px){ /* Sidebar becomes a full-width off-canvas panel toggled by a filter button. */ .sm-archive__main{grid-template-columns:1fr;} .sm-archive__sidebar{position:fixed;inset:0;z-index:120;width:100%;transform:translateX(-100%);transition:transform .25s ease;overscroll-behavior:contain;background:var(--surface);display:flex;flex-direction:column;} .sm-archive.is-filter-open .sm-archive__sidebar{transform:none;} /* Form fills the panel; only the middle .sm-fltr__scroll scrolls. */ .sm-archive__sidebar .sm-fltr{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;} .sm-fltr__scroll{display:block;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;} .sm-fltr__head{position:static;z-index:2;background:var(--surface);flex:0 0 auto;margin:0 -16px;padding:14px 16px 12px;border-bottom:1px solid var(--line);} /* The head's border-bottom is the single divider under "Filtrat"; the first group would otherwise add its own border-top right below it (the head is the first div, so :first-of-type never matches the group), doubling the line. Suppress the top border on whichever group follows the head/chips. */ .sm-fltr__head + .sm-fltr__grp, .sm-fltr__chips + .sm-fltr__grp{border-top:0;} .sm-fltr__chips{margin-top:14px;} .sm-fltr__title{font-size:18px;} .sm-fltr__foot{display:block;flex:0 0 auto;margin:0 -16px;padding:12px 16px;background:var(--surface);border-top:1px solid var(--line);} } @media(max-width:680px){ .sm-archive__inner{padding:0 16px;} .sm-ac-grid{grid-template-columns:1fr;gap:12px;} .sm-archive__title{font-size:24px;} .sm-archive__titlerow{flex-direction:column;align-items:flex-start;gap:12px;padding:8px 0 14px;} .sm-archive__bc{padding:16px 0 0;} .sm-archive__mfilter{margin-bottom:16px;} } /* Archive cards are .sm-pc — all brand divergence (badge placement, image fit, TOP SHOP sale badge, etc.) is already handled in the PRODUCT CARD block above, so no archive-specific brand overrides are needed here. */ /* ---- Mobile filter drawer controls (hidden on desktop) ----------------- */ .sm-fltr__head-r{display:flex;align-items:center;gap:14px;} .sm-fltr__close{display:none;background:none;border:0;font-size:22px;color:var(--muted);cursor:pointer;line-height:1;} .sm-fltr__foot{display:none;} .sm-fltr__done{width:100%;background:var(--brand);color:#fff;border:0;padding:14px;font-family:var(--font);font-size:15px;font-weight:700;border-radius:var(--btn-radius);cursor:pointer;} .sm-fltr__done:hover{filter:brightness(.95);} .sm-archive__backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:110;} .sm-archive.is-filter-open .sm-archive__backdrop{display:block;} @media(max-width:900px){ .sm-fltr__close{display:inline-flex;} .sm-archive__sidebar{background:var(--surface);padding:0;} /* Panel styling only. The flex-column scroll setup (sidebar display:flex, .sm-fltr flex:1 min-height:0, .sm-fltr__scroll overflow-y:auto) lives in the earlier @media(max-width:900px) block. Do NOT set min-height:100% on .sm-fltr here: it overrides the flex min-height:0 and kills the scroll. */ .sm-fltr{border:0;border-radius:0;box-shadow:none;padding:0 16px;} } /* ========================================================================= * MOBILE FILTERBAR (Figma 241:20) + ACTIVE-FILTER CHIPS (241:33) * Hidden on desktop; shown at the same breakpoint the off-canvas panel takes * over. Left "Filtro" pill is the panel trigger (with an active-count badge); * right pill is the sort control. Token-driven so each brand renders correctly. * ======================================================================= */ .sm-archive__mfilter{display:none;} @media(max-width:900px){ /* Show the filterbar, hide the desktop toolbar's count + sort. */ .sm-archive__mfilter{display:block;margin:0 -16px 20px;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .sm-archive__toolbar{display:none;} .sm-archive__mbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;} /* "Filtro" pill (panel trigger) */ .sm-mfltr__trigger{display:inline-flex;align-items:center;gap:8px;background:var(--brand);border:1px solid var(--brand);border-radius:var(--btn-radius);padding:10px 14px;font-family:var(--font);font-size:14px;font-weight:700;color:#fff;cursor:pointer;line-height:1.35;transition:filter .15s ease;} .sm-mfltr__trigger:active{filter:brightness(.9);} .sm-mfltr__trigger i{font-size:18px;} /* count badge inverts on the solid button so it reads on every brand */ .sm-mfltr__badge{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background:#fff;color:var(--brand);font-size:11px;font-weight:700;line-height:1;border-radius:50%;} /* Sort pill (reuses .sm-archive__sort; right-align its dropdown) */ .sm-archive__mbar .sm-archive__sort{position:relative;} .sm-archive__mbar .sm-archive__sort-btn{padding:10px 12px 10px 14px;gap:6px;} .sm-archive__mbar .sm-archive__sort-menu{right:0;left:auto;min-width:200px;} /* Active-filter chips row (241:33) */ .sm-archive__mchips{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;padding:0 16px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;} .sm-archive__mchips::-webkit-scrollbar{display:none;} .sm-mchip{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--btn-radius);padding:6px 10px 6px 12px;font-size:12px;color:var(--brand);text-decoration:none;line-height:1.35;} .sm-mchip i{font-size:12px;color:var(--muted);} .sm-mchip:active{background:var(--bg);} .sm-mchip__clear{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--filter-clear);text-decoration:none;padding:6px 4px;white-space:nowrap;} } /* Hide WooCommerce's injected "view cart" link after AJAX add (drawer opens instead). */ a.added_to_cart.wc-forward{display:none !important;} /* Toast notifications (cart add/remove, etc.) - branded card: white surface with --line border and the mini-cart shadow, optional 44px product thumb on the left, message, optional action chip. Auto-dismissing. */ .sm-toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:2000;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none;width:max-content;max-width:calc(100vw - 32px);} .sm-toast{display:flex;align-items:center;gap:12px;background:var(--surface);color:var(--cart-ink);border:1px solid var(--line);padding:10px 18px;border-radius:var(--card-radius);box-shadow:0 18px 40px -6px rgba(0,10,36,.22);font-size:14px;font-weight:600;line-height:1.3;opacity:0;transform:translateY(10px);transition:opacity .28s ease,transform .28s ease;pointer-events:auto;} .sm-toast.is-in{opacity:1;transform:translateY(0);} .sm-toast__thumb{flex:0 0 44px;width:44px;height:44px;margin-left:-8px;border:1px solid #eceff3;border-radius:calc(var(--card-radius) * .5);overflow:hidden;background:#fff;} .sm-toast__thumb img{width:100%;height:100%;object-fit:cover;display:block;} .sm-toast__msg{min-width:0;} .sm-toast__act{flex:0 0 auto;margin-left:6px;padding:8px 14px;background:none;border:1.5px solid var(--brand);border-radius:calc(var(--btn-radius) * .7);color:var(--brand);font:700 13px/1 var(--font);cursor:pointer;transition:background .15s ease,color .15s ease;} .sm-toast__act:hover{background:var(--brand);color:#fff;} /* =========================================================================== * HOMEPAGE SECTIONS (front-page.php + inc/sm-home-render.php) * Figma: Dormeo desktop 310:2. All color/radius via brand tokens so the one * codebase adapts across TOP SHOP / Dormeo / Delimano / Rovus. * * Container: 1440 max, 40px gutter — matches the header/footer inner width. * Figma sections use 80px inner padding inside a 1440 frame; here the section * is full-bleed (for colored backgrounds) and .sm-hs__wrap centers content to * 1360 with a 40px gutter, giving the same visual inset. * ========================================================================= */ .sm-home{width:100%;} /* Shared section shell */ .sm-hs{width:100%;box-sizing:border-box;} .sm-hs__wrap{max-width:1440px;margin:0 auto;padding:0 40px;box-sizing:border-box;} /* Shared centered section title (Figma 30px navy, regular weight) */ .sm-hs__title{margin:0;text-align:center;color:var(--home-heading);font-size:30px;font-weight:400;line-height:1.25;} .sm-hs__lede{margin:14px auto 0;text-align:center;color:var(--muted);font-size:17px;max-width:720px;line-height:1.4;} /* Shared pill CTA used by static sections (navy filled, Figma 316:14) */ .sm-hs__cta{display:inline-flex;align-items:center;justify-content:center;background:var(--brand);color:#fff;font-weight:700;font-size:15px;padding:14px 36px;border-radius:var(--btn-radius);text-decoration:none;transition:filter .15s ease;} .sm-hs__cta:hover{filter:brightness(.94);} /* --------------------------------------------------------------------------- * SECTION 1 — HERO * Background is a banner image (banner-type Campaign or fallback image). No * gradient/color. Overlay text (optional) sits over a soft dark scrim that * appears ONLY when text is present, so white text stays readable on any image. * ------------------------------------------------------------------------- */ .sm-hero{position:relative;overflow:hidden;} .sm-hero__media{position:absolute;inset:0;z-index:0;} /* wraps the img when a mobile variant is set — keep it transparent to layout so the fixed-height media boxes size on the as before. */ .sm-hero__media picture,.sm-tile__media picture,.sm-split__media picture,.sm-cat__media picture,.sm-split__bgmedia picture,.sm-help__bgmedia picture{display:contents;} .sm-hero__media .sm-hero__bg{width:100%;height:100%;object-fit:cover;display:block;} /* Scrim: only when there's overlay text AND a background image. Anchored to the text side (left) and fading out, so the image reads clean on the right. */ .sm-hero.has-text.has-image::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,27,69,.72) 0%,rgba(0,27,69,.35) 45%,rgba(0,27,69,0) 70%);pointer-events:none;} /* Text-but-no-image fallback: give the hero a solid brand bg so white text is visible (rare — normally a banner image is set). No scrim needed then. */ .sm-hero.has-text.no-image{background:var(--brand);} .sm-hero__wrap{position:relative;z-index:2;} /* Image-only hero (no overlay text): the media is absolutely positioned, so the section needs its own height. Use a responsive min-height in the hero's aspect band; the image covers it. With text, .sm-hero__inner padding sets the height. */ .sm-hero.no-text{min-height:clamp(320px,38vw,600px);} /* Text hero: a real min-height (Dormeo scale) instead of relying on inner padding alone. The media is absolutely positioned + object-fit:cover, so the extra height simply reveals more image; the copy centers vertically. */ .sm-hero.has-text{min-height:clamp(440px,40vw,640px);display:flex;} .sm-hero.has-text .sm-hero__wrap{display:flex;align-items:center;width:100%;pointer-events:none;} .sm-hero__inner{pointer-events:auto;} .sm-hero__media .sm-hero__medialink{display:block;width:100%;height:100%;} .sm-hero__inner{max-width:520px;padding:64px 0;display:flex;flex-direction:column;align-items:flex-start;gap:22px;} .sm-hero__badge{display:inline-flex;align-items:center;background:rgba(255,255,255,.14);color:#fff;font-weight:700;font-size:13px;letter-spacing:.01em;padding:8px 14px;border-radius:var(--badge-radius);} .sm-hero__title{margin:0;color:#fff;font-size:46px;line-height:52px;font-weight:400;} .sm-hero__sub{margin:0;color:#c3d0e2;font-size:17px;line-height:1.4;} .sm-hero__btn{display:inline-flex;align-items:center;background:#fff;color:var(--brand);font-weight:700;font-size:16px;padding:15px 34px;border-radius:var(--btn-radius);text-decoration:none;transition:filter .15s ease;} .sm-hero__btn:hover{filter:brightness(.96);} /* --------------------------------------------------------------------------- * SECTION 2 — BANNER 1 (3 category tiles, Figma 313:13) * Card: image box 320 tall + body; badge top-left over image; "MË SHUMË" link. * ------------------------------------------------------------------------- */ .sm-tiles{background:var(--surface);padding:56px 0;} .sm-tiles__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .sm-tile{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);overflow:hidden;text-decoration:none;transition:box-shadow .18s ease,transform .18s ease;} a.sm-tile:hover{box-shadow:0 10px 26px -6px rgba(0,15,46,.16);transform:translateY(-2px);} .sm-tile__media{position:relative;height:320px;background:var(--brand-tint);overflow:hidden;} .sm-tile__media .sm-tile__img{width:100%;height:100%;object-fit:cover;display:block;} .sm-tile__ph{display:block;width:100%;height:100%;background:linear-gradient(135deg,#e8ebef,#dfe4ea);} .sm-tile__badge{position:absolute;left:12px;top:12px;background:var(--brand);color:#fff;font-weight:700;font-size:12px;padding:6px 10px;border-radius:var(--badge-radius);} .sm-tile__body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;} .sm-tile__title{margin:0;color:var(--heading);font-size:20px;font-weight:700;line-height:1.2;} .sm-tile__sub{margin:0;color:var(--muted);font-size:14px;line-height:1.4;} .sm-tile__more{display:inline-flex;align-items:center;gap:5px;color:var(--brand);font-weight:700;font-size:14px;margin-top:2px;} .sm-tile__more i{font-size:16px;} /* --------------------------------------------------------------------------- * SECTION 5 / 9 — BANNER 2 / 3 (split promo, Figma 317:2 / 318:13) * Two columns: text (560) + media (520x320). Flip swaps sides. * ------------------------------------------------------------------------- */ .sm-split{position:relative;overflow:hidden;background:var(--split-bg,#001B45);padding:72px 0;} /* Optional full-bleed background photo behind the band; the hex color paints under it. .has-scrim darkens the photo for text legibility. */ .sm-split__bgmedia{position:absolute;inset:0;z-index:0;} .sm-split__bgmedia .sm-split__bgimg{width:100%;height:100%;object-fit:cover;display:block;} .sm-split.has-scrim .sm-split__bgmedia::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45);} .sm-split__wrap{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:56px;} .sm-split__text{flex:0 1 560px;max-width:560px;display:flex;flex-direction:column;align-items:flex-start;gap:18px;} .sm-split__media{flex:0 0 520px;max-width:520px;} /* Octaspring (image-left, is-flip): image packs to the LEFT edge, text beside it, trailing void on the right, per Figma 318:13 (500px media, 40px gap). In row-reverse, flex-end is the left edge. */ .sm-split.is-flip .sm-split__wrap{flex-direction:row-reverse;justify-content:flex-end;gap:40px;} .sm-split.is-flip .sm-split__media{flex:0 0 500px;max-width:500px;} /* The media box adapts to the image's own dimensions (no fixed-height crop): the column caps the width, height follows the aspect ratio. */ .sm-split__media .sm-split__img{width:100%;height:auto;display:block;border-radius:var(--card-radius);} .sm-split__eyebrow{font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;} .sm-split__title{margin:0;font-size:32px;line-height:40px;font-weight:400;} .sm-split__sub{margin:0;font-size:16px;line-height:1.5;} .sm-split__btn{display:inline-flex;align-items:center;background:#fff;color:var(--brand);font-weight:700;font-size:16px;padding:15px 32px;border-radius:var(--btn-radius);text-decoration:none;transition:filter .15s ease;} .sm-split__btn:hover{filter:brightness(.96);} /* text color by background luminance */ .sm-split.is-dark .sm-split__title{color:#fff;} .sm-split.is-dark .sm-split__eyebrow{color:var(--copy-link);} .sm-split.is-dark .sm-split__sub{color:#c3d0e2;} .sm-split.is-light .sm-split__title{color:var(--home-heading);} .sm-split.is-light .sm-split__eyebrow{color:var(--brand);} .sm-split.is-light .sm-split__sub{color:var(--muted);} .sm-split.is-light .sm-split__btn{background:var(--brand);color:#fff;} /* --------------------------------------------------------------------------- * SECTION 4 / 8 / 10 — CAMPAIGN CAROUSELS (Figma 316:16 etc.) * Reuses the .sm-pc product card (shared w/ archive). Row scrolls with a peek; * cards keep native width via row-level overflow (never resize the card). * ------------------------------------------------------------------------- */ .sm-carousel{background:var(--surface);padding:56px 0;} .sm-carousel .sm-hs__title{margin-bottom:32px;} .sm-carousel__viewport{width:100%;} /* Static 4-up row (campaign capped at 4 products). No horizontal scroll. */ .sm-carousel__track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} .sm-carousel__track .sm-pc{width:100%;height:auto;} .sm-carousel__foot{display:flex;justify-content:center;margin-top:34px;} .sm-carousel__all{display:inline-flex;align-items:center;justify-content:center;background:var(--brand);color:#fff;font-weight:700;font-size:15px;padding:14px 36px;border-radius:var(--btn-radius);text-decoration:none;transition:filter .15s ease;} .sm-carousel__all:hover{filter:brightness(.94);} /* --------------------------------------------------------------------------- * SECTION 6 — CATEGORIES (Figma 349:2) * ------------------------------------------------------------------------- */ .sm-cats{background:var(--surface);padding:60px 0;} .sm-cats .sm-hs__title{margin-bottom:36px;} .sm-cats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;} .sm-cat{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);overflow:hidden;text-decoration:none;transition:box-shadow .18s ease,transform .18s ease;} .sm-cat:hover{box-shadow:0 10px 26px -6px rgba(0,15,46,.16);transform:translateY(-2px);} .sm-cat__media{height:200px;background:var(--brand-tint);overflow:hidden;} .sm-cat__media .sm-cat__img{width:100%;height:100%;object-fit:cover;display:block;} .sm-cat__ph{display:block;width:100%;height:100%;background:linear-gradient(135deg,#e8ebef,#dfe4ea);} .sm-cat__body{padding:18px 20px;display:flex;flex-direction:column;gap:11px;} .sm-cat__title{margin:0;color:var(--heading);font-size:19px;font-weight:700;line-height:1.2;} .sm-cat__more{display:inline-flex;align-items:center;gap:5px;color:var(--brand);font-weight:700;font-size:14px;} .sm-cat__more i{font-size:16px;} /* --------------------------------------------------------------------------- * SECTION 3 — TRUST & AWARDS (Figma 316:2) * ------------------------------------------------------------------------- */ .sm-trust{background:var(--surface);padding:56px 0;text-align:center;} .sm-trust__title{max-width:700px;margin-left:auto;margin-right:auto;} .sm-trust__marks{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px;margin:32px 0;} .sm-trust__mark{display:inline-flex;align-items:center;justify-content:center;width:76px;height:76px;border-radius:50%;overflow:hidden;background:var(--brand-tint);} .sm-trust__mark--ph{background:#e8ebef;} .sm-trust__logo{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;} /* --------------------------------------------------------------------------- * SECTION 7 — INSTITUTES (Figma 317:10) * ------------------------------------------------------------------------- */ .sm-institutes{background:var(--bg);padding:56px 0;text-align:center;} .sm-institutes__title{max-width:760px;margin-left:auto;margin-right:auto;} .sm-institutes__row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:24px;margin:28px 0;} .sm-institutes__logo{display:inline-flex;align-items:center;justify-content:center;width:170px;height:80px;background:#fff;border:1px solid var(--line);border-radius:var(--card-radius);overflow:hidden;} .sm-institutes__logo--ph{background:#e2e6ec;border-color:transparent;} .sm-institutes__logo img{max-width:80%;max-height:70%;width:auto;height:auto;object-fit:contain;} /* --------------------------------------------------------------------------- * SECTION 11 — AWARDS (Figma 319:2) * ------------------------------------------------------------------------- */ .sm-awards{background:var(--surface);padding:56px 0;} .sm-awards .sm-hs__title{margin-bottom:38px;} .sm-awards__grid{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;} .sm-award{width:300px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;} .sm-award__medal{display:inline-flex;align-items:center;justify-content:center;width:96px;height:96px;border-radius:50%;background:var(--brand-tint);overflow:hidden;} .sm-award__medal .sm-award__img{max-width:100%;max-height:100%;object-fit:contain;} .sm-award__title{margin:0;color:var(--heading);font-size:16px;font-weight:700;} .sm-award__text{margin:0;color:var(--muted);font-size:14px;line-height:1.4;} /* --------------------------------------------------------------------------- * SECTION 12 — HELP & NEWSLETTER (Figma 319:17) * ------------------------------------------------------------------------- */ .sm-help{position:relative;overflow:hidden;background:var(--help-bg,var(--surface));padding:52px 0;border-top:1px solid var(--line);} .sm-help__bgmedia{position:absolute;inset:0;z-index:0;} .sm-help__bgmedia .sm-help__bgimg{width:100%;height:100%;object-fit:cover;display:block;} .sm-help.has-scrim .sm-help__bgmedia::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45);} .sm-help.has-bgimg{border-top:0;} /* Dark band variant (admin-picked background): white text, and the newsletter button flips to white with brand label - footer-band style - so it never sinks into a brand-colored background. */ .sm-help.is-dark{border-top:0;} .sm-help.is-dark .sm-help__head{color:#fff;} .sm-help.is-dark .sm-help__phone{color:#fff;} .sm-help.is-dark .sm-help__hours,.sm-help.is-dark .sm-help__newssub{color:rgba(255,255,255,.82);} .sm-help.is-dark .sm-news__input{border-color:transparent;} .sm-help.is-dark .sm-news__btn{background:#fff;color:var(--brand);} .sm-help__wrap{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:40px;flex-wrap:wrap;} .sm-help__support{flex:0 1 320px;} .sm-help__news{flex:0 1 540px;max-width:540px;} .sm-help__head{margin:0 0 12px;color:var(--heading);font-size:20px;font-weight:700;} .sm-help__phone{display:inline-block;color:var(--brand);font-size:34px;font-weight:700;text-decoration:none;line-height:1.1;} .sm-help__hours{margin:8px 0 0;color:var(--muted);font-size:14px;} .sm-help__newssub{margin:0 0 16px;color:var(--muted);font-size:15px;line-height:1.4;} .sm-news{display:flex;gap:0;max-width:540px;} .sm-news__input{flex:1 1 auto;height:50px;border:1px solid var(--line);border-right:0;border-radius:var(--card-radius) 0 0 var(--card-radius);padding:0 16px;font-size:15px;font-family:inherit;box-sizing:border-box;background:#fff;color:var(--ink);} .sm-news__input:focus{outline:2px solid var(--brand);outline-offset:-2px;} .sm-news__btn{flex:0 0 auto;height:50px;background:var(--brand);color:#fff;border:0;border-radius:0 var(--card-radius) var(--card-radius) 0;padding:0 30px;font-weight:700;font-size:15px;font-family:inherit;cursor:pointer;transition:filter .15s ease;} .sm-news__btn:hover{filter:brightness(.94);} /* =========================================================================== * RESPONSIVE * ========================================================================= */ @media (max-width:1023px){ .sm-cart{padding:22px 24px 48px;} .sm-cart__cols{flex-direction:column;} .sm-cart__rightcol{flex-basis:auto;max-width:100%;width:100%;} .sm-hs__wrap{padding:0 24px;} .sm-hero__title{font-size:38px;line-height:44px;} .sm-hero__inner{max-width:100%;padding:56px 0;} .sm-split__wrap{gap:40px;} .sm-split__title{font-size:28px;line-height:34px;} .sm-split__media,.sm-split.is-flip .sm-split__media{flex:0 1 44%;max-width:44%;} .sm-cats__grid{grid-template-columns:repeat(2,1fr);} .sm-carousel__track{grid-template-columns:repeat(2,1fr);gap:16px;} .sm-tiles__grid{gap:16px;} } @media (max-width:767px){ .sm-cart{padding:18px 16px 40px;} .sm-cart__title{font-size:24px;} .sm-cart .sm-cd__thumb{width:76px;height:76px;} .sm-cart__couponform{flex-wrap:wrap;} .sm-cart__apply{flex:1 1 100%;} .sm-hs__wrap{padding:0 16px;} .sm-hs__title{font-size:24px;} .sm-hs__lede{font-size:15px;} /* Hero */ .sm-hero.has-text{min-height:440px;} .sm-hero.no-text{min-height:clamp(300px,72vw,480px);} .sm-hero__inner{padding:40px 0;gap:16px;} .sm-hero__title{font-size:30px;line-height:36px;} .sm-hero__sub{font-size:15px;} .sm-hero.has-text.has-image::after{background:linear-gradient(180deg,rgba(0,27,69,.5),rgba(0,27,69,.72));} /* Banner 1 tiles: single column */ .sm-tiles{padding:32px 0;} .sm-tiles__grid{grid-template-columns:1fr;} .sm-tile__media{height:200px;} /* Split: stack, image under text; flip has no effect on mobile */ .sm-split{padding:40px 0;} .sm-split__wrap,.sm-split.is-flip .sm-split__wrap{flex-direction:column;align-items:stretch;gap:24px;} .sm-split__text{max-width:100%;flex-basis:auto;} .sm-split__media,.sm-split.is-flip .sm-split__media{flex:0 1 auto;max-width:100%;} .sm-split__title{font-size:24px;line-height:30px;} /* Carousels: 1.3 peek */ .sm-carousel{padding:32px 0;} .sm-carousel .sm-hs__title{margin-bottom:20px;} .sm-carousel__track{grid-template-columns:repeat(2,1fr);gap:14px;} /* Product card: compact tokens for the 2-up mobile width (~170px). Desktop sizes (22px price, 20px side padding, 16px button) overflow a 130px inner column - the card clips the price (.sm-pc is overflow:hidden) and wraps the CTA to two lines. Applies to every .sm-pc surface at this width: homepage carousels, archive grid, PDP related strip. */ .sm-pc__media{height:170px;padding:10px;} .sm-pc__body{padding:12px 12px 14px;gap:8px;} .sm-pc__badge{font-size:14px;padding:5px 10px;} .sm-pc__title{font-size:15px;} .sm-pc__price{flex-wrap:wrap;gap:4px 8px;padding-top:0;} .sm-pc__was{font-size:13px;white-space:nowrap;} .sm-pc__now-lbl{font-size:13px;} .sm-pc__now-val{font-size:18px;} .sm-pc__now{white-space:nowrap;} .sm-pc__rating-count{font-size:12px;} .sm-pc__stars{font-size:13px;} .sm-pc__urgency{font-size:12px;} .sm-pc__club5{font-size:13px;} .sm-pc__btn{font-size:13px;padding:10px 6px;gap:5px;} .sm-pc__btn i{font-size:16px;} .sm-pc__vlabel{font-size:10px;} .sm-pc__vswatch{font-size:11px;padding:4px 7px;} .sm-pc__variants{left:12px;bottom:10px;max-width:calc(100% - 24px);} /* Categories: single column */ .sm-cats{padding:36px 0;} .sm-cats__grid{grid-template-columns:1fr;} .sm-cat__media{height:180px;} /* Trust / institutes marks wrap tighter */ .sm-trust{padding:36px 0;} .sm-trust__marks{gap:12px;margin:24px 0;} .sm-trust__mark{width:60px;height:60px;} .sm-institutes{padding:36px 0;} .sm-institutes__logo{width:140px;height:66px;} /* Awards stack */ .sm-awards{padding:36px 0;} .sm-awards__grid{gap:28px;} .sm-award{width:100%;max-width:320px;} /* Help & newsletter stack */ .sm-help{padding:36px 0;} .sm-help__wrap{flex-direction:column;gap:28px;} .sm-help__support,.sm-help__news{flex-basis:auto;max-width:100%;width:100%;} .sm-help__phone{font-size:28px;} } /* --------------------------------------------------------------------------- * CAMPAIGN BANNER (type=banner) — [sm_banner] shortcode + homepage banner slot * Full-width responsive image; swaps desktop/mobile at 767px. * ------------------------------------------------------------------------- */ .sm-cbanner{width:100%;} .sm-cbanner picture{display:contents;} .sm-cbanner__img{display:block;width:100%;height:auto;border-radius:var(--card-radius);} .sm-cbanner-link{display:block;text-decoration:none;} /* --------------------------------------------------------------------------- * LEGAL / INFO PAGES — page-legal.php (Template: "Legal / Info Page") * Desktop: left rail + content. Mobile: horizontal chip nav + content. * Figma 619:2 (desktop), 621:2 (mobile). Radius keyed to brand tokens so * sharp-corner brands (Rovus) and rounded brands (Dormeo/Delimano) both track. * ------------------------------------------------------------------------- */ .sm-legal{max-width:1440px;margin:0 auto;padding:20px 40px 72px;box-sizing:border-box;} /* Breadcrumb */ .sm-legal__crumb{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);margin-bottom:20px;} .sm-legal__crumb a{color:var(--muted);text-decoration:none;} .sm-legal__crumb a:hover{color:var(--brand);} .sm-legal__crumb-sep{color:var(--muted);} .sm-legal__crumb-current{color:var(--brand);} /* Two-column grid */ .sm-legal__grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px;align-items:start;} /* Left rail */ .sm-legal__nav{background:var(--bg);border-radius:var(--card-radius);padding:20px;box-sizing:border-box;position:sticky;top:24px;} .sm-legal__nav-title{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--muted);text-transform:none;} .sm-legal__nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;} .sm-legal__nav-link{display:block;padding:11px 14px;border-radius:calc(var(--card-radius) * .6);font-size:15px;line-height:1.3;color:var(--ink);text-decoration:none;transition:background .15s ease,color .15s ease;} .sm-legal__nav-link:hover{background:var(--surface);} .sm-legal__nav-link.is-active{background:var(--brand);color:#fff;font-weight:700;} .sm-legal__nav-link.is-active:hover{background:var(--brand);} /* Content body */ .sm-legal__body{min-width:0;} .sm-legal__title{margin:0;font-size:34px;line-height:1.24;font-weight:700;color:var(--brand);} .sm-legal__updated{margin:6px 0 0;font-size:14px;color:var(--muted);} .sm-legal__rule{height:1px;background:var(--line);margin:20px 0 28px;} /* Rendered content (the_content) */ .sm-legal__content{color:var(--ink);font-size:16px;line-height:1.63;} .sm-legal__content > *:first-child{margin-top:0;} .sm-legal__content h2{font-size:22px;line-height:1.35;font-weight:700;color:var(--ink);margin:32px 0 10px;} .sm-legal__content h3{font-size:18px;line-height:1.4;font-weight:700;color:var(--ink);margin:26px 0 8px;} .sm-legal__content p{margin:0 0 16px;} .sm-legal__content ul,.sm-legal__content ol{margin:0 0 16px;padding-left:22px;} .sm-legal__content li{margin:0 0 8px;} .sm-legal__content a{color:var(--sky-accent);text-decoration:underline;} .sm-legal__content strong{font-weight:700;} /* Info callout: wrap content in a .sm-legal-callout block (reusable block/HTML) */ .sm-legal__content .sm-legal-callout{background:var(--brand-tint);border-radius:var(--card-radius);padding:20px 24px;margin:24px 0;} .sm-legal__content .sm-legal-callout > *:first-child{margin-top:0;} .sm-legal__content .sm-legal-callout > *:last-child{margin-bottom:0;} .sm-legal__content .sm-legal-callout strong, .sm-legal__content .sm-legal-callout h3{color:var(--brand);} /* Tablet: rail narrows */ @media (max-width:1023px){ .sm-legal{padding:20px 24px 56px;} .sm-legal__grid{grid-template-columns:240px minmax(0,1fr);gap:28px;} } /* Mobile: nav becomes a horizontal chip scroller above the content */ @media (max-width:767px){ .sm-legal{padding:20px 16px 40px;} .sm-legal__crumb{font-size:13px;margin-bottom:14px;} .sm-legal__grid{display:block;} .sm-legal__nav{position:static;background:transparent;border-radius:0;padding:0;margin:0 0 18px;} .sm-legal__nav-title{display:none;} .sm-legal__nav-list{flex-direction:row;flex-wrap:nowrap;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;margin:0 -16px;padding-left:16px;padding-right:16px;} .sm-legal__nav-list::-webkit-scrollbar{display:none;} .sm-legal__nav-list > li{flex:0 0 auto;} .sm-legal__nav-link{white-space:nowrap;padding:9px 14px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:13.5px;} .sm-legal__nav-link:hover{background:var(--bg);} .sm-legal__nav-link.is-active{background:var(--brand);border-color:var(--brand);} .sm-legal__title{font-size:26px;line-height:1.23;} .sm-legal__updated{font-size:13px;} .sm-legal__rule{margin:16px 0 22px;} .sm-legal__content{font-size:15px;line-height:1.6;} .sm-legal__content h2{font-size:18px;margin:26px 0 8px;} .sm-legal__content h3{font-size:16px;margin:22px 0 6px;} .sm-legal__content .sm-legal-callout{padding:18px;} } /* --------------------------------------------------------------------------- * CLUB5 PRICING EXAMPLE — [sm_club5_example] * Two-panel card: white product panel (left) + sky pricing panel (right). * Random real product with a CLUB5 price. Tokens keep it on-brand per site. * ------------------------------------------------------------------------- */ .sm-c5ex{display:grid;grid-template-columns:1fr 1fr;max-width:900px;margin:36px auto 0;border:1px solid var(--line);border-radius:var(--card-radius);overflow:hidden;background:var(--surface);} .sm-c5ex__media{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:40px 32px;} .sm-c5ex__media .sm-c5ex__img{width:auto;max-width:260px;height:auto;max-height:240px;object-fit:contain;display:block;} .sm-c5ex__name{margin:6px 0 0;font-size:20px;font-weight:700;color:var(--heading);line-height:1.3;} .sm-c5ex__name-lnk{color:inherit;text-decoration:none;} .sm-c5ex__name-lnk:hover{text-decoration:underline;} .sm-c5ex__spec{margin:0;font-size:15px;color:var(--muted);} .sm-c5ex__pricing{background:var(--brand-tint);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:40px 40px;} .sm-c5ex__reg-l{margin:0;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--muted);} .sm-c5ex__reg{margin:0 0 14px;font-size:26px;font-weight:700;color:var(--muted);text-decoration:line-through;line-height:1.1;} .sm-c5ex__c5-l{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--brand);} .sm-c5ex__c5-l .sm-club5-star{width:22px;height:22px;} .sm-c5ex__ast{color:var(--sale);} .sm-c5ex__c5{margin:2px 0 16px;font-size:40px;font-weight:700;color:var(--brand);line-height:1.05;} .sm-c5ex__save{display:inline-flex;align-self:flex-start;align-items:center;background:var(--sale);color:#fff;font-weight:700;font-size:16px;padding:10px 18px;border-radius:var(--badge-radius);text-decoration:none;transition:filter .15s ease;} .sm-c5ex__save:hover{filter:brightness(.94);} @media (max-width:767px){ .sm-c5ex{grid-template-columns:1fr;max-width:100%;} .sm-c5ex__media{padding:28px 20px 22px;} .sm-c5ex__media .sm-c5ex__img{max-width:200px;max-height:190px;} .sm-c5ex__name{font-size:18px;} .sm-c5ex__pricing{padding:26px 22px 30px;} .sm-c5ex__reg{font-size:22px;} .sm-c5ex__c5{font-size:34px;} .sm-c5ex__save{font-size:15px;padding:9px 16px;} } /* ============================================================ * CLUB5 loyalty landing (page-club5.php) - restored from build 69. * Full-width marketing sections: hero, benefits, how-it-works, * member-pricing example, plans (Premium/Exclusive), FAQ, join band. * Design source: Figma 171:537. Token-driven, re-skins per brand. * ============================================================ */ .sm-club5{--c5-gutter:40px;--c5-maxw:1440px;color:var(--ink);} .sm-club5 section{box-sizing:border-box;} .sm-club5 *{box-sizing:border-box;} /* shared section head */ .sm-club5-head{max-width:var(--c5-maxw);margin:0 auto;padding:0 var(--c5-gutter);text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;} .sm-club5-head__title{margin:0;font-size:30px;line-height:1.15;font-weight:700;color:var(--heading);} .sm-club5-head__sub{margin:0;max-width:660px;font-size:16px;line-height:1.5;color:var(--muted);} .sm-club5-star-sup{color:var(--sale);font-weight:700;} /* generic CLUB5 buttons */ .sm-club5-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:16px;font-weight:700;line-height:1;text-decoration:none;padding:16px 30px;border-radius:var(--btn-radius);border:1.5px solid transparent;transition:background .15s ease,color .15s ease,border-color .15s ease;cursor:pointer;} .sm-club5-btn--solid{background:var(--brand);color:#fff;border-color:var(--brand);} .sm-club5-btn--solid:hover{background:var(--brand-700);border-color:var(--brand-700);} .sm-club5-btn--ghost{background:transparent;color:var(--brand);border-color:var(--brand);} .sm-club5-btn--ghost:hover{background:var(--brand-tint);} /* ---- HERO ---- */ .sm-club5-hero{background:var(--brand-tint);} .sm-club5-hero__inner{max-width:var(--c5-maxw);margin:0 auto;padding:64px var(--c5-gutter);display:grid;grid-template-columns:minmax(0,1fr) 500px;gap:48px;align-items:center;} .sm-club5-hero__eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--brand);text-transform:uppercase;} .sm-club5-hero__title{margin:0 0 16px;font-size:44px;line-height:1.1;font-weight:700;color:var(--heading);} .sm-club5-hero__lede{margin:0 0 28px;max-width:560px;font-size:17px;line-height:1.55;color:var(--muted);} .sm-club5-hero__ctas{display:flex;flex-wrap:wrap;gap:14px;} .sm-club5-hero__art{display:flex;justify-content:center;} .sm-club5-hero__card{width:100%;max-width:440px;aspect-ratio:1.6/1;border-radius:calc(var(--card-radius) + 12px);background:linear-gradient(135deg,var(--brand),var(--brand-700));color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;padding:36px;box-shadow:0 18px 40px -12px rgba(0,15,46,.4);} .sm-club5-hero__card-mark{display:inline-flex;} .sm-club5-hero__card-mark .sm-club5-star{width:40px;height:40px;background:#fff;} .sm-club5-hero__card-name{font-size:34px;font-weight:700;letter-spacing:.02em;} .sm-club5-hero__card-name .sm-club5-star-sup{color:#fff;} .sm-club5-hero__card-tier{font-size:13px;font-weight:700;letter-spacing:.28em;opacity:.75;} /* ---- BENEFITS ---- */ .sm-club5-benefits{padding:64px 0;} .sm-club5-benefits__grid{max-width:var(--c5-maxw);margin:36px auto 0;padding:0 var(--c5-gutter);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;} .sm-club5-bcard{background:var(--surface);border:1px solid #eceff3;border-radius:var(--card-radius);box-shadow:0 6px 18px -4px rgba(0,15,46,.07);padding:26px 24px;display:flex;flex-direction:column;gap:14px;} .sm-club5-bcard__ic{width:52px;height:52px;border-radius:calc(var(--card-radius) * .5);background:var(--brand-tint);display:inline-flex;align-items:center;justify-content:center;color:var(--brand);font-size:26px;} .sm-club5-bcard__title{margin:0;font-size:17px;font-weight:700;line-height:1.25;color:var(--brand);} .sm-club5-bcard__text{margin:0;font-size:14px;line-height:1.5;color:#39414e;} /* ---- HOW IT WORKS ---- */ .sm-club5-how{padding:64px 0;background:var(--bg);} .sm-club5-how__steps{max-width:var(--c5-maxw);margin:36px auto 0;padding:0 var(--c5-gutter);list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;counter-reset:none;} .sm-club5-step{display:flex;flex-direction:column;gap:12px;} .sm-club5-step__num{width:48px;height:48px;border-radius:50%;background:var(--brand);color:#fff;font-size:22px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;} .sm-club5-step__title{margin:0;font-size:19px;font-weight:700;color:var(--heading);} .sm-club5-step__text{margin:0;font-size:15px;line-height:1.5;color:var(--muted);} /* ---- MEMBER PRICING EXAMPLE ---- */ .sm-club5-pricing{padding:64px 0;} .sm-club5-compare{max-width:760px;margin:36px auto 0;border:1px solid var(--line);border-radius:var(--card-radius);overflow:hidden;display:grid;grid-template-columns:320px minmax(0,1fr);} .sm-club5-compare__product{background:var(--surface);padding:34px 36px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;} .sm-club5-compare__thumb{width:180px;height:180px;border-radius:calc(var(--card-radius) * .5);background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--brand);font-size:72px;} .sm-club5-compare__name{margin:0;font-size:17px;font-weight:700;color:var(--brand);} .sm-club5-compare__meta{margin:0;font-size:13px;color:var(--muted);} .sm-club5-compare__prices{background:var(--brand-tint);padding:34px 36px;display:flex;flex-direction:column;justify-content:center;gap:14px;} .sm-club5-compare__reg{display:flex;flex-direction:column;gap:2px;} .sm-club5-compare__label{font-size:11px;font-weight:700;letter-spacing:.045em;color:var(--muted);} .sm-club5-compare__old{font-size:22px;font-weight:700;color:#8a93a0;text-decoration:line-through;} .sm-club5-compare__c5{display:flex;flex-direction:column;gap:4px;} .sm-club5-compare__c5lbl{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.045em;color:var(--brand);} .sm-club5-compare__c5lbl .sm-club5-star{width:22px;height:22px;} .sm-club5-compare__now{font-size:34px;font-weight:700;color:var(--brand);} .sm-club5-compare__save{align-self:flex-start;background:var(--sale);color:#fff;font-size:14px;font-weight:700;padding:8px 14px;border-radius:calc(var(--badge-radius) + 2px);} /* ---- PLANS ---- */ .sm-club5-plans{padding:64px 0;background:var(--bg);} .sm-club5-plans__row{max-width:var(--c5-maxw);margin:36px auto 0;padding:0 var(--c5-gutter);display:flex;gap:24px;justify-content:center;align-items:flex-start;flex-wrap:wrap;} .sm-club5-plan{width:400px;max-width:100%;background:var(--surface);border:1px solid #eceff3;border-radius:var(--card-radius);box-shadow:0 6px 18px -4px rgba(0,15,46,.07);overflow:hidden;display:flex;flex-direction:column;} .sm-club5-plan.is-featured{border:2px solid var(--brand);} .sm-club5-plan__band{background:var(--sale);padding:20px;text-align:center;} .sm-club5-plan.is-featured .sm-club5-plan__band{background:var(--brand);} .sm-club5-plan__name{color:#fff;font-size:22px;font-weight:700;letter-spacing:.045em;} .sm-club5-plan__body{padding:28px;display:flex;flex-direction:column;gap:16px;} .sm-club5-plan__subtitle{margin:0;font-size:15px;font-weight:700;color:var(--sale);} .sm-club5-plan.is-featured .sm-club5-plan__subtitle{color:var(--brand);} .sm-club5-plan__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;} .sm-club5-plan__item{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.4;color:#39414e;} .sm-club5-plan__item .sm-club5-plan__star{width:18px;height:18px;margin-top:1px;background:var(--sale);} .sm-club5-plan.is-featured .sm-club5-plan__item .sm-club5-plan__star{background:var(--brand);} .sm-club5-plan__cta{margin-top:0;display:inline-flex;align-items:center;justify-content:center;background:var(--sale);color:#fff;font-size:16px;font-weight:700;text-decoration:none;padding:15px 24px;border-radius:var(--btn-radius);transition:filter .15s ease;} .sm-club5-plan.is-featured .sm-club5-plan__cta{background:var(--brand);} .sm-club5-plan__cta:hover{filter:brightness(.93);} /* ---- FAQ ---- */ .sm-club5-faq{padding:64px 0;} .sm-club5-faq__list{max-width:820px;margin:36px auto 0;padding:0 var(--c5-gutter);} .sm-club5-faq__item{border-bottom:1px solid var(--line);} .sm-club5-faq__item:first-child{border-top:1px solid var(--line);} .sm-club5-faq__q{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;font-size:16px;font-weight:700;color:var(--ink);} .sm-club5-faq__q::-webkit-details-marker{display:none;} .sm-club5-faq__chev{font-size:20px;color:var(--muted);transition:transform .2s ease;flex:0 0 auto;} .sm-club5-faq__item[open] .sm-club5-faq__chev{transform:rotate(180deg);} .sm-club5-faq__a{margin:0;padding:0 24px 20px;font-size:15px;line-height:1.55;color:var(--muted);} /* ---- JOIN BAND ---- */ .sm-club5-join{padding:64px 0;background:var(--bg);} .sm-club5-join__card{max-width:820px;margin:0 auto;background:var(--brand);border-radius:var(--card-radius);padding:38px 44px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;} .sm-club5-join__copy{flex:1 1 440px;} .sm-club5-join__title{margin:0 0 8px;font-size:28px;font-weight:700;color:#fff;} .sm-club5-join__sub{margin:0;font-size:16px;line-height:1.5;color:rgba(255,255,255,.85);} .sm-club5-join__cta{background:#fff;color:var(--brand);border-color:#fff;flex:0 0 auto;} .sm-club5-join__cta:hover{background:var(--brand-tint);border-color:var(--brand-tint);} .sm-club5-join__cta i{font-size:18px;} /* ------------------------------------------------------------------ */ /* TABLET <=1023px */ /* ------------------------------------------------------------------ */ @media (max-width:1023px){ .sm-club5{--c5-gutter:24px;} .sm-club5-hero__inner{grid-template-columns:minmax(0,1fr);gap:32px;padding:48px var(--c5-gutter);} .sm-club5-hero__art{order:-1;justify-content:flex-start;} .sm-club5-hero__card{max-width:360px;} .sm-club5-hero__title{font-size:36px;} .sm-club5-benefits__grid{grid-template-columns:repeat(3,minmax(0,1fr));} .sm-club5-benefits,.sm-club5-how,.sm-club5-pricing,.sm-club5-plans,.sm-club5-faq,.sm-club5-join{padding:48px 0;} } /* ------------------------------------------------------------------ */ /* MOBILE <=767px */ /* ------------------------------------------------------------------ */ @media (max-width:767px){ .sm-club5{--c5-gutter:16px;} .sm-club5-head__title{font-size:24px;} .sm-club5-head__sub{font-size:15px;} .sm-club5-hero__inner{padding:32px var(--c5-gutter);} .sm-club5-hero__title{font-size:28px;} .sm-club5-hero__lede{font-size:16px;} .sm-club5-hero__ctas{flex-direction:column;align-items:stretch;} .sm-club5-btn{width:100%;} .sm-club5-hero__card{max-width:100%;padding:28px;} .sm-club5-hero__card-name{font-size:28px;} .sm-club5-benefits__grid{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:28px;} .sm-club5-how__steps{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:28px;} .sm-club5-compare{grid-template-columns:minmax(0,1fr);margin-top:28px;} .sm-club5-compare__thumb{width:150px;height:150px;font-size:60px;} .sm-club5-plans__row{flex-direction:column;align-items:stretch;gap:16px;margin-top:28px;} .sm-club5-plan{width:100%;} .sm-club5-faq__list{margin-top:28px;} .sm-club5-faq__q{padding:16px;font-size:15px;} .sm-club5-faq__a{padding:0 16px 16px;} .sm-club5-join__card{padding:28px 20px;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:20px;} .sm-club5-join__title{font-size:22px;} .sm-club5-join__cta{width:100%;} .sm-club5-benefits,.sm-club5-how,.sm-club5-pricing,.sm-club5-plans,.sm-club5-faq,.sm-club5-join{padding:40px 0;} } /* ========================================================================= Review popup (Figma 651:2). Modal card with product context, interactive star rating, and a native WooCommerce review form. Brand-tokenised where the theme has equivalents (navy -> --brand, borders -> --line); Figma literals kept for the scrim, star gold and thumb placeholder. ========================================================================= */ .sm-rev{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;padding:40px;box-sizing:border-box;} .sm-rev.is-open{display:flex;} .sm-rev__scrim{position:absolute;inset:0;background:rgba(11,18,32,.55);} .sm-rev__card{position:relative;width:560px;max-width:100%;max-height:calc(100vh - 80px);display:flex;flex-direction:column;background:#fff;border-radius:var(--card-radius);box-shadow:0 18px 48px 0 rgba(0,20,61,.28);overflow:hidden;} /* Header */ .sm-rev__head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;background:var(--brand);padding:20px 24px 20px 28px;} .sm-rev__title{margin:0;font-weight:700;font-size:20px;line-height:1.2;color:#fff;} .sm-rev__close{flex:0 0 auto;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);border:0;border-radius:calc(var(--card-radius) * .5);color:#fff;font-size:16px;cursor:pointer;transition:background .15s ease;} .sm-rev__close:hover{background:rgba(255,255,255,.22);} .sm-rev__close i{font-size:18px;line-height:1;} /* Body (scrolls if tall) */ .sm-rev__body{flex:1 1 auto;display:flex;flex-direction:column;gap:20px;padding:26px 28px;overflow-y:auto;} /* Product context */ .sm-rev__prod{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:calc(var(--card-radius) * .5);padding:12px 14px;}.sm-rev__thumb{flex:0 0 48px;width:48px;height:48px;border-radius:calc(var(--card-radius) * .5);background:#dce3ec;overflow:hidden;} .sm-rev__thumb-img,.sm-rev__thumb img{width:100%;height:100%;object-fit:cover;display:block;} .sm-rev__prod-txt{min-width:0;display:flex;flex-direction:column;gap:2px;} .sm-rev__prod-l{margin:0;color:var(--muted);font-size:13px;line-height:1.2;} .sm-rev__prod-n{margin:0;color:var(--brand);font-weight:700;font-size:15px;line-height:1.3;} /* Purchase hint: soft info note by default; stronger sale-tinted variant when the store requires a verified purchase and submit is blocked. */ .sm-rev__hint{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border-radius:calc(var(--card-radius) * .5);background:var(--brand-tint);color:var(--brand);font-size:13px;line-height:1.4;} .sm-rev__hint-ic{flex:0 0 auto;font-size:18px;line-height:1.25;} .sm-rev__hint--block{background:color-mix(in srgb,var(--sale) 8%,#fff);color:var(--sale);border:1px solid color-mix(in srgb,var(--sale) 30%,transparent);} /* Fields */ .sm-rev__field{display:flex;flex-direction:column;gap:8px;} .sm-rev__label{font-weight:700;font-size:14px;line-height:1.2;color:var(--ink);} .sm-rev__input{width:100%;box-sizing:border-box;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:calc(var(--card-radius) * .5);font:inherit;font-size:15px;color:var(--ink);line-height:1.3;transition:border-color .15s ease,box-shadow .15s ease;} .sm-rev__input::placeholder{color:#9aa1ac;} .sm-rev__input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent);} .sm-rev__input--static{color:var(--ink);background:var(--bg);} .sm-rev__textarea{min-height:96px;resize:vertical;} /* Stars */ .sm-rev__stars{display:flex;gap:6px;} .sm-rev__star{padding:0;background:none;border:0;cursor:pointer;line-height:1;color:#d1d5db;font-size:30px;transition:color .12s ease,transform .12s ease;} .sm-rev__star i{font-size:30px;line-height:1;display:block;} .sm-rev__star:hover{transform:scale(1.08);} .sm-rev__star.is-on{color:#f5a623;} .sm-rev__stars--nudge{animation:sm-rev-shake .4s ease;} @keyframes sm-rev-shake{0%,100%{transform:translateX(0);}20%,60%{transform:translateX(-5px);}40%,80%{transform:translateX(5px);}} /* Footer */ .sm-rev__foot{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:2px;padding-top:18px;border-top:1px solid var(--line);} .sm-rev__btn{font:inherit;font-weight:700;font-size:15px;line-height:1;border-radius:var(--btn-radius);cursor:pointer;transition:background .15s ease,opacity .15s ease;} .sm-rev__btn--cancel{padding:13px 22px;background:#fff;border:1px solid var(--line);color:var(--muted);} .sm-rev__btn--cancel:hover{background:var(--bg);} .sm-rev__btn--submit{padding:13px 24px;background:var(--brand);border:1px solid var(--brand);color:#fff;} .sm-rev__btn--submit:hover{background:var(--brand-700,var(--brand));opacity:.94;} .sm-rev__btn[disabled]{opacity:.5;cursor:not-allowed;} /* Trigger is now a