/* WhatsTK storefront layer — batch 03: home featured block, few-product catalog, empty states. Scoped to body.wtk-sf. */

/* ---------- Home: hide sections that would be empty ---------- */
html body.wtk-sf-no-cats #wtk-categories,
html body.wtk-sf-no-cats .entry-content > .wtk-cats{display:none!important}
html body.wtk-sf-home-few .entry-content > section.wtk-section:not(#wtk-categories),
html body.wtk-sf-home-few .entry-content > .wtk-prods{display:none!important}

/* ---------- Home: featured block ---------- */
/* The home page content area is full width; the block keeps the site's content width like the page's own sections. */
body.wtk-sf .wtk-sf-hero,body.wtk-sf .wtk-sf-more{box-sizing:border-box;width:100%;max-width:1290px;margin-left:auto!important;margin-right:auto!important;padding-left:24px;padding-right:24px}
@media (max-width:767px){ body.wtk-sf .wtk-sf-hero,body.wtk-sf .wtk-sf-more{padding-left:16px;padding-right:16px} }
body.wtk-sf .wtk-sf-hero{display:grid;gap:16px;margin-top:24px;margin-bottom:32px}
body.wtk-sf .wtk-sf-hero__h{margin:0;font-size:var(--sf-step-3);line-height:1.15;letter-spacing:-.02em;color:var(--sf-ink)}
body.wtk-sf .wtk-sf-hero__main{position:relative;display:block;border-radius:var(--sf-radius-lg);background:var(--sf-surface);overflow:hidden;text-decoration:none;color:var(--sf-ink)}
body.wtk-sf .wtk-sf-hero__img{display:block;aspect-ratio:1/1}
body.wtk-sf .wtk-sf-hero__img img{display:block;width:100%;height:100%;object-fit:contain;margin:0;mix-blend-mode:multiply}
body.wtk-sf .wtk-sf-hero__label{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:8px 8px 8px 16px;border:1px solid var(--sf-line);border-radius:var(--sf-pill);background:rgba(255,255,255,.94);backdrop-filter:blur(8px)}
body.wtk-sf .wtk-sf-hero__name{font-weight:600;font-size:var(--sf-step-0);line-height:1.3;min-width:0}
body.wtk-sf .wtk-sf-hero__price{margin:0;padding:6px 12px;border-radius:var(--sf-pill);background:var(--sf-accent);color:#fff;font-size:var(--sf-step--1);font-weight:600;white-space:nowrap}
body.wtk-sf .wtk-sf-hero__price *{color:inherit!important}
body.wtk-sf .wtk-sf-hero__price small,body.wtk-sf .wtk-sf-hero__price br{display:none}
body.wtk-sf .wtk-sf-hero__main:hover .wtk-sf-hero__label,body.wtk-sf .wtk-sf-hero__main:focus-visible .wtk-sf-hero__label{border-color:var(--sf-ink)}
body.wtk-sf .wtk-sf-hero__side{display:grid;gap:12px;align-content:start}
body.wtk-sf .wtk-sf-tile{display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:96px;padding:20px;border-radius:var(--sf-radius-lg);background:var(--sf-surface);color:var(--sf-ink);text-decoration:none}
body.wtk-sf .wtk-sf-tile:hover{outline:1px solid var(--sf-ink)}
body.wtk-sf .wtk-sf-tile__h{font-size:var(--sf-step-2);font-weight:700;letter-spacing:-.01em;line-height:1.2}
body.wtk-sf .wtk-sf-tile__go{font-size:var(--sf-step--1);text-decoration:underline;text-underline-offset:3px}
@media (min-width:900px){
  body.wtk-sf .wtk-sf-hero{grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:20px}
  body.wtk-sf .wtk-sf-hero__h{grid-column:1/-1}
  body.wtk-sf .wtk-sf-hero__img{aspect-ratio:auto;height:min(520px,60vh)}
  body.wtk-sf .wtk-sf-tile{min-height:140px;padding:28px}
  body.wtk-sf .wtk-sf-hero__label{left:20px;right:auto;bottom:20px;max-width:calc(100% - 40px)}
}

/* ---------- Cards (home "more", empty-state suggestions) ---------- */
body.wtk-sf .wtk-sf-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:768px){ body.wtk-sf .wtk-sf-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} }
body.wtk-sf .wtk-sf-card{margin:0}
body.wtk-sf .wtk-sf-card__link{display:flex;flex-direction:column;gap:8px;color:var(--sf-ink);text-decoration:none}
body.wtk-sf .wtk-sf-card__img{display:block;aspect-ratio:1/1;border:1px solid transparent;border-radius:var(--sf-radius);background:var(--sf-surface);overflow:hidden}
body.wtk-sf .wtk-sf-card__img img{display:block;width:100%;height:100%;object-fit:contain;margin:0;mix-blend-mode:multiply}
body.wtk-sf .wtk-sf-card__link:hover .wtk-sf-card__img{border-color:var(--sf-ink)}
body.wtk-sf .wtk-sf-card__name{font-size:var(--sf-step--1);font-weight:500;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.wtk-sf .wtk-sf-card__price{font-size:var(--sf-step--1);font-weight:600}
body.wtk-sf .wtk-sf-card__price small,body.wtk-sf .wtk-sf-card__price br{display:none}
body.wtk-sf .wtk-sf-more{margin:0 0 32px}

/* ---------- Catalog with 1–3 products ---------- */
html body.wtk-sf-few .wtk-filters,
html body.wtk-sf-few .kadence-shop-top-row .kadence-woo-toggle,
html body.wtk-sf-few .kadence-shop-top-row .kadence-woo-results-count{display:none!important}
/* The brand/filter sidebar has nothing to narrow down: content takes the full width. */
html body.wtk-sf-few aside#secondary{display:none!important}
html body.wtk-sf-few .content-container.site-container{display:block!important}
html body.wtk-sf-few .content-container.site-container > #main{width:100%!important;max-width:1242px!important;margin:0 auto!important;float:none!important}
html body.wtk-sf-few.woocommerce #main ul.products{grid-template-columns:repeat(3,minmax(0,1fr))!important;max-width:1040px}
/* One product: a feature card (image | name, price, short text, button). Selectors carry .woocommerce and
   :not(.product-category) so they outrank the card rules in whatstk-ui-fixes.css (which hide the button on cards). */
html body.wtk-sf-one main ul.products{display:block!important;max-width:none}
html body.wtk-sf-one.woocommerce #main ul.products > li.product:not(.product-category){display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center;
  width:auto!important;max-width:none!important;margin:0!important;padding:24px!important;border:1px solid var(--sf-line)!important;border-radius:var(--sf-radius-lg)!important;background:var(--sf-bg)!important;box-shadow:none!important}
html body.wtk-sf-one.woocommerce #main ul.products > li.product:not(.product-category) > a.woocommerce-loop-image-link{display:block;border-radius:var(--sf-radius);overflow:hidden;background:var(--sf-surface)}
html body.wtk-sf-one.woocommerce #main ul.products > li.product:not(.product-category) > a.woocommerce-loop-image-link img{display:block;width:100%!important;height:auto!important;aspect-ratio:1/1;object-fit:contain;margin:0!important}
html body.wtk-sf-one.woocommerce #main ul.products > li.product:not(.product-category) .product-details{padding:0!important;background:transparent!important;text-align:left}
html body.wtk-sf-one.woocommerce #main ul.products > li.product:not(.product-category) .woocommerce-loop-product__title{font-size:var(--sf-step-3)!important;line-height:1.2!important;letter-spacing:-.02em;margin:0 0 10px!important;padding:0!important;min-height:0!important;height:auto!important}
html body.wtk-sf-one.woocommerce #main ul.products > li.product:not(.product-category) .woocommerce-loop-product__title a{font-size:inherit!important;line-height:inherit!important;color:var(--sf-ink)!important}
html body.wtk-sf-one.woocommerce #main ul.products > li.product:not(.product-category) .price{font-size:var(--sf-step-2)!important;font-weight:600;margin:0 0 12px!important}
html body.wtk-sf-one.woocommerce #main ul.products > li.product:not(.product-category) .product-excerpt{display:block!important;color:var(--sf-ink-2);font-size:var(--sf-step-0);margin:0 0 20px}
html body.wtk-sf-one.woocommerce #main ul.products > li.product:not(.product-category) .product-action-wrap{display:block!important;position:static!important;opacity:1!important;visibility:visible!important;transform:none!important;margin:0!important}
html body.wtk-sf-one.woocommerce #main ul.products > li.product:not(.product-category) .product-action-wrap .button{display:inline-flex!important;align-items:center;justify-content:center;width:auto!important;min-height:48px;padding:0 24px!important;
  border-radius:var(--sf-pill)!important;background:var(--sf-cta)!important;border-color:var(--sf-cta)!important;color:#fff!important;font-weight:600}
html body.wtk-sf-one.woocommerce #main ul.products > li.product:not(.product-category) .product-action-wrap .button .kadence-svg-iconset{display:none}
@media (max-width:767px){
  html body.wtk-sf-few.woocommerce #main ul.products{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body.wtk-sf-one.woocommerce #main ul.products > li.product:not(.product-category){grid-template-columns:1fr;gap:16px;padding:16px!important}
  html body.wtk-sf-one.woocommerce #main ul.products > li.product:not(.product-category) .woocommerce-loop-product__title{font-size:var(--sf-step-2)!important}
  html body.wtk-sf-one.woocommerce #main ul.products > li.product:not(.product-category) .product-action-wrap .button{width:100%!important}
}

/* ---------- Empty category / no search results ---------- */
html body.wtk-sf-empty .woocommerce-info.woocommerce-no-products-found,
html body.wtk-sf-empty .woocommerce-no-products-found .woocommerce-info,
html body.wtk-sf-empty .wtk-filters,
html body.wtk-sf-empty .kadence-shop-top-row,
html body.wtk-sf-empty aside#secondary{display:none!important}
html body.wtk-sf-empty .content-container.site-container{display:block!important}
html body.wtk-sf-empty .content-container.site-container > #main{width:100%!important;max-width:1242px!important;margin:0 auto!important;float:none!important}
body.wtk-sf .wtk-sf-empty__title{margin:8px 0 8px;font-size:var(--sf-step-2);line-height:1.3;letter-spacing:-.01em;color:var(--sf-ink)}
html body.wtk-sf-empty .wtk-empty-help{margin:0 0 32px;color:var(--sf-ink-2)}
body.wtk-sf .wtk-sf-suggest{margin:8px 0 40px;padding-top:24px;border-top:1px solid var(--sf-line)}
body.wtk-sf .wtk-sf-suggest h2{margin:0 0 16px;font-size:var(--sf-step-1);color:var(--sf-ink)}

/* ---------- batch 18: phone home page ----------
   More of the page in the first screen: smaller heading, the featured photo in 4:3 with its name/price under it
   (not on top of the photo), and the two entry cards side by side. */
@media (max-width:767px){
  body.wtk-sf .wtk-sf-hero{margin-top:14px;gap:12px}
  body.wtk-sf .wtk-sf-hero__h{font-size:22px}
  body.wtk-sf .wtk-sf-hero__main{display:flex;flex-direction:column}
  body.wtk-sf .wtk-sf-hero__img{aspect-ratio:4/3}
  body.wtk-sf .wtk-sf-hero__label{position:static;left:auto;right:auto;bottom:auto;margin:0;border:0;border-top:1px solid var(--sf-line);border-radius:0;background:var(--sf-bg);backdrop-filter:none;padding:10px 12px}
  body.wtk-sf .wtk-sf-hero__side{grid-template-columns:1fr 1fr;gap:10px}
  body.wtk-sf .wtk-sf-tile{min-height:0;padding:14px;gap:10px;border-radius:var(--sf-radius)}
  body.wtk-sf .wtk-sf-tile__h{font-size:16px}
}

/* ---------- batch 23: desktop home too — the featured product's name and price sit in a white band under the photo
   (as on phones), so they no longer cover the product image. ---------- */
body.wtk-sf .wtk-sf-hero__main{display:flex;flex-direction:column}
body.wtk-sf .wtk-sf-hero__label{position:static;left:auto;right:auto;bottom:auto;max-width:none;margin:0;border:0;border-top:1px solid var(--sf-line);border-radius:0;background:var(--sf-bg);backdrop-filter:none;padding:14px 20px}
@media (min-width:900px){ body.wtk-sf .wtk-sf-hero__img{height:min(470px,56vh)} }

/* ---------- batch 2-01 ----------
   (1) Home, desktop: the side column now has three cards (shop, track order, shipping & returns) that share the
   height of the featured card, instead of two short cards and ~230 px of blank space under them. */
@media (min-width:900px){
  body.wtk-sf .wtk-sf-hero__side{grid-template-rows:repeat(3,minmax(0,1fr));align-self:stretch;align-content:stretch}
  body.wtk-sf .wtk-sf-hero__side .wtk-sf-tile{min-height:0}
}
/* Phones: two cards side by side as before; the third spans the row underneath. */
@media (max-width:899px){ body.wtk-sf .wtk-sf-hero__side .wtk-sf-tile--ship{grid-column:1/-1} }
/* (2) Shop with 1–3 products: the tool row only held the sort menu, which has nothing to sort. The single feature
   card spans the content width (it stopped at 1040 px, short of the right edge of the header and footer). */
html body.wtk-sf-few .kadence-shop-top-row{display:none!important}
html body.wtk-sf-one.woocommerce #main ul.products{max-width:none!important}
/* batch 2-07: only from 1025 px; on tablets the 520 px photo column left ~100 px for the name ("AirPods case …"). */
@media (min-width:1025px){
  html body.wtk-sf-one.woocommerce #main ul.products > li.product:not(.product-category){grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:48px}
}
/* (3) Card button in sentence case like every other button on the site (it was "SELECT OPTIONS"). */
html body.wtk-sf-one.woocommerce #main ul.products > li.product:not(.product-category) .product-action-wrap .button{text-transform:none!important;letter-spacing:0!important;font-size:var(--sf-step-0)!important}
/* ...and it lines up with the name and text above it (it was 16 px further right). */
html body.wtk-sf-one.woocommerce #main ul.products > li.product:not(.product-category) .product-action-wrap{padding:0!important}
/* (4) Search without results: the title band said "Search Results for: …" right above "No results for …".
   The band goes; the "No results" line is the page's h1 now (inc/few.php). */
html body.wtk-sf-empty.search .entry-hero.product-archive-hero-section{display:none!important}
html body.wtk-sf-empty.search h1.wtk-sf-empty__title{margin-top:8px;font-size:var(--sf-step-3);letter-spacing:-.02em}

/* ---------- batch 2-05: phones, featured name and price on one line again ----------
   The batch 23 band padding (14 px 20 px, written for desktop) also hit phones and pushed the price pill onto a
   second line under the name; phones get the batch 18 padding back. */
@media (max-width:767px){ body.wtk-sf .wtk-sf-hero__label{padding:10px 12px;flex-wrap:nowrap} body.wtk-sf .wtk-sf-hero__name{flex:1 1 auto} }

/* ---------- batch 2-02: home on tablets (768–899 px) ----------
   The featured photo was a 720 × 720 square (taller than the screen) and the three cards stacked full width.
   The photo gets the desktop height and the cards sit in one row. */
@media (min-width:768px) and (max-width:899px){
  body.wtk-sf .wtk-sf-hero__img{aspect-ratio:auto;height:min(440px,50vh)}
  body.wtk-sf .wtk-sf-hero__side{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.wtk-sf .wtk-sf-hero__side .wtk-sf-tile--ship{grid-column:auto}
  body.wtk-sf .wtk-sf-tile{min-height:0;padding:18px}
  body.wtk-sf .wtk-sf-tile__h{font-size:var(--sf-step-1)}
}