/*
Theme Name: Smurty
Author: Smurty
Description: Danish industrial WooCommerce storefront: bold yellow-and-black look with a subtle oil-drip header, outlined product cards with round picture windows, collapsible category accordion and product inquiries. Purchase controls are hidden only through CSS.
Version: 2.1.1
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: smurty
License: GPL v2 or later
*/

/* ==========================================================================
   1. Fonts (bundled, SIL OFL – see assets/fonts). Exo 2 = everything (as on schmier.at),
      Lilita One = a little personality, only for the big headings.
   ========================================================================== */
@font-face{font-family:"Exo 2";font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/exo-2-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Exo 2";font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/exo-2-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Lilita One";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/lilita-one-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lilita One";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/lilita-one-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ==========================================================================
   2. Tokens & base
   ========================================================================== */
:root{
  --paper:#fffdf5;--ink:#141410;--yellow:#ffca08;--line:#e2e1d8;--muted:#6c6c60;
  --yellow-soft:#ffe36e;--yellow-pale:#fff6cc;--star:#fdc21c;
  --bw:2px;
  --r-card:18px;--r-box:12px;
  --font-body:"Exo 2",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display:"Lilita One","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.7,.28,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background-color:var(--paper);background-image:radial-gradient(rgba(20,20,16,.055) 1.5px,transparent 1.6px);background-size:26px 26px;color:var(--ink);font-family:var(--font-body);font-size:16px;font-weight:500;line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button,input,select,textarea{font:inherit}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 5px var(--yellow)}
.screen-reader-text,.skip-link{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-link:focus{clip:auto;width:auto;height:auto;padding:12px 18px;background:var(--yellow);border:var(--bw) solid var(--ink);border-radius:var(--r-box);z-index:99;left:12px;top:12px}
.icon{display:block;flex:none;width:1.25em;height:1.25em}

/* ==========================================================================
   3. Header: dripping oil, centred search
   ========================================================================== */
.site-header{position:relative;z-index:5;background:var(--paper);border-bottom:var(--bw) solid var(--ink)}
.oil{display:block;position:absolute;pointer-events:none}
.oil--header{left:0;top:0;width:100%;height:116px;z-index:0}
.oil__goo{fill:var(--ink)}
.header-inner{position:relative;z-index:1;max-width:1500px;margin:0 auto;min-height:116px;padding:40px 42px 22px;display:grid;grid-template-columns:1fr minmax(300px,640px) 1fr;align-items:center;column-gap:28px}

/* Logo sits on a little paper plate so the oil can flow behind it */
.brand{justify-self:start;background:var(--paper);border:var(--bw) solid var(--ink);border-radius:14px;padding:6px 14px 8px;box-shadow:3px 3px 0 var(--yellow);transition:transform .2s var(--ease)}
.brand:hover{transform:translateY(-2px)}
.brand img,.brand .custom-logo{display:block;width:140px;height:auto;max-height:52px;object-fit:contain}
.brand .custom-logo-link{display:block}

.product-search{justify-self:center;width:100%;display:flex;align-items:center;height:56px;padding:0 6px 0 24px;background:#fff;border:var(--bw) solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.product-search:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.product-search:focus-within{box-shadow:4px 4px 0 var(--yellow);outline:2px solid var(--ink);outline-offset:3px}
.product-search input{flex:1;min-width:0;border:0;background:transparent;outline:0;box-shadow:none;padding:0;font-size:16px;font-weight:600;color:var(--ink)}
.product-search input::placeholder{color:#8a8a7c;font-weight:500}
.product-search input::-webkit-search-cancel-button{display:none}
.product-search button{flex:none;display:grid;place-items:center;width:42px;height:42px;border:var(--bw) solid var(--ink);border-radius:50%;background:var(--yellow);color:var(--ink);padding:0;transition:background .2s}
.product-search button .icon{width:20px;height:20px}
.product-search button:hover,.product-search:focus-within button{background:var(--yellow-soft)}
.product-search button:focus-visible{box-shadow:none}

.brand-note{justify-self:end;display:block;background:var(--yellow);border:var(--bw) solid var(--ink);border-radius:999px;padding:8px 18px;font-size:15px;font-weight:800;letter-spacing:.01em;line-height:1.3;color:var(--ink);box-shadow:3px 3px 0 var(--ink);white-space:nowrap;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s}
.brand-note:hover{background:var(--yellow-soft);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}

/* ==========================================================================
   4. Shell
   ========================================================================== */
.shop-shell{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:268px minmax(0,1fr);gap:44px;align-items:start;padding:40px 42px 40px;min-height:70vh}
.shop-main{min-width:0}

/* ==========================================================================
   5. Category sidebar (accordion)
   ========================================================================== */
.category-sidebar{position:sticky;top:20px}
.cat-panel{background:#fff;border:var(--bw) solid var(--ink);border-radius:var(--r-card);box-shadow:4px 4px 0 var(--ink);overflow:hidden}
.cat-panel__title{display:flex;align-items:center;justify-content:space-between;gap:10px;list-style:none;padding:14px 18px;background:var(--yellow);border-bottom:var(--bw) solid var(--ink);font:800 15px/1.2 var(--font-body);letter-spacing:.08em;text-transform:uppercase;cursor:default}
.cat-panel__title::-webkit-details-marker{display:none}
.cat-panel__label{display:inline-flex;align-items:center;gap:8px}
.cat-panel__label .icon{width:20px;height:20px}
.cat-panel__title>.icon{display:none}
.cat-panel__body{padding:14px 12px}

.all-products{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px 10px 16px;margin-bottom:12px;background:var(--ink);color:var(--yellow);border-radius:var(--r-box);font:800 15px/1.2 var(--font-body);letter-spacing:.02em;transition:background .2s}
.all-products:hover{background:#2a2a22}
.all-products__icon{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--yellow);color:var(--ink)}
.all-products__icon .icon{width:15px;height:15px}

.cat-filter{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:0 14px;background:var(--paper);border:var(--bw) solid var(--ink);border-radius:999px}
.cat-filter[hidden]{display:none}
.cat-filter .icon{width:17px;height:17px;color:var(--muted)}
.cat-filter input{flex:1;min-width:0;height:38px;border:0;background:transparent;outline:0;box-shadow:none;font-size:15px;font-weight:600;color:var(--ink)}
.cat-filter:focus-within{outline:2px solid var(--ink);outline-offset:2px}

.cat-nav{max-height:calc(100vh - 340px);min-height:160px;overflow-y:auto;overscroll-behavior:contain;margin-right:-6px;padding-right:6px;scrollbar-width:thin;scrollbar-color:var(--ink) transparent}
.category-tree,.category-tree ul{list-style:none;margin:0;padding:0}
.category-tree>.cat-item{margin-top:6px}
.cat-row{display:flex;align-items:stretch;gap:6px}
.cat-link{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-radius:10px;color:var(--ink);font-size:14.5px;font-weight:600;line-height:1.25;transition:background .2s,border-color .2s}
.cat-link:hover{background:var(--yellow-pale)}
.cat-name{min-width:0;overflow-wrap:break-word;hyphens:auto}
.cat-count{flex:none;padding:1px 8px;border:1.5px solid var(--line);border-radius:999px;background:var(--paper);color:var(--muted);font-size:11.5px;font-weight:700;line-height:1.5}
.category-tree>.cat-item>.cat-row>.cat-link{font-size:15px;font-weight:700;padding:9px 12px;background:var(--paper);border:var(--bw) solid var(--line)}
.category-tree>.cat-item>.cat-row>.cat-link:hover{border-color:var(--ink)}
.current-cat>.cat-row>.cat-link{background:var(--yellow)!important;border-color:var(--ink)!important}
.current-cat>.cat-row>.cat-link .cat-count{border-color:var(--ink);background:#fff;color:var(--ink)}
.in-trail:not(.current-cat)>.cat-row>.cat-link{background:var(--yellow-pale)}

.cat-toggle{display:none;flex:none;width:38px;place-items:center;padding:0;border:var(--bw) solid var(--ink);border-radius:10px;background:#fff;color:var(--ink);transition:background .2s}
.js .cat-toggle{display:grid}
.cat-toggle .icon{width:17px;height:17px;transition:transform .3s var(--ease)}
.cat-toggle:hover{background:var(--yellow-soft)}
.cat-toggle[aria-expanded=true]{background:var(--yellow)}
.cat-toggle[aria-expanded=true] .icon{transform:rotate(180deg)}

.cat-children>.children{list-style:none;margin:0 0 0 14px;padding:0 0 0 6px;border-left:3px solid var(--yellow)}
.cat-children>.children>li:first-child{margin-top:6px}
.cat-children>.children>li:last-child{margin-bottom:6px}
.children .cat-link{padding:6px 8px 6px 10px;font-size:14px;font-weight:500;gap:6px}
.children .cat-count{padding:0 7px;font-size:11px}
.children .cat-link:hover{background:var(--yellow-pale)}
/* Accordion animation (only when JS is running; without JS everything stays visible) */
.js .cat-parent>.cat-children{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.js .cat-parent.is-open>.cat-children{grid-template-rows:1fr}
.js .cat-parent>.cat-children>.children{min-height:0;overflow:hidden}
.js .cat-parent:not(.is-open)>.cat-children>.children{visibility:hidden;transition:visibility 0s .3s}
.cat-item.is-hidden{display:none}
.cat-empty{margin:10px 4px 0;font-size:14px;color:var(--muted)}
.cat-empty[hidden]{display:none}

/* ==========================================================================
   6. Shop toolbar, grid and product cards
   ========================================================================== */
.shop-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin:0 0 26px}
body.smurty-site .woocommerce-result-count{float:none;margin:0;padding:0;font-size:14px;font-weight:600;color:var(--muted)}
body.smurty-site .woocommerce-ordering{float:none;margin:0}
body.smurty-site .woocommerce-ordering select{appearance:none;-webkit-appearance:none;min-width:200px;padding:10px 42px 10px 16px;border:var(--bw) solid var(--ink);border-radius:var(--r-box);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141410' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/15px;box-shadow:2px 2px 0 var(--ink);color:var(--ink);font-size:14px;font-weight:700;cursor:pointer}

body.smurty-site ul.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:30px 26px;clear:both;margin:0;padding:4px 4px 0 0;list-style:none}
body.smurty-site ul.products::before,body.smurty-site ul.products::after{display:none}

/* Beats WooCommerce's "ul.products.columns-3 li.product{width:30.75%}" – the cause of the old narrow cards */
body.smurty-site ul.products[class*=columns-] li.product{float:none;clear:none;width:auto;margin:0;padding:0;position:relative;z-index:0;display:flex;flex-direction:column;background:#fff;border:var(--bw) solid var(--ink);border-radius:var(--r-card);box-shadow:4px 4px 0 var(--ink);text-align:left;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
body.smurty-site ul.products li.product:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
body.smurty-site ul.products li.product:has(:focus-visible){transform:translate(-2px,-3px);box-shadow:6px 7px 0 var(--ink)}
/* Lift only where there is a real pointer: on touch screens :hover sticks after a tap */
@media(hover:hover){
  body.smurty-site ul.products li.product:hover{transform:translate(-2px,-3px);box-shadow:6px 7px 0 var(--ink)}
  li.product:hover .card-media__disc img{transform:scale(1.06)}
  li.product:hover .product-link__icon{background:var(--yellow-soft)}
  li.product:hover .product-link__icon .icon{transform:translate(2px,-2px)}
}

body.smurty-site ul.products li.product .woocommerce-LoopProduct-link{display:flex;flex-direction:column;flex:1 1 auto;color:var(--ink)}
/* The product sits in a round window: the circle clips the picture, so nothing can poke out of it.
   The window is square because of the ::before spacer (works in every browser, no aspect-ratio or margins on a flex item),
   the yellow offset echoes the logo's shadow. No blend modes or nested clips here: they make phones drop picture tiles while scrolling. */
.card-media{display:block;padding:22px 24px 6px 28px}
.card-media__disc{position:relative;display:block;width:100%;overflow:hidden;isolation:isolate;background:#fff;border:var(--bw) solid var(--ink);border-radius:50%;box-shadow:-6px 6px 0 var(--yellow)}
.card-media__disc::before{content:"";display:block;padding-top:100%}
body.smurty-site ul.products li.product .card-media__disc img{position:absolute;top:0;left:0;width:100%;height:100%;max-width:none;margin:0;object-fit:contain;box-shadow:none;transition:transform .35s var(--ease)}
.card-cat{align-self:flex-start;max-width:calc(100% - 40px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:8px 20px 0;padding:2px 10px;background:var(--yellow-pale);border:1px solid rgba(20,20,16,.35);border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.09em;line-height:1.6;text-transform:uppercase}
body.smurty-site ul.products li.product .woocommerce-loop-product__title{margin:0;padding:8px 20px 14px;font:800 18px/1.25 var(--font-body);letter-spacing:0;overflow-wrap:break-word;hyphens:manual}
/* Review stars: WooCommerce's own star font still draws the glyphs; only position, size and colour are set here */
body.smurty-site ul.products li.product .star-rating{float:none;display:block;position:relative;margin:-4px 20px 14px;font-size:15px;line-height:1}
body.smurty-site .star-rating::before{color:#e4e0cd}
body.smurty-site .star-rating span::before{color:var(--star)}
body.smurty-site.woocommerce p.stars a{color:var(--star)}
body.smurty-site.woocommerce div.product .woocommerce-product-rating{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:0 0 14px}
body.smurty-site.woocommerce div.product .woocommerce-product-rating .star-rating{float:none;margin:0;font-size:17px}
body.smurty-site .woocommerce-review-link{font-size:14px;font-weight:600;color:var(--muted)}
.product-link{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:auto 20px 18px;padding-top:12px;border-top:1px solid var(--line);font:800 13px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase}
.product-link::after{content:"";position:absolute;inset:0;z-index:5} /* whole card is clickable */
.product-link__icon{display:grid;place-items:center;width:36px;height:36px;border:var(--bw) solid var(--ink);border-radius:50%;background:var(--yellow);transition:background .2s}
.product-link__icon .icon{width:17px;height:17px;transition:transform .2s var(--ease)}

/* Sub-category tiles (WooCommerce can show them inside the product grid) */
body.smurty-site ul.products li.product-category>a{display:flex;flex-direction:column;flex:1 1 auto;padding:22px 20px 18px;color:var(--ink)}
body.smurty-site ul.products li.product-category>a img{display:block;width:100%;height:auto;max-height:200px;margin:0;object-fit:contain;box-shadow:none}
body.smurty-site ul.products li.product-category .woocommerce-loop-category__title{margin:14px 0 0;padding:0;font:800 18px/1.25 var(--font-body);letter-spacing:0;overflow-wrap:break-word}
body.smurty-site ul.products li.product-category .woocommerce-loop-category__title mark{margin-left:6px;padding:1px 9px;background:var(--yellow);border:1px solid var(--ink);border-radius:999px;color:var(--ink);font:800 12px/1.5 var(--font-body);vertical-align:middle}

/* Pagination */
body.smurty-site nav.woocommerce-pagination{margin-top:46px;text-align:center}
body.smurty-site nav.woocommerce-pagination ul{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;border:0}
body.smurty-site nav.woocommerce-pagination ul li{float:none;margin:0;overflow:visible;border:0}
body.smurty-site nav.woocommerce-pagination ul li a,body.smurty-site nav.woocommerce-pagination ul li span{display:grid;place-items:center;min-width:44px;height:44px;padding:0 12px;border:var(--bw) solid var(--ink);border-radius:var(--r-box);background:#fff;color:var(--ink);font:800 15px/1 var(--font-body);box-shadow:2px 2px 0 var(--ink);transition:background .2s}
body.smurty-site nav.woocommerce-pagination ul li a:hover{background:var(--yellow-pale)}
body.smurty-site nav.woocommerce-pagination ul li span.current{background:var(--yellow);color:var(--ink)}

/* ==========================================================================
   7. Breadcrumb
   ========================================================================== */
body.smurty-site .woocommerce-breadcrumb:empty{display:none}
body.smurty-site .woocommerce-breadcrumb{margin:0 0 22px;padding:0;font-size:13px;font-weight:600;color:var(--muted)}
body.smurty-site .woocommerce-breadcrumb a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:3px}

/* ==========================================================================
   8. Single product
   ========================================================================== */
body.smurty-site.woocommerce div.product{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:0 52px;align-items:start}
body.smurty-site.woocommerce div.product>*{grid-column:1/-1}
body.smurty-site.woocommerce div.product div.images{grid-column:1;float:none;width:auto;margin:0 0 30px;padding:26px 26px 26px 32px;position:relative;background:#fff;border:var(--bw) solid var(--ink);border-radius:var(--r-card);box-shadow:4px 4px 0 var(--ink)}
/* Main picture clipped to the circle: with the WooCommerce slider that is .flex-viewport, without it the wrapper itself */
body.smurty-site.woocommerce div.product div.images>.flex-viewport{aspect-ratio:1/1;height:auto!important} /* the slider writes an inline height; the circle must stay round */
body.smurty-site.woocommerce div.product div.images>.flex-viewport,body.smurty-site.woocommerce div.product div.images>.woocommerce-product-gallery__wrapper{overflow:hidden;isolation:isolate;margin:0;background:#fff;border:var(--bw) solid var(--ink);border-radius:50%;box-shadow:-8px 8px 0 var(--yellow)}
body.smurty-site.woocommerce div.product div.images img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;box-shadow:none}
body.smurty-site.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2){width:auto}
body.smurty-site.woocommerce div.product div.images .flex-control-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:22px 0 0;padding:0;list-style:none}
body.smurty-site.woocommerce div.product div.images .flex-control-thumbs li{float:none;width:auto;border:var(--bw) solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
body.smurty-site.woocommerce div.product div.images .flex-control-thumbs img{opacity:.7;cursor:pointer}
body.smurty-site.woocommerce div.product div.images .flex-control-thumbs img.flex-active,body.smurty-site.woocommerce div.product div.images .flex-control-thumbs img:hover{opacity:1}
body.smurty-site.woocommerce div.product div.summary{grid-column:2;float:none;clear:none;width:auto;margin:0 0 30px}
body.smurty-site.woocommerce div.product .product_title{margin:0 0 18px;font:400 clamp(30px,3.6vw,46px)/1.08 var(--font-display);letter-spacing:.2px;overflow-wrap:break-word;hyphens:manual}
body.smurty-site.woocommerce div.product .product_title::after{content:"";display:block;width:56px;height:5px;margin-top:14px;background:var(--yellow);border-radius:3px}
body.smurty-site.woocommerce div.product .woocommerce-product-details__short-description{font-size:17px;line-height:1.6;color:#3c3c34}
body.smurty-site .product_meta{display:grid;gap:8px;margin-top:24px;font-size:13px;font-weight:600;color:var(--muted)}
body.smurty-site .product_meta>span{display:block}
body.smurty-site .product_meta a{padding:1px 9px;margin-left:2px;background:var(--yellow-pale);border:1px solid rgba(20,20,16,.35);border-radius:999px;color:var(--ink);font-weight:700}
body.smurty-site .product_meta a:hover{background:var(--yellow)}

/* Tabs */
body.smurty-site.woocommerce div.product .woocommerce-tabs{margin-top:34px}
body.smurty-site.woocommerce div.product .woocommerce-tabs ul.tabs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px;padding:0;overflow:visible;list-style:none}
body.smurty-site.woocommerce div.product .woocommerce-tabs ul.tabs::before,body.smurty-site.woocommerce div.product .woocommerce-tabs ul.tabs::after,body.smurty-site.woocommerce div.product .woocommerce-tabs ul.tabs li::before,body.smurty-site.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
body.smurty-site.woocommerce div.product .woocommerce-tabs ul.tabs li{margin:0;padding:0;background:#fff;border:var(--bw) solid var(--ink);border-radius:10px;transition:background .2s}
body.smurty-site.woocommerce div.product .woocommerce-tabs ul.tabs li:hover{background:var(--yellow-pale)}
body.smurty-site.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--yellow)}
body.smurty-site.woocommerce div.product .woocommerce-tabs ul.tabs li a{display:block;padding:9px 18px;font:800 13px/1.2 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
body.smurty-site.woocommerce div.product .woocommerce-tabs .panel{margin:0 0 30px;padding:24px 26px;background:#fff;border:var(--bw) solid var(--ink);border-radius:var(--r-card);box-shadow:4px 4px 0 var(--ink)}
.woocommerce-tabs h2,.related>h2,.upsells>h2{margin:0 0 18px;font:400 clamp(24px,2.6vw,32px)/1.15 var(--font-display);letter-spacing:.2px}
.related>h2,.upsells>h2{display:inline-block;margin-top:24px;padding-bottom:6px;border-bottom:4px solid var(--yellow)}
.related,.upsells{margin-top:30px}

/* ==========================================================================
   9. Product inquiry
   ========================================================================== */
.inquiry{position:relative;overflow:hidden;margin:26px 0 0;padding:36px 28px 28px;background:var(--yellow-pale);border:var(--bw) solid var(--ink);border-radius:var(--r-card);box-shadow:4px 4px 0 var(--ink)}
.inquiry::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--yellow);border-bottom:var(--bw) solid var(--ink);pointer-events:none}
.eyebrow{display:inline-block;padding:3px 12px;background:var(--yellow);border:var(--bw) solid var(--ink);border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.13em;line-height:1.6}
.inquiry h2{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:16px 0 8px;font:400 clamp(25px,2.6vw,32px)/1.12 var(--font-display);letter-spacing:.2px}
.inquiry__icon{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:var(--ink);color:var(--yellow)}
.inquiry__icon .icon{width:20px;height:20px}
.inquiry-product{margin:0 0 18px;padding-bottom:16px;border-bottom:1px solid rgba(20,20,16,.2);font-size:14px}
.inquiry label{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;line-height:1.3;text-transform:uppercase}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.inquiry input:not([type=hidden]),.inquiry textarea{display:block;width:100%;margin-top:6px;padding:11px 14px;background:#fff;border:var(--bw) solid var(--ink);border-radius:10px;color:var(--ink);font-size:16px;font-weight:500;letter-spacing:0;text-transform:none}
.inquiry textarea{resize:vertical;min-height:120px}
.inquiry input:focus,.inquiry textarea:focus{outline:2px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 5px var(--yellow)}
.privacy-note{margin:14px 0 18px;font-size:12px;line-height:1.6;color:#55554a}
.privacy-note a{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px}
.inquiry-send{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 12px 22px;background:var(--yellow);border:var(--bw) solid var(--ink);border-radius:var(--r-box);box-shadow:3px 3px 0 var(--ink);color:var(--ink);font:800 16px/1.2 var(--font-body);letter-spacing:.02em;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s}
.inquiry-send:hover{background:var(--yellow-soft);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.inquiry-send:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.inquiry-send__icon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--yellow)}
.inquiry-send__icon .icon{width:17px;height:17px}
.honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-notice{margin:0 0 18px;padding:12px 16px;background:var(--yellow);border:var(--bw) solid var(--ink);border-radius:10px;font-size:14px;font-weight:700}

/* ==========================================================================
   10. Footer: pool of oil with a moving wave on top
   ========================================================================== */
.site-footer{position:relative;margin-top:100px;background:var(--ink);color:var(--paper)}
.oil--footer{left:0;bottom:calc(100% - 1px);width:100%;height:50px}
.oil--footer .oil__wave--a{fill:var(--ink)}
.oil--footer .oil__wave--y{fill:var(--yellow)}
.footer-inner{max-width:1500px;margin:0 auto;padding:28px 42px 36px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 28px}
.footer-wordmark{padding:7px 14px 9px;background:var(--paper);border:var(--bw) solid var(--yellow);border-radius:12px}
.footer-wordmark img,.footer-wordmark .custom-logo{display:block;width:124px;height:auto;max-height:46px;object-fit:contain}
.footer-wordmark .custom-logo-link{display:block}
.footer-mail{font:800 17px/1.2 var(--font-body);letter-spacing:.02em;color:var(--yellow);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:4px;transition:text-decoration-color .2s}
.footer-mail:hover{text-decoration-color:var(--yellow)}
.footer-copy{font-size:13px;font-weight:600;color:rgba(255,253,245,.75)}
.footer-copy a{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px}

/* ==========================================================================
   11. Plain pages, 404
   ========================================================================== */
.page-content{max-width:850px;font-size:17px}
.page-content img{max-width:100%;height:auto}
.not-found{padding:30px 0 10px;text-align:center}
.not-found__code{margin:0;font:400 clamp(110px,22vw,210px)/.9 var(--font-display);color:var(--ink);text-shadow:4px 6px 0 var(--yellow)}
.not-found__text{max-width:520px;margin:18px auto 0;font-size:18px;font-weight:600}

/* VISUAL ONLY: price values, add-to-cart HTML, WooCommerce data and Product schema remain intact. */
.smurty-site .price,.smurty-site .woocommerce-Price-amount,.smurty-site .woocommerce-price-suffix,.smurty-site .onsale,.smurty-site .product form.cart,.smurty-site .products .add_to_cart_button,.smurty-site .products .product_type_simple,.smurty-site .products .product_type_variable,.smurty-site .products .product_type_grouped,.smurty-site .products .product_type_external,.smurty-site .single_add_to_cart_button,.smurty-site .added_to_cart,.smurty-site .wc-block-components-product-price,.smurty-site .wc-block-components-product-button{display:none!important}

/* ==========================================================================
   12. Oil animation (the SVGs themselves are built in inc/oil.php)
   ========================================================================== */
.oil__wave--a{animation:oil-slide-left 18s linear infinite}
.oil__wave--b{animation:oil-slide-right 13s linear infinite}
.oil--footer .oil__wave--a{animation:oil-slide-left-footer 12s linear infinite}
.oil--footer .oil__wave--y{animation:oil-slide-right-footer 16s linear infinite}
@keyframes oil-slide-left{to{transform:translateX(-380px)}}
@keyframes oil-slide-right{to{transform:translateX(250px)}}
@keyframes oil-slide-left-footer{to{transform:translateX(-300px)}}
@keyframes oil-slide-right-footer{to{transform:translateX(420px)}}

/* One drip: the stem grows, the bulb swells, the drop pinches off and falls, the stem snaps back.
   --len = how far it reaches, --fall = how far the drop falls, --dur / --delay desynchronise the drips.
   (storefront.js adapts --len / --fall to the free space; the stem rect is 120 units tall, scaled by --k.) */
.drip{--still:.6;--k:calc(var(--len)/120)}
.drip__stem{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(calc(var(--k)*var(--still)));animation:oil-stem var(--dur) var(--delay) infinite}
.drip__bulb{transform-box:fill-box;transform-origin:50% 50%;transform:translateY(calc(var(--len)*var(--still)*1px - 2px));animation:oil-bulb var(--dur) var(--delay) infinite}
.drip__fall{transform-box:fill-box;transform-origin:50% 50%;opacity:0;animation:oil-fall var(--dur) var(--delay) infinite}
.drip--landed .drip__fall{display:none}
@keyframes oil-stem{
  0%,5%{transform:scaleY(calc(var(--k)*.3));animation-timing-function:cubic-bezier(.45,.05,.55,.95)}
  58%{transform:scaleY(var(--k));animation-timing-function:cubic-bezier(.2,.8,.3,1)}
  62%{transform:scaleY(var(--k));animation-timing-function:cubic-bezier(.2,.9,.3,1)}
  70%{transform:scaleY(calc(var(--k)*.42))}
  80%,100%{transform:scaleY(calc(var(--k)*.3))}
}
@keyframes oil-bulb{
  0%,5%{transform:translateY(calc(var(--len)*.3px - 2px)) scale(.85);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}
  58%{transform:translateY(calc(var(--len)*1px - 2px)) scale(1.2);animation-timing-function:cubic-bezier(.2,.8,.3,1)}
  62%{transform:translateY(calc(var(--len)*1px - 2px)) scale(1.2);animation-timing-function:cubic-bezier(.2,.9,.3,1)}
  70%{transform:translateY(calc(var(--len)*.42px - 2px)) scale(.9)}
  80%,100%{transform:translateY(calc(var(--len)*.3px - 2px)) scale(.85)}
}
@keyframes oil-fall{
  0%,61.9%{opacity:0;transform:translateY(calc(var(--len)*1px - 2px)) scale(.8)}
  62%{opacity:1;transform:translateY(calc(var(--len)*1px - 2px)) scale(1);animation-timing-function:cubic-bezier(.5,0,1,.7)}
  90%{opacity:1;transform:translateY(calc(var(--len)*1px + var(--fall)*1px)) scale(.9)}
  100%{opacity:0;transform:translateY(calc(var(--len)*1px + var(--fall)*1px + 24px)) scale(.7)}
}
/* The animation only runs while header / footer are on screen (storefront.js toggles these classes) */
.header-offscreen .oil *,.footer-offscreen .oil *{animation-play-state:paused}

/* ==========================================================================
   13. Responsive
   ========================================================================== */
@media(max-width:1100px){
  .header-inner{grid-template-columns:1fr minmax(0,480px) 1fr;padding:40px 24px 20px}
  .brand-note{display:none}
  .shop-shell{grid-template-columns:232px minmax(0,1fr);gap:28px;padding:34px 24px 30px}
  body.smurty-site ul.products{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:26px 20px}
  body.smurty-site.woocommerce div.product{grid-template-columns:minmax(0,1fr);gap:0}
  body.smurty-site.woocommerce div.product div.images,body.smurty-site.woocommerce div.product div.summary{grid-column:1/-1}
  body.smurty-site.woocommerce div.product div.images{max-width:520px}
  .cat-panel__title{font-size:14px;padding:14px}
  .cat-panel__label .icon{display:none}
  .footer-inner{padding-left:24px;padding-right:24px}
}
@media(min-width:701px) and (max-width:860px){
  body.smurty-site ul.products{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))} /* narrow tablets keep two cards next to the sidebar */
}
@media(max-width:1000px){
  .header-inner{grid-template-columns:auto minmax(0,1fr);column-gap:22px}
  .product-search{justify-self:stretch}
}
@media(max-width:700px){
  .oil--header{height:106px}
  .header-inner{padding:36px 16px 16px;min-height:0;column-gap:14px}
  .brand{padding:4px 10px 6px;border-radius:12px}
  .brand img,.brand .custom-logo{width:100px;max-height:38px}
  .product-search{height:50px;padding-left:18px}
  .product-search input{font-size:16px}
  .product-search button{width:38px;height:38px}
  .shop-shell{display:block;padding:24px 16px 20px}
  .category-sidebar{position:static;margin-bottom:24px}
  .cat-panel__label .icon{display:block}
  .cat-panel__title{cursor:pointer;padding:13px 16px;font-size:14px}
  .cat-panel__title>.icon{display:block;width:22px;height:22px;transition:transform .3s var(--ease)}
  .cat-panel[open]>.cat-panel__title>.icon{transform:rotate(180deg)}
  .cat-panel:not([open])>.cat-panel__title{border-bottom-color:transparent}
  .cat-nav{max-height:55vh}
  .shop-toolbar{margin-bottom:20px}
  body.smurty-site .woocommerce-ordering select{min-width:0}
  /* two cards per row on phones */
  body.smurty-site ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px;padding:0 3px 0 0}
  body.smurty-site ul.products[class*=columns-] li.product{border-radius:14px;box-shadow:3px 3px 0 var(--ink)}
  .card-media{padding:12px 12px 2px 14px}
  .card-media__disc{box-shadow:-4px 4px 0 var(--yellow)}
  .card-cat{max-width:calc(100% - 20px);margin:8px 10px 0;font-size:9.5px;padding:1px 8px}
  body.smurty-site ul.products li.product .woocommerce-loop-product__title{padding:6px 10px 10px;font-size:15px;line-height:1.25}
  body.smurty-site ul.products li.product .star-rating{margin:-2px 10px 10px;font-size:13px}
  .product-link{margin:auto 10px 10px;padding-top:9px;font-size:11.5px}
  .product-link__icon{width:30px;height:30px}
  .product-link__icon .icon{width:14px;height:14px}
  body.smurty-site ul.products li.product-category>a{padding:14px 12px 12px}
  body.smurty-site ul.products li.product-category .woocommerce-loop-category__title{font-size:15px}
  body.smurty-site.woocommerce div.product div.images{padding:18px 16px 16px 22px}
  body.smurty-site.woocommerce div.product .woocommerce-tabs .panel{padding:20px 18px}
  .inquiry{padding:32px 18px 20px}
  .form-grid{grid-template-columns:1fr;gap:12px}
  .site-footer{margin-top:84px}
  .oil--footer{height:42px}
  .footer-inner{padding:24px 16px 30px;flex-direction:column;text-align:center;gap:14px}
}
@media(max-width:480px){
  .header-inner{grid-template-columns:minmax(0,1fr);justify-items:center;row-gap:14px;padding-top:36px}
  .brand img,.brand .custom-logo{width:118px}
  .brand{justify-self:center}
  .oil--header{height:116px}
}
@media(max-width:339px){
  body.smurty-site ul.products{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}