/* Theme Name: Shevolia Vitrine Theme URI: https://shevolia.com/ Author: Shevolia Author URI: https://shevolia.com/ Description: A light, product-first marketplace theme for Shevolia. The home page opens straight onto products, every surface has a working light and dark mode, and the whole thing is built mobile-first for phone, tablet and desktop. Version: 1.0.1 Requires at least: 6.0 Tested up to: 6.8 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: shevolia-vitrine Tags: e-commerce, two-columns, right-sidebar, custom-menu, custom-logo, featured-images, translation-ready, rtl-language-support WC requires at least: 6.0 WC tested up to: 9.9 */ /* ============================================================ 1. Tokens ------------------------------------------------------------ Light is the default and the dark set only redefines tokens, so no component rule ever has to know which mode it is in. Three states are covered: an explicit choice on , the OS preference, and the un-stamped default. ============================================================ */ :root{ --bg:#FFF9FB; --surface:#FFFFFF; --surface-2:#FDF2F6; --surface-3:#FBEAF1; --ink:#1F1626; --muted:#6B5F73; --line:#F2E3EB; --brand:#E0246B; --brand-2:#FF7A59; --brand-deep:#B4145A; --brand-wash:#FFEDF3; --violet:#8B5CF6; --violet-wash:#F1EBFE; --gold:#E0A33E; --gold-wash:#FDF3E2; --good:#0FA97E; --good-wash:#E6F8F1; --deal:#F4650C; --deal-wash:#FFF1E7; --grad:linear-gradient(135deg,var(--brand),var(--brand-2)); --shadow:0 1px 2px rgba(31,22,38,.05),0 10px 30px -14px rgba(224,36,107,.28); --shadow-lg:0 24px 60px -22px rgba(31,22,38,.32); --r:16px; --r-sm:10px; --wrap:1400px; --display:"Fraunces",Georgia,"Times New Roman",serif; --body:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; } @media (prefers-color-scheme: dark){ :root:not([data-mode="light"]){ --bg:#1A1220; --surface:#241A2C; --surface-2:#2E2237; --surface-3:#382A42; --ink:#F6EDF4; --muted:#B7A6BF; --line:#3A2C44; --brand:#FF5C93; --brand-2:#FF9271; --brand-deep:#FF87B2; --brand-wash:#3A1D2C; --violet-wash:#2C2444; --gold-wash:#3A2E1C; --good-wash:#123A31; --deal-wash:#3A2317; --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.55); --shadow-lg:0 24px 60px -22px rgba(0,0,0,.7); } } :root[data-mode="dark"]{ --bg:#1A1220; --surface:#241A2C; --surface-2:#2E2237; --surface-3:#382A42; --ink:#F6EDF4; --muted:#B7A6BF; --line:#3A2C44; --brand:#FF5C93; --brand-2:#FF9271; --brand-deep:#FF87B2; --brand-wash:#3A1D2C; --violet-wash:#2C2444; --gold-wash:#3A2E1C; --good-wash:#123A31; --deal-wash:#3A2317; --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.55); --shadow-lg:0 24px 60px -22px rgba(0,0,0,.7); } /* ============================================================ 2. Base ============================================================ */ *,*::before,*::after{box-sizing:border-box} /* An author display rule beats the UA rule for [hidden], which silently leaves panels open. Anything the theme hides with the attribute stays hidden. */ [hidden]{display:none !important} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important} } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,video{max-width:100%; height:auto; display:block} a{color:inherit; text-decoration:none} a:hover{color:var(--brand)} button,input,select,textarea{font:inherit; color:inherit} :focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:4px} h1,h2,h3,h4{font-family:var(--display); font-weight:600; line-height:1.15; margin:0 0 .5em; text-wrap:balance; letter-spacing:-.015em} h1{font-size:clamp(28px,4vw,44px)} h2{font-size:clamp(22px,2.6vw,30px)} h3{font-size:clamp(17px,1.8vw,20px)} h4{font-size:16px} p{margin:0 0 1em} .num{font-variant-numeric:tabular-nums} .sv-wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:14px} @media (min-width:760px){ .sv-wrap{padding-inline:24px} } @media (min-width:1100px){ .sv-wrap{padding-inline:32px} } .screen-reader-text{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0} .skip-link{position:absolute; left:-9999px; z-index:999; padding:12px 18px; background:var(--brand); color:#fff; border-radius:0 0 10px 0} .skip-link:focus{left:0; top:0; color:#fff} .sv-lead{color:var(--muted); max-width:62ch} .sv-sechead{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:14px; flex-wrap:wrap} .sv-sechead h2,.sv-sechead h3{margin:0} .sv-more{font-size:12.5px; font-weight:700; color:var(--brand); display:inline-flex; align-items:center; gap:5px; background:transparent; border:0; padding:0; font-family:inherit; cursor:pointer; transition:gap .2s,color .2s} .sv-more:hover{gap:9px; color:var(--brand-deep)} /* Buttons ---------------------------------------------------- */ .sv-btn, .woocommerce a.button,.woocommerce button.button,.woocommerce input.button, .woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt, .wp-block-button__link{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--body); font-size:13.5px; font-weight:700; line-height:1.2; padding:12px 22px; border-radius:999px; border:1px solid transparent; background:var(--grad); color:#fff; cursor:pointer; text-align:center; transition:transform .2s,box-shadow .2s,background .2s,color .2s; } .sv-btn:hover,.woocommerce a.button:hover,.woocommerce button.button:hover, .woocommerce input.button:hover,.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover, .wp-block-button__link:hover{ color:#fff; transform:translateY(-1px); box-shadow:0 10px 24px -8px var(--brand); } .sv-btn--ghost,.woocommerce a.button.wc-backward{background:transparent; color:var(--ink); border-color:var(--line); box-shadow:none} .sv-btn--ghost:hover,.woocommerce a.button.wc-backward:hover{background:var(--surface-2); border-color:var(--brand); color:var(--brand); transform:none; box-shadow:none} .sv-btn--sm{padding:9px 16px; font-size:12.5px} .sv-btn--full{width:100%} .woocommerce button.button:disabled,.woocommerce button.button:disabled[disabled]{opacity:.5; padding:12px 22px} /* Pills and badges ------------------------------------------- */ .sv-pill{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px} .sv-pill--new{background:var(--violet-wash); color:var(--violet)} .sv-pill--ship{background:var(--good-wash); color:var(--good)} .sv-pill--deal{background:var(--deal-wash); color:var(--deal)} .sv-pill--gold{background:var(--gold-wash); color:var(--gold)} /* ============================================================ 3. Utility strip + header ============================================================ */ .sv-util{background:var(--surface-2); border-bottom:1px solid var(--line); font-size:11.5px; color:var(--muted)} .sv-util__in{display:flex; align-items:center; gap:16px; padding:7px 0} .sv-util__sp{margin-left:auto; display:flex; align-items:center; gap:14px} .sv-util__hide{display:none} @media (min-width:760px){ .sv-util__hide{display:inline-flex} } .sv-tgl{display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:3px; cursor:pointer} .sv-tgl span{display:grid; place-items:center; width:24px; height:20px; border-radius:999px; font-size:11px; color:var(--muted); transition:background .25s,color .25s} .sv-tgl span[data-on="true"]{background:var(--grad); color:#fff} .sv-hdr{position:sticky; top:0; z-index:400; background:var(--surface); border-bottom:1px solid var(--line)} @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .sv-hdr{background:color-mix(in srgb,var(--surface) 80%,transparent); backdrop-filter:blur(16px) saturate(1.7); -webkit-backdrop-filter:blur(16px) saturate(1.7)} } body.admin-bar .sv-hdr{top:32px} @media (max-width:782px){ body.admin-bar .sv-hdr{top:46px} } .sv-hdr__in{display:flex; align-items:center; gap:12px; padding:12px 0} @media (min-width:760px){ .sv-hdr__in{padding:14px 0; gap:20px} } .sv-logo{font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:-.02em; white-space:nowrap; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent} .sv-logo:hover{color:transparent; opacity:.85} .sv-logo img{max-height:44px; width:auto} @media (min-width:760px){ .sv-logo{font-size:26px} } .sv-burger{display:inline-grid; place-items:center; width:38px; height:38px; border-radius:11px; border:1px solid var(--line); background:var(--surface); cursor:pointer; flex:none} .sv-burger svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.9} @media (min-width:1000px){ .sv-burger{display:none} } /* Search ----------------------------------------------------- */ .sv-search{flex:1; display:flex; min-width:0; border:0; border-radius:999px; background:var(--surface); overflow:hidden; box-shadow:0 0 0 2px var(--brand) inset; transition:width .5s cubic-bezier(.6,-.2,.2,1.3),box-shadow .25s} .sv-search:focus-within{box-shadow:0 0 0 2px var(--brand) inset,0 6px 22px -8px var(--brand)} .sv-search select{border:0; background:var(--surface-2); padding:0 10px; font-size:12.5px; color:var(--muted); max-width:150px; display:none; cursor:pointer} @media (min-width:1000px){ .sv-search select{display:block} } .sv-search input[type="search"],.sv-search input[type="text"]{flex:1; min-width:0; border:0; padding:11px 14px; background:transparent; font-size:14px; outline:none; color:var(--ink); -webkit-appearance:none; appearance:none} .sv-search button{border:0; background:var(--grad); color:#fff; padding:0 18px; cursor:pointer; display:grid; place-items:center} .sv-search button svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2.2} @media (max-width:639px){ .sv-search{width:44px; flex:none; margin-left:auto} .sv-search input,.sv-search select{width:0; flex:0 0 0; min-width:0; padding:0; opacity:0; pointer-events:none; transition:opacity .25s} .sv-search button{flex:1; padding:0; border-radius:999px} .sv-search[data-open="true"]{width:100%; flex:1; margin-left:0} .sv-search[data-open="true"] input{width:auto; flex:1; min-width:0; padding:11px 14px; opacity:1; pointer-events:auto} .sv-search[data-open="true"] button{flex:none; padding:0 18px; border-radius:0} } /* Header actions --------------------------------------------- */ .sv-acts{display:flex; align-items:center; gap:2px; margin-left:auto} .sv-act{display:flex; align-items:center; gap:7px; padding:8px 9px; border-radius:12px; position:relative; white-space:nowrap; border:0; background:transparent; color:inherit; cursor:pointer; transition:background .2s,color .2s} .sv-act:hover{background:var(--surface-2); color:var(--brand)} .sv-act svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.6; flex:none} .sv-act b{display:none; font-size:12.5px; font-weight:600} @media (min-width:1180px){ .sv-act b{display:block} } .sv-act i{position:absolute; top:-1px; right:-1px; font-style:normal; font-size:9.5px; font-weight:800; background:var(--grad); color:#fff; border-radius:999px; padding:1px 5px; line-height:1.5; box-shadow:0 0 0 2px var(--surface)} @media (min-width:1180px){ .sv-act i{position:static; box-shadow:none; padding:1px 6px} } /* Category rail ---------------------------------------------- */ /* The rail itself must not clip: the department panel is positioned inside it. Only the chip strip scrolls, so the "All departments" button never leaves. */ .sv-rail{background:var(--surface); border-bottom:1px solid var(--line); overflow:visible} .sv-rail__in{display:flex; gap:10px; padding:9px 14px; max-width:var(--wrap); margin-inline:auto; align-items:center} @media (min-width:760px){ .sv-rail__in{padding-inline:24px} } .sv-rail__scroll{display:flex; gap:6px; align-items:center; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; padding-block:2px} .sv-rail__scroll::-webkit-scrollbar{display:none} .sv-pillnav{display:flex; align-items:center; gap:4px; padding:5px; border-radius:50px; background:var(--surface-2); border:1px solid var(--line)} .sv-pillnav a{display:inline-flex; align-items:center; gap:6px; padding:8px 15px; border-radius:50px; font-size:12.5px; font-weight:600; color:var(--muted); white-space:nowrap; transition:background .3s,color .3s,transform .3s} .sv-pillnav a svg{width:14px; height:14px; flex:none; stroke:currentColor; fill:none; stroke-width:1.9} .sv-pillnav a:hover{color:var(--brand)} .sv-pillnav a.is-on{background:var(--grad); color:#fff; box-shadow:0 5px 16px -5px var(--brand)} .sv-chip{display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:999px; font-size:12.5px; font-weight:600; color:var(--muted); background:var(--surface-2); border:1px solid transparent; white-space:nowrap; transition:.18s} .sv-chip:hover{color:var(--brand); border-color:var(--brand); background:var(--brand-wash)} /* ============================================================ 4. Mobile menu drawer ============================================================ */ .sv-scrim{position:fixed; inset:0; background:rgba(31,22,38,.45); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s; z-index:500} .sv-scrim[data-open="true"]{opacity:1; visibility:visible} .sv-drawer{position:fixed; inset:0 auto 0 0; width:min(88vw,340px); background:var(--surface); border-right:1px solid var(--line); z-index:510; transform:translateX(-100%); transition:transform .42s cubic-bezier(.2,.8,.3,1); display:flex; flex-direction:column; box-shadow:var(--shadow-lg)} .sv-drawer[data-open="true"]{transform:none} .sv-drawer__h{display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid var(--line)} .sv-drawer__b{flex:1; overflow-y:auto; padding:8px 0; -webkit-overflow-scrolling:touch} .sv-drawer__f{padding:16px; border-top:1px solid var(--line)} .sv-x{width:34px; height:34px; border-radius:999px; border:1px solid var(--line); background:var(--surface); cursor:pointer; display:grid; place-items:center; font-size:15px; line-height:1} .sv-drawer .menu{list-style:none; margin:0; padding:0} .sv-drawer .menu li{border-bottom:1px solid var(--line)} .sv-drawer .menu li:last-child{border-bottom:0} .sv-drawer .menu a{display:block; padding:13px 18px; font-size:14px; font-weight:600} .sv-drawer .menu .sub-menu{list-style:none; margin:0; padding:0 0 6px 14px} .sv-drawer .menu .sub-menu a{font-weight:500; font-size:13px; color:var(--muted); padding:9px 18px} /* ============================================================ 5. Desktop primary nav ============================================================ */ .sv-nav{display:none} @media (min-width:1000px){ .sv-nav{display:block; border-bottom:1px solid var(--line); background:var(--surface)} .sv-nav__in{display:flex; align-items:center; gap:4px; max-width:var(--wrap); margin-inline:auto; padding:0 24px} .sv-nav ul{list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:2px} .sv-nav li{position:relative} .sv-nav a{display:block; padding:12px 14px; font-size:13.5px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent} .sv-nav a:hover,.sv-nav .current-menu-item>a{color:var(--brand); border-bottom-color:var(--brand)} .sv-nav .sub-menu{position:absolute; top:100%; left:0; min-width:220px; flex-direction:column; align-items:stretch; gap:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow-lg); padding:6px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:.22s; z-index:60} .sv-nav li:hover>.sub-menu,.sv-nav li:focus-within>.sub-menu{opacity:1; visibility:visible; transform:none} .sv-nav .sub-menu a{border-bottom:0; border-radius:8px; padding:9px 12px; font-weight:500} .sv-nav .sub-menu a:hover{background:var(--surface-2)} } /* ============================================================ 6. Product cards and grids ============================================================ */ .sv-grid{display:grid; gap:12px; grid-template-columns:repeat(2,1fr)} @media (min-width:560px){ .sv-grid{grid-template-columns:repeat(3,1fr); gap:14px} } @media (min-width:900px){ .sv-grid{grid-template-columns:repeat(4,1fr)} } @media (min-width:1300px){ .sv-grid{grid-template-columns:repeat(5,1fr)} } .woocommerce ul.products,.woocommerce-page ul.products{display:grid; gap:12px; margin:0 0 24px; padding:0; list-style:none; grid-template-columns:repeat(2,1fr)} @media (min-width:560px){ .woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(3,1fr); gap:14px} } @media (min-width:900px){ .woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(4,1fr)} } @media (min-width:1300px){ .woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(5,1fr)} } .woocommerce ul.products::before,.woocommerce ul.products::after{content:none} .woocommerce ul.products li.product{width:auto !important; margin:0 !important; float:none !important; clear:none !important} .sv-card,.woocommerce ul.products li.product{ background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:transform .24s,box-shadow .24s,border-color .24s; position:relative; } .sv-card:hover,.woocommerce ul.products li.product:hover{box-shadow:var(--shadow); transform:translateY(-3px); border-color:transparent} .sv-card__img{position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--surface-2)} .sv-card__img img{width:100%; height:100%; object-fit:cover; transition:transform .65s cubic-bezier(.2,.7,.2,1)} .sv-card:hover .sv-card__img img,.woocommerce ul.products li.product:hover .sv-card__img img{transform:scale(1.06)} .sv-card__b{padding:10px; display:flex; flex-direction:column; gap:5px; flex:1} .sv-card__store{font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--brand)} .woocommerce ul.products li.product .woocommerce-loop-product__title, .sv-card__name{font-family:var(--body); font-size:13px; font-weight:500; line-height:1.35; padding:0; margin:0; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden} .sv-card__foot{margin-top:auto; display:flex; align-items:baseline; gap:7px; flex-wrap:wrap} .sv-off{position:absolute; top:8px; left:8px; z-index:2; background:var(--grad); color:#fff; font-size:10.5px; font-weight:800; padding:4px 8px; border-radius:8px} .woocommerce span.onsale{position:absolute; top:8px; left:8px; right:auto; margin:0; min-width:0; min-height:0; line-height:1.5; background:var(--grad); color:#fff; font-size:10.5px; font-weight:800; padding:4px 8px; border-radius:8px} .sv-fav{position:absolute; top:7px; right:7px; z-index:2; width:30px; height:30px; border-radius:999px; background:var(--surface); border:1px solid var(--line); display:grid; place-items:center; cursor:pointer; transition:transform .2s} .sv-fav:hover{transform:scale(1.12)} .sv-fav svg{width:15px; height:15px; stroke:var(--muted); fill:none; stroke-width:1.9; transition:.2s} .sv-fav[aria-pressed="true"] svg{stroke:var(--brand); fill:var(--brand)} .sv-quick{position:absolute; left:8px; right:8px; bottom:8px; z-index:2; padding:9px; border-radius:9px; background:var(--grad); color:#fff; font-size:11.5px; font-weight:700; text-align:center; border:0; cursor:pointer; opacity:0; transform:translateY(8px); transition:.24s} .sv-card:hover .sv-quick,.sv-card:focus-within .sv-quick, .woocommerce ul.products li.product:hover .sv-quick{opacity:1; transform:none} @media (hover:none){ .sv-quick{opacity:1; transform:none} } .sv-stars{display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--muted)} .sv-stars b{color:var(--gold); letter-spacing:.5px; font-weight:400} .woocommerce ul.products li.product .price,.sv-price{color:var(--brand); font-weight:800; font-size:15px; font-variant-numeric:tabular-nums; margin:0; display:flex; align-items:baseline; gap:7px; flex-wrap:wrap} .woocommerce ul.products li.product .price del,.sv-price del,.sv-price s{color:var(--muted); font-weight:500; font-size:12.5px; opacity:1} .woocommerce ul.products li.product .price ins,.sv-price ins{text-decoration:none; color:var(--brand); font-weight:800} .woocommerce ul.products li.product a{padding:0} .woocommerce ul.products li.product .star-rating{font-size:.72em; margin:0; color:var(--gold); float:none} .woocommerce ul.products li.product .button{margin:0; width:100%; font-size:12px; padding:9px 12px} .woocommerce ul.products li.product .added_to_cart{display:none} .sv-ship{font-size:11px; color:var(--good); font-weight:600} .sv-sold{display:block; height:5px; border-radius:999px; background:var(--surface-2); overflow:hidden; margin-top:2px} .sv-sold i{display:block; height:100%; background:var(--grad)} /* ============================================================ 7. Hero and home sections ============================================================ */ .sv-hero{display:grid; gap:14px; margin:16px 0} @media (min-width:1000px){ .sv-hero{grid-template-columns:minmax(0,2.1fr) minmax(0,1fr)} } .sv-hero__main{position:relative; border-radius:var(--r); overflow:hidden; min-height:300px; display:flex; align-items:center; background:var(--surface-2); isolation:isolate} @media (min-width:1000px){ .sv-hero__main{min-height:380px} } .sv-hero__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1} .sv-hero__c{padding:26px 22px; max-width:34rem} @media (min-width:760px){ .sv-hero__c{padding:36px} } .sv-hero__c h1{margin-bottom:.35em} .sv-hero__eyebrow{display:inline-block; background:var(--grad); color:#fff; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:6px 14px; border-radius:999px; margin-bottom:14px} .sv-side{display:grid; gap:12px; align-content:start} .sv-panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px} .sv-coupon{border:1px dashed var(--brand); background:var(--brand-wash); border-radius:var(--r); padding:16px; display:flex; align-items:center; gap:14px; cursor:pointer; transition:transform .2s,box-shadow .2s} .sv-coupon:hover{transform:translateY(-2px); box-shadow:var(--shadow)} .sv-coupon>b{font-family:var(--display); font-size:26px; line-height:1; flex:none; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent} .sv-coupon code{font-family:var(--body); font-weight:800; font-size:12px; letter-spacing:.08em; color:var(--brand); background:var(--surface); border:1px dashed var(--brand); border-radius:6px; padding:1px 6px} .sv-trust{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin:14px 0 24px} @media (min-width:640px){ .sv-trust{grid-template-columns:repeat(4,1fr)} } .sv-trust div{background:var(--surface); padding:13px 15px; display:flex; align-items:center; gap:10px; font-size:12.5px; font-weight:600} .sv-trust svg{width:19px; height:19px; stroke:var(--good); fill:none; stroke-width:1.7; flex:none} .sv-section{margin:0 0 28px} .sv-flash{background:linear-gradient(135deg,var(--deal-wash),var(--brand-wash)); border-radius:var(--r); padding:16px; margin-bottom:24px} .sv-flash h2{color:var(--deal)} .sv-clock{display:inline-flex; gap:5px; align-items:center; font-size:12px; color:var(--muted); font-weight:600} .sv-clock b{background:var(--ink); color:var(--bg); border-radius:7px; padding:4px 8px; font-variant-numeric:tabular-nums; font-size:13px} .sv-scroller{display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory; scrollbar-width:thin} .sv-scroller>*{flex:0 0 160px; scroll-snap-align:start} @media (min-width:760px){ .sv-scroller>*{flex-basis:190px} } .sv-depts{display:grid; gap:10px; grid-template-columns:repeat(3,1fr)} @media (min-width:640px){ .sv-depts{grid-template-columns:repeat(4,1fr)} } @media (min-width:1000px){ .sv-depts{grid-template-columns:repeat(6,1fr)} } .sv-dept{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px; text-align:center; transition:.2s} .sv-dept:hover{border-color:var(--brand); transform:translateY(-2px); box-shadow:var(--shadow)} .sv-dept img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; margin-bottom:8px} .sv-dept span{font-size:12px; font-weight:600; display:block; line-height:1.3} /* ============================================================ 8. Single product ============================================================ */ .woocommerce div.product{display:grid; gap:24px; margin-top:20px} @media (min-width:900px){ .woocommerce div.product{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:start} } .woocommerce div.product div.images,.woocommerce div.product div.summary{width:auto !important; float:none !important; margin:0 !important} @media (min-width:900px){ .woocommerce div.product .woocommerce-tabs,.woocommerce div.product .related,.woocommerce div.product .up-sells{grid-column:1 / -1} } .woocommerce div.product div.images img{border-radius:var(--r)} .woocommerce div.product .product_title{font-size:clamp(22px,3vw,32px); margin-bottom:10px} .woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--brand); font-size:26px; font-weight:800; font-variant-numeric:tabular-nums} .woocommerce div.product p.price del{color:var(--muted); font-size:16px; font-weight:500} .woocommerce div.product p.price ins{text-decoration:none} .woocommerce div.product form.cart{margin:18px 0; display:flex; gap:10px; flex-wrap:wrap; align-items:center} .woocommerce div.product form.cart .button{flex:1; min-width:180px} .woocommerce div.product .woocommerce-tabs ul.tabs{padding:0; margin:0 0 16px; border-bottom:1px solid var(--line); display:flex; gap:4px; flex-wrap:wrap} .woocommerce div.product .woocommerce-tabs ul.tabs::before{content:none} .woocommerce div.product .woocommerce-tabs ul.tabs li{background:transparent; border:0; border-radius:0; margin:0; padding:0} .woocommerce div.product .woocommerce-tabs ul.tabs li::before,.woocommerce div.product .woocommerce-tabs ul.tabs li::after{content:none} .woocommerce div.product .woocommerce-tabs ul.tabs li a{padding:11px 14px; font-weight:600; font-size:13.5px; color:var(--muted); border-bottom:2px solid transparent} .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--brand); border-bottom-color:var(--brand)} .woocommerce .quantity .qty{width:74px; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--surface); text-align:center} .woocommerce div.product .stock{color:var(--good); font-weight:600} .woocommerce div.product .out-of-stock{color:var(--deal)} table.variations{width:100%; border:0} table.variations td{padding:6px 0; border:0} table.variations select{width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface)} /* ============================================================ 9. Cart, checkout, account ============================================================ */ .woocommerce table.shop_table{border:1px solid var(--line); border-radius:var(--r); border-collapse:separate; border-spacing:0; overflow:hidden; background:var(--surface)} .woocommerce table.shop_table th{background:var(--surface-2); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); padding:12px} .woocommerce table.shop_table td{border-top:1px solid var(--line); padding:14px 12px} .woocommerce table.shop_table img{width:64px; border-radius:8px} .woocommerce-cart .cart-collaterals .cart_totals{width:100%} @media (min-width:900px){ .woocommerce-cart-form{float:none; width:auto} .woocommerce-cart .cart-collaterals{float:none; width:auto} } .woocommerce #respond input#submit.alt,.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt{background:var(--grad)} .woocommerce form .form-row{padding:0; margin:0 0 14px} .woocommerce form .form-row label{font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:5px; display:block} .woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea, .woocommerce form .form-row select,.select2-container .select2-selection--single{ width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); height:auto; min-height:44px} .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:22px; color:var(--ink); padding-left:0} .select2-container--default .select2-selection--single .select2-selection__arrow{top:9px} .woocommerce-checkout #payment{background:var(--surface-2); border-radius:var(--r); border:1px solid var(--line)} .woocommerce-checkout #payment div.payment_box{background:var(--surface); border-radius:var(--r-sm)} .woocommerce-checkout #payment div.payment_box::before{border-bottom-color:var(--surface)} .woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--line)} .woocommerce-account .woocommerce-MyAccount-navigation{width:100%; float:none; margin-bottom:18px} @media (min-width:900px){ .woocommerce-account .woocommerce-MyAccount-navigation{width:236px; float:left; margin-right:28px} .woocommerce-account .woocommerce-MyAccount-content{width:calc(100% - 264px); float:left} } .woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none; margin:0; padding:0; display:grid; gap:4px} .woocommerce-account .woocommerce-MyAccount-navigation li a{display:block; padding:11px 14px; border-radius:var(--r-sm); font-size:13.5px; font-weight:600; color:var(--muted); background:var(--surface); border:1px solid var(--line)} .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a, .woocommerce-account .woocommerce-MyAccount-navigation li a:hover{background:var(--grad); color:#fff; border-color:transparent} .woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews,p.no-comments{ background:var(--surface-2); border-top:0; border-left:3px solid var(--brand); border-radius:var(--r-sm); color:var(--ink); padding:14px 16px 14px 44px} .woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{color:var(--brand); top:15px; left:16px} .woocommerce-error{border-left-color:var(--deal)} .woocommerce-error::before{color:var(--deal)} .woocommerce-message{border-left-color:var(--good)} .woocommerce-message::before{color:var(--good)} /* ============================================================ 10. Editorial pages, posts, comments ============================================================ */ .sv-page{padding:24px 0 40px} .sv-article{max-width:72ch; margin-inline:auto} .sv-article img{border-radius:var(--r)} .sv-article blockquote{margin:24px 0; padding:4px 0 4px 20px; border-left:3px solid var(--brand); font-family:var(--display); font-size:19px; color:var(--ink)} .sv-meta{font-size:12.5px; color:var(--muted); display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px} .sv-cardpost{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:.24s} .sv-cardpost:hover{transform:translateY(-3px); box-shadow:var(--shadow)} .sv-cardpost img{aspect-ratio:16/10; object-fit:cover; width:100%} .sv-cardpost__b{padding:16px} .sv-posts{display:grid; gap:16px; grid-template-columns:1fr} @media (min-width:640px){ .sv-posts{grid-template-columns:repeat(2,1fr)} } @media (min-width:1000px){ .sv-posts{grid-template-columns:repeat(3,1fr)} } .sv-pagination{display:flex; gap:6px; justify-content:center; margin:28px 0; flex-wrap:wrap} .sv-pagination .page-numbers{display:grid; place-items:center; min-width:38px; height:38px; padding:0 12px; border-radius:10px; border:1px solid var(--line); background:var(--surface); font-size:13px; font-weight:600} .sv-pagination .page-numbers.current,.sv-pagination .page-numbers:hover{background:var(--grad); color:#fff; border-color:transparent} .woocommerce nav.woocommerce-pagination ul{border:0; display:flex; gap:6px; justify-content:center} .woocommerce nav.woocommerce-pagination ul li{border:0; margin:0} .woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{ display:grid; place-items:center; min-width:38px; height:38px; padding:0 12px; border-radius:10px; border:1px solid var(--line); background:var(--surface); font-size:13px; font-weight:600} .woocommerce nav.woocommerce-pagination ul li span.current,.woocommerce nav.woocommerce-pagination ul li a:hover{background:var(--grad); color:#fff; border-color:transparent} /* ============================================================ 11. Footer ============================================================ */ .sv-foot{background:var(--surface-2); border-top:1px solid var(--line); margin-top:36px; padding:34px 0 0} .sv-foot__cols{display:grid; gap:26px; grid-template-columns:1fr} @media (min-width:640px){ .sv-foot__cols{grid-template-columns:repeat(2,1fr)} } @media (min-width:1000px){ .sv-foot__cols{grid-template-columns:1.4fr repeat(3,1fr)} } .sv-foot h4{font-family:var(--body); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:12px} .sv-foot ul{list-style:none; margin:0; padding:0; display:grid; gap:9px} .sv-foot a{font-size:13.5px; color:var(--ink)} .sv-foot a:hover{color:var(--brand)} .sv-foot__bar{border-top:1px solid var(--line); margin-top:28px; padding:16px 0; font-size:12.5px; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:space-between} /* Social links ------------------------------------------------ */ .sv-social{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; padding:0; list-style:none} .sv-social a{display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--surface); border:1px solid var(--line); color:var(--muted); transition:transform .22s,background .22s,color .22s,border-color .22s} .sv-social a:hover{transform:translateY(-3px); background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 8px 20px -8px var(--brand)} .sv-social svg{width:19px; height:19px; fill:currentColor} .sv-social--sm a{width:34px; height:34px; border-radius:10px} .sv-social--sm svg{width:16px; height:16px} /* ============================================================ 12. Phone bottom bar ============================================================ */ .sv-dock{position:fixed; left:0; right:0; bottom:0; z-index:420; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; background:var(--surface); border-top:1px solid var(--line); padding:6px 6px calc(6px + env(safe-area-inset-bottom))} @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .sv-dock{background:color-mix(in srgb,var(--surface) 88%,transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px)} } .sv-dock a{display:grid; place-items:center; gap:3px; padding:7px 2px; border-radius:12px; font-size:10px; font-weight:600; color:var(--muted); position:relative} .sv-dock a svg{width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.7} .sv-dock a[aria-current="page"]{background:var(--grad); color:#fff} .sv-dock i{position:absolute; top:2px; right:calc(50% - 21px); font-style:normal; font-size:9px; font-weight:800; background:var(--brand); color:#fff; border-radius:999px; padding:0 5px; line-height:1.6} @media (min-width:1000px){ .sv-dock{display:none} } body.has-dock{padding-bottom:74px} @media (min-width:1000px){ body.has-dock{padding-bottom:0} } /* If something else on the site already pins a bar to the bottom — a WPCode snippet, a plugin — the theme stands down rather than stacking a second one. :has() handles it with no script; the html class is the fallback, set by vitrine.js for browsers without :has(). */ .sv-dock:has(~ nav.shevolia-mnav), .sv-dock:has(~ .shevolia-mnav), html.sv-other-dock .sv-dock{display:none !important} html.sv-other-dock body.has-dock{padding-bottom:0} /* ============================================================ 13. Toasts — one for every action the shopper takes ============================================================ */ .sv-toasts{position:fixed; right:14px; bottom:14px; z-index:600; display:flex; flex-direction:column; gap:9px; align-items:flex-end; pointer-events:none} @media (max-width:639px){ .sv-toasts{left:14px; right:14px; bottom:86px; align-items:stretch} } .sv-toast{display:flex; gap:11px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:13px; box-shadow:var(--shadow-lg); padding:12px 14px; min-width:236px; max-width:340px; position:relative; overflow:hidden; animation:sv-toast-in .34s cubic-bezier(.2,.8,.3,1)} .sv-toast[data-out="true"]{animation:sv-toast-out .3s forwards} @keyframes sv-toast-in{from{opacity:0; transform:translateY(14px) scale(.96)} to{opacity:1; transform:none}} @keyframes sv-toast-out{to{opacity:0; transform:translateX(20px)}} .sv-toast em{width:32px; height:32px; border-radius:10px; display:grid; place-items:center; flex:none; font-style:normal; font-size:15px; background:var(--brand-wash); color:var(--brand)} .sv-toast b{display:block; font-size:13px; font-weight:800} .sv-toast span{display:block; font-size:12px; color:var(--muted); margin-top:2px} .sv-toast i{position:absolute; left:0; bottom:0; height:2.5px; width:100%; background:var(--grad); transform-origin:left; animation:sv-toast-bar 3.6s linear forwards} @keyframes sv-toast-bar{from{transform:scaleX(1)} to{transform:scaleX(0)}} .sv-toast--good em{background:var(--good-wash); color:var(--good)} .sv-toast--gold em{background:var(--gold-wash); color:var(--gold)} .sv-toast--deal em{background:var(--deal-wash); color:var(--deal)} .sv-toast--violet em{background:var(--violet-wash); color:var(--violet)} /* Back to top -------------------------------------------------- */ .sv-top{position:fixed; right:14px; bottom:88px; z-index:410; width:42px; height:42px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; display:grid; place-items:center; box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(10px); transition:.28s} .sv-top[data-on="true"]{opacity:1; visibility:visible; transform:none} .sv-top svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2} @media (min-width:1000px){ .sv-top{bottom:20px} } /* ============================================================ 14. Dokan — keep vendor screens inside the theme's skin ============================================================ */ .dokan-dashboard .dokan-dashboard-wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:14px} @media (min-width:760px){ .dokan-dashboard .dokan-dashboard-wrap{padding-inline:24px} } .dokan-dashboard .dokan-dashboard-menu{border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:var(--surface)} .dokan-dashboard .dokan-dashboard-menu li a{color:var(--ink)} .dokan-dashboard .dokan-dashboard-menu li.active,.dokan-dashboard .dokan-dashboard-menu li:hover{background:var(--grad)} .dokan-dashboard .dokan-dashboard-menu li.active a,.dokan-dashboard .dokan-dashboard-menu li:hover a{color:#fff} .dokan-dashboard .dokan-dashboard-content{background:var(--surface); border:1px solid var(--line); border-radius:var(--r)} .dokan-store-sidebar,.dokan-single-store{border-radius:var(--r)} .dokan-btn,.dokan-btn-theme{background:var(--grad) !important; border-color:transparent !important; color:#fff !important; border-radius:999px !important} /* ============================================================ 15. Right-to-left ============================================================ */ html[dir="rtl"] .sv-acts{margin-left:0; margin-right:auto} html[dir="rtl"] .sv-util__sp{margin-left:0; margin-right:auto} html[dir="rtl"] .sv-drawer{inset:0 0 0 auto; transform:translateX(100%); border-right:0; border-left:1px solid var(--line)} html[dir="rtl"] .sv-drawer[data-open="true"]{transform:none} html[dir="rtl"] .sv-off,html[dir="rtl"] .woocommerce span.onsale{left:auto; right:8px} html[dir="rtl"] .sv-fav{right:auto; left:7px} html[dir="rtl"] .sv-article blockquote{border-left:0; border-right:3px solid var(--brand); padding:4px 20px 4px 0} html[dir="rtl"] .sv-toasts{right:auto; left:14px; align-items:flex-start} html[dir="rtl"] .sv-top{right:auto; left:14px} html[dir="rtl"] .woocommerce-account .woocommerce-MyAccount-navigation{float:right; margin-right:0; margin-left:28px} html[dir="rtl"] .woocommerce-account .woocommerce-MyAccount-content{float:right} /* ============================================================ 16. Print ============================================================ */ @media print{ .sv-hdr,.sv-rail,.sv-nav,.sv-dock,.sv-toasts,.sv-top,.sv-foot,.sv-util{display:none !important} body{background:#fff; color:#000; padding:0} } /* ============================================================ 17. Department directory — the mega menu ------------------------------------------------------------ One button opens the whole catalogue. On a wide screen it is a two-column panel: departments down the left, the types inside the chosen one on the right. On a phone the same markup becomes a full-height sheet, because a two-column mega menu is unusable with a thumb. ============================================================ */ .sv-mega{position:relative; flex:none} .sv-mega__btn{display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border:0; border-radius:50px; background:var(--grad); color:#fff; font-size:12.5px; font-weight:700; white-space:nowrap; cursor:pointer; box-shadow:0 6px 18px -8px var(--brand); transition:transform .2s,box-shadow .2s} .sv-mega__btn:hover{transform:translateY(-1px); box-shadow:0 10px 24px -8px var(--brand); color:#fff} .sv-mega__btn svg{width:15px; height:15px; flex:none; stroke:currentColor; fill:none; stroke-width:1.9} .sv-mega__btn i{font-style:normal; font-size:10px; transition:transform .25s} .sv-mega__btn[aria-expanded="true"] i{transform:rotate(180deg)} .sv-mega__panel{position:absolute; top:calc(100% + 10px); left:0; z-index:450; width:min(1040px,92vw); background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-lg); overflow:hidden; opacity:0; visibility:hidden; transform:translateY(-10px) scale(.99); transition:opacity .24s,transform .24s,visibility .24s} .sv-mega__panel[data-open="true"]{opacity:1; visibility:visible; transform:none} .sv-mega__head{display:none; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line)} .sv-mega__head strong{font-size:15px} .sv-mega__body{display:grid; grid-template-columns:250px minmax(0,1fr); min-height:340px; max-height:min(70vh,520px)} .sv-mega__parents{list-style:none; margin:0; padding:8px; overflow-y:auto; background:var(--surface-2); border-right:1px solid var(--line)} .sv-mega__parents button{display:flex; width:100%; align-items:center; gap:8px; padding:10px 12px; border:0; border-radius:10px; background:transparent; color:var(--ink); font-family:inherit; font-size:13px; font-weight:600; text-align:left; cursor:pointer; transition:background .18s,color .18s} .sv-mega__parents button span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .sv-mega__parents button em{font-style:normal; font-size:11px; font-weight:700; color:var(--muted); background:var(--surface); border-radius:999px; padding:1px 7px; flex:none} .sv-mega__parents button i{font-style:normal; color:var(--muted); flex:none; transition:transform .2s} .sv-mega__parents button:hover{background:var(--surface); color:var(--brand)} .sv-mega__parents button[aria-selected="true"]{background:var(--grad); color:#fff} .sv-mega__parents button[aria-selected="true"] em{background:rgba(255,255,255,.22); color:#fff} .sv-mega__parents button[aria-selected="true"] i{color:#fff; transform:translateX(2px)} .sv-mega__panes{padding:18px 20px; overflow-y:auto} .sv-mega__paneHead{display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line)} .sv-mega__paneHead h3{margin:0} .sv-mega__types{display:grid; gap:18px 22px; grid-template-columns:repeat(auto-fill,minmax(180px,1fr))} .sv-mega__typeHead{display:flex; align-items:center; gap:9px; margin-bottom:7px} .sv-mega__typeHead img{width:34px; height:34px; border-radius:9px; object-fit:cover; flex:none} .sv-mega__typeHead b{font-size:13px; font-weight:800} .sv-mega__dot{width:34px; height:34px; border-radius:9px; flex:none; background:var(--grad); color:#fff; display:grid; place-items:center; font-family:var(--display); font-size:15px; font-weight:600; line-height:1} .sv-mega__type ul{list-style:none; margin:0; padding:0 0 0 43px; display:grid; gap:5px} .sv-mega__type ul a{font-size:12.5px; color:var(--muted); display:block; line-height:1.4} .sv-mega__type ul a:hover{color:var(--brand)} .sv-mega__all{font-weight:700; color:var(--brand) !important} /* Below the desktop breakpoint the panel becomes a sheet. */ @media (max-width:900px){ .sv-mega{position:static} .sv-mega__panel{position:fixed; inset:0; width:auto; max-width:none; border:0; border-radius:0; transform:translateY(100%); transition:transform .38s cubic-bezier(.2,.8,.3,1),visibility .38s; opacity:1} .sv-mega__panel[data-open="true"]{transform:none} .sv-mega__head{display:flex} /* A column, not a grid: the chip row takes its own height and the pane gets the rest. As a grid row it was taking half the sheet. */ .sv-mega__body{display:flex; flex-direction:column; max-height:none; min-height:0; height:calc(100% - 57px)} .sv-mega__parents{flex:0 0 auto; border-right:0; border-bottom:1px solid var(--line); display:flex; gap:6px; overflow-x:auto; overflow-y:hidden; padding:10px; background:var(--surface); scrollbar-width:none} .sv-mega__parents::-webkit-scrollbar{display:none} .sv-mega__panes{flex:1; min-height:0} .sv-mega__parents li{flex:none} .sv-mega__parents button{width:auto; border-radius:999px; padding:8px 14px; background:var(--surface-2)} .sv-mega__parents button i{display:none} .sv-mega__panes{padding:16px; padding-bottom:calc(24px + env(safe-area-inset-bottom))} .sv-mega__types{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px} } /* ---------- the same tree as an accordion, inside the drawer ---------- */ .sv-acc{padding:6px 0 10px; border-bottom:1px solid var(--line)} .sv-acc__title{font-family:var(--body); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:10px 18px 6px; margin:0} .sv-acc__item{border-top:1px solid var(--line)} .sv-acc__item:first-of-type{border-top:0} .sv-acc__btn{display:flex; width:100%; align-items:center; gap:9px; padding:13px 18px; border:0; background:transparent; color:var(--ink); font-family:inherit; font-size:14px; font-weight:600; text-align:left; cursor:pointer} .sv-acc__btn span{flex:1; min-width:0} .sv-acc__btn em{font-style:normal; font-size:11px; font-weight:700; color:var(--muted); background:var(--surface-2); border-radius:999px; padding:1px 7px} .sv-acc__btn i{font-style:normal; font-size:16px; color:var(--muted); width:18px; text-align:center; transition:transform .25s} .sv-acc__btn[aria-expanded="true"]{color:var(--brand)} .sv-acc__btn[aria-expanded="true"] i{transform:rotate(45deg)} .sv-acc__body{padding:0 18px 12px; display:grid; gap:2px} .sv-acc__body>a{display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:9px; font-size:13px; font-weight:500; color:var(--muted)} .sv-acc__body>a:hover{background:var(--surface-2); color:var(--brand)} .sv-acc__body>a em{margin-left:auto; font-style:normal; font-size:11px; font-weight:700} .sv-acc__all{font-weight:700 !important; color:var(--brand) !important} .sv-acc__grand{display:flex; flex-wrap:wrap; gap:5px; padding:2px 10px 8px 10px} .sv-acc__grand a{font-size:11.5px; padding:4px 10px; border-radius:999px; background:var(--surface-2); color:var(--muted)} .sv-acc__grand a:hover{background:var(--brand-wash); color:var(--brand)} html[dir="rtl"] .sv-mega__panel{left:auto; right:0} html[dir="rtl"] .sv-mega__parents{border-right:0; border-left:1px solid var(--line)} html[dir="rtl"] .sv-mega__parents button{text-align:right} html[dir="rtl"] .sv-mega__type ul{padding:0 43px 0 0} html[dir="rtl"] .sv-acc__btn{text-align:right} html[dir="rtl"] .sv-acc__body>a em{margin-left:0; margin-right:auto} /* ============================================================ 18. The full category directory page ============================================================ */ .sv-dir{display:grid; gap:20px} .sv-dir__group{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px} .sv-dir__head{display:flex; align-items:center; gap:12px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line)} .sv-dir__head img{width:52px; height:52px; border-radius:12px; object-fit:cover; flex:none} .sv-dir__head h2{margin:0; font-size:20px} .sv-dir__head span{font-size:12px; color:var(--muted)} .sv-dir__cols{display:grid; gap:16px 22px; grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}