/*
Theme Name: Trade In Track Shop
Theme URI: https://www.tradeintrack.co.za/
Author: h2rahost — The Hub Zone
Author URI: https://thehubzone.co.za
Description: A WooCommerce-only block theme for Trade In Track. No landing page and no theme-made product markup — every product comes from WooCommerce. Ships a Categories page that lists every product category with an auto-sliding row of that category products, plus Login, Register and a Sample Page. Fixed glassmorphic header with a light/dark switch. Everything is edited in Appearance > Editor.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Version: 3.9.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: titshop
Tags: block-theme, full-site-editing, e-commerce, dark-mode, one-column
*/

/* ==========================================================================
   1. TOKENS — light is the default, dark overrides on [data-tit-mode="dark"]
   ========================================================================== */

:root{
  --tit-ink:#10150F;
  --tit-paper:#FBFAF7;
  --tit-surface:#FFFFFF;
  --tit-surface-2:#F2F4EF;
  --tit-wash:#E9F0E4;
  --tit-muted:rgba(16,21,15,.62);
  --tit-line:rgba(16,21,15,.13);
  --tit-green:#0C7C4B;
  --tit-deep:#063A26;
  --tit-gold:#F5B301;

  /* the glass */
  --tit-glass-bg:rgba(251,250,247,.72);
  --tit-glass-border:rgba(16,21,15,.10);
  --tit-glass-shadow:0 1px 0 rgba(16,21,15,.05), 0 12px 34px -18px rgba(16,21,15,.35);

  --tit-shadow:0 1px 2px rgba(16,21,15,.05), 0 12px 28px -20px rgba(16,21,15,.5);
  --tit-radius:14px;
  --tit-radius-sm:10px;
  --tit-header-h:78px;

  --tit-display:"Bricolage Grotesque",system-ui,sans-serif;
  --tit-mono:"DM Mono",ui-monospace,SFMono-Regular,monospace;

  color-scheme:light;
}

[data-tit-mode="dark"]{
  --tit-ink:#ECF1E8;
  --tit-paper:#0D110F;
  --tit-surface:#151B17;
  --tit-surface-2:#1C241F;
  --tit-wash:#182019;
  --tit-muted:rgba(236,241,232,.62);
  --tit-line:rgba(236,241,232,.15);
  --tit-green:#3AA976;
  --tit-deep:#0B4E33;
  --tit-gold:#F7C13D;

  --tit-glass-bg:rgba(13,17,15,.68);
  --tit-glass-border:rgba(236,241,232,.12);
  --tit-glass-shadow:0 1px 0 rgba(0,0,0,.4), 0 16px 40px -20px rgba(0,0,0,.9);

  --tit-shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -22px rgba(0,0,0,.9);

  color-scheme:dark;
}

body{
  background:var(--tit-paper);
  color:var(--tit-ink);
  transition:background-color .28s ease, color .28s ease;
}
img{max-width:100%;height:auto}

/* ==========================================================================
   2. FIXED GLASS HEADER
   The header part carries .tit-header. Height is measured in JS and written
   back as --tit-header-h so the page never sits underneath it.
   ========================================================================== */

.tit-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:9999;
  background:var(--tit-glass-bg);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  backdrop-filter:blur(18px) saturate(180%);
  border-bottom:1px solid var(--tit-glass-border);
  box-shadow:var(--tit-glass-shadow);
  transition:background-color .28s ease, border-color .28s ease, transform .3s ease;
}

/* Browsers without backdrop-filter get a solid bar rather than unreadable text. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .tit-header{background:var(--tit-paper)}
}

body{padding-top:var(--tit-header-h)}
.admin-bar .tit-header{top:32px}
@media (max-width:782px){ .admin-bar .tit-header{top:46px} }

/* In the Site Editor the header must sit in the flow, not float over the canvas. */
.editor-styles-wrapper .tit-header,
.block-editor-iframe__body .tit-header{position:relative;top:0}
.editor-styles-wrapper body,
.block-editor-iframe__body{padding-top:0}

/* the awning stripe, thinner here than on the marketing site */
.tit-awning{
  height:5px;
  background:repeating-linear-gradient(90deg,
    var(--tit-green) 0 18px, transparent 18px 36px,
    var(--tit-gold) 36px 54px, transparent 54px 72px);
  opacity:.9;
}

.tit-header .wp-block-navigation__responsive-container-open,
.tit-header .wp-block-navigation__responsive-container-close{color:var(--tit-ink)}

.tit-header .wp-block-navigation a{
  padding:.35rem 0;
  border-bottom:2px solid transparent;
  transition:border-color .16s ease,color .16s ease;
}
.tit-header .wp-block-navigation a:hover,
.tit-header .wp-block-navigation .current-menu-item a{
  border-bottom-color:var(--tit-gold);
  color:var(--tit-ink);
}
.tit-header .wp-block-navigation__responsive-container.is-menu-open{
  background:var(--tit-paper);
  color:var(--tit-ink);
  padding-top:5rem;
}
.tit-header .wp-block-site-title a{text-decoration:none;color:var(--tit-ink)}

/* ---- 2b. LAYOUT: menu first, brand centred, actions right ---- */
.tit-headbar{
  display:grid !important;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1rem;
}
.tit-navslot{justify-self:start}
.tit-brand{justify-self:center;text-align:center}
.tit-actions{justify-self:end}
.tit-brand .wp-block-site-title{font-weight:700;line-height:1.1}
.tit-brand .tit-mono{margin:0;font-size:.72rem;color:var(--tit-muted)}

/* ---- 2c. PHONE MENU — slide-in panel like a native shopping app ---- */
.tit-nav .tit-nav-login,
.tit-nav .tit-nav-register{display:none}

@media (max-width:781px){
  .tit-headbar{grid-template-columns:auto 1fr auto;gap:.5rem}
  .tit-brand .tit-mono{display:none}
  .tit-brand .wp-block-site-title{font-size:1.05rem}

  .tit-header .wp-block-navigation__responsive-container-open{
    width:40px;height:40px;display:grid;place-items:center;
    border:1px solid var(--tit-line);border-radius:10px;background:var(--tit-surface);
  }

  /* the sheet itself: full height, top to bottom, anchored to the left edge */
  .tit-header .wp-block-navigation__responsive-container.is-menu-open{
    background:var(--tit-surface);
    color:var(--tit-ink);
    padding:0;
    position:fixed !important;
    top:0 !important;left:0 !important;right:auto !important;bottom:0 !important;
    height:100dvh;min-height:100vh;
    width:82%;max-width:420px;
    z-index:99999;
    display:flex;flex-direction:column;
    box-sizing:border-box;
    box-shadow:0 0 0 100vmax rgba(0,0,0,.45), 0 18px 60px -20px rgba(0,0,0,.5);
    overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
    animation:tit-slide-in .22s ease-out;
  }
  .tit-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content{
    width:100%;box-sizing:border-box;
  }

  @keyframes tit-slide-in{from{transform:translateX(-100%)}to{transform:translateX(0)}}

  .tit-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-dialog{margin-top:0}

  /* "Welcome" bar with the close button */
  .tit-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content::before{
    content:"Welcome";
    display:block;
    font-family:var(--tit-display);
    font-size:1.5rem;font-weight:700;
    padding:1.15rem 1.1rem 1rem;
    border-bottom:8px solid var(--tit-surface-2);
  }
  .tit-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close{
    top:1.1rem;right:1rem;
    border:1px solid var(--tit-line);border-radius:8px;padding:2px;
  }

  /* one full-width row per link, hairline separated */
  .tit-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container{
    gap:0 !important;width:100%;
  }
  .tit-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item{width:100%}
  .tit-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item a{
    display:block;width:100%;
    padding:1.05rem 1.1rem;
    font-size:1.02rem;
    border:0;border-bottom:1px solid var(--tit-line);
    text-align:left;
  }
  .tit-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item a:hover{background:var(--tit-wash);border-bottom-color:var(--tit-line)}

  /* the sign-in block at the top of the sheet */
  .tit-nav .tit-nav-login,
  .tit-nav .tit-nav-register{display:block;text-align:center}
  .tit-header .wp-block-navigation__responsive-container.is-menu-open
    .tit-nav-login{padding:1rem 1.1rem .25rem}
  .tit-header .wp-block-navigation__responsive-container.is-menu-open
    .tit-nav-login::before{
    content:"Sign in for a smoother shopping experience";
    display:block;text-align:center;
    font-size:.92rem;color:var(--tit-muted);
    padding-bottom:.75rem;
  }
  .tit-header .wp-block-navigation__responsive-container.is-menu-open
    .tit-nav-login a{
    display:inline-block;
    width:auto;max-width:100%;
    margin:0 auto;
    background:color-mix(in oklab, var(--tit-green) 55%, transparent);
    backdrop-filter:blur(14px) saturate(160%);
    color:#fff;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.35);
    box-shadow:0 8px 24px -12px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.35);
    text-align:center;font-weight:700;font-size:.95rem;
    padding:.55rem 1.6rem;
  }

  .tit-header .wp-block-navigation__responsive-container.is-menu-open
    .tit-nav-register{padding:.4rem 1.1rem 1rem;border-bottom:8px solid var(--tit-surface-2)}
  .tit-header .wp-block-navigation__responsive-container.is-menu-open
    .tit-nav-register a{
    border:0;padding:.35rem 0;text-align:center;
    font-size:.95rem;color:var(--tit-green);font-weight:600;
  }
}

/* ---- the light/dark switch ---- */
.tit-mode{
  --size:40px;
  width:var(--size);height:var(--size);
  flex:none;display:grid;place-items:center;
  border-radius:999px;cursor:pointer;
  border:1px solid var(--tit-line);
  background:var(--tit-surface);
  color:var(--tit-ink);
  padding:0;line-height:1;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.tit-mode:hover{border-color:var(--tit-green);transform:translateY(-1px)}
.tit-mode svg{width:18px;height:18px;display:block}
.tit-mode .tit-mode__moon{display:none}
[data-tit-mode="dark"] .tit-mode .tit-mode__sun{display:none}
[data-tit-mode="dark"] .tit-mode .tit-mode__moon{display:block}

/* ==========================================================================
   3. SHOP GRID — Takealot-style product cards, fixed sizes on desktop
   Every card is the same width and height, every image sits in the same
   square frame, and nothing shifts when a name or a price is longer.
   ========================================================================== */

.tit-shop .wp-block-woocommerce-product-collection{width:100%}
.tit-shop-category-select{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.75rem;
  margin:0 0 1.5rem;
}
.tit-shop-category-select label{
  font-family:var(--tit-display);
  font-size:.9rem;
  font-weight:700;
  color:var(--tit-ink);
}
.tit-shop-category-select__control{position:relative;min-width:min(100%,260px)}
.tit-shop-category-select__control::after{
  content:"⌄";
  position:absolute;
  top:50%;right:1rem;
  transform:translateY(-58%);
  color:var(--tit-green);
  font-size:1rem;
  font-weight:800;
  pointer-events:none;
}
.tit-shop-category-select select{
  width:100%;
  min-height:44px;
  appearance:none;
  border:1px solid var(--tit-line);
  border-radius:8px;
  padding:.7rem 2.75rem .7rem 1rem;
  background:var(--tit-surface);
  color:var(--tit-ink);
  font:inherit;
  font-size:.9rem;
  font-weight:600;
  cursor:pointer;
  box-shadow:var(--tit-shadow);
}
.tit-shop-category-select select:focus{
  outline:2px solid var(--tit-green);
  outline-offset:2px;
}

/* The Shop page uses only the dropdown above. These fallbacks also suppress
   category tiles injected by older saved Product Catalog templates/plugins. */
body.woocommerce-shop .tit-cats,
body.woocommerce-shop .tit-catrow,
body.woocommerce-shop .tit-shop-cats,
body.woocommerce-shop .wc-block-product-categories,
body.woocommerce-shop .wp-block-woocommerce-product-categories,
body.woocommerce-shop ul.products li.product-category,
body.tit-main-shop .tit-cats,
body.tit-main-shop .tit-catrow,
body.tit-main-shop .tit-shop-cats,
body.tit-main-shop .wc-block-product-categories,
body.tit-main-shop .wp-block-woocommerce-product-categories,
body.tit-main-shop ul.products li.product-category{
  display:none !important;
}

@media (max-width:600px){
  .tit-shop-category-select{align-items:stretch;flex-direction:column;gap:.4rem}
  .tit-shop-category-select__control{width:100%;min-width:0}
}
.tit-shop .wp-block-post-template,
.tit-shop .wc-block-product-template,
.tit-products .wp-block-post-template,
.tit-products .wc-block-product-template,
ul.wc-block-product-template,
ul.products{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  align-items:stretch;
}

/* WooCommerce's legacy clearfix becomes an empty grid item unless removed. */
.tit-shop ul.products::before,
.tit-shop ul.products::after,
.tit-products ul.products::before,
.tit-products ul.products::after,
.tit-prodgrid ul.products::before,
.tit-prodgrid ul.products::after{
  content:none !important;
  display:none !important;
}

/* Four balanced columns on tablets and desktop. */
@media (min-width:782px){
  .tit-shop .wc-block-product-template,
  .tit-shop .wp-block-post-template,
  .tit-products .wc-block-product-template,
  .tit-products .wp-block-post-template,
  ul.wc-block-product-template,
  ul.products{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
  }
}

/* the card */
.wc-block-product-template li,
ul.products li.product,
.tit-products .wp-block-post-template li{
  width:auto !important;
  min-width:0;
  float:none !important;
  position:relative;
  display:flex;
  flex-direction:column;
  height:auto;
  align-self:stretch;
  margin:0;
  padding:14px 14px 16px;
  background:var(--tit-surface);
  border:1px solid var(--tit-line);
  border-radius:var(--tit-radius-sm);
  box-shadow:0 1px 2px rgba(16,21,15,.04);
  transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease;
  overflow:hidden;
}
.wc-block-product-template li:hover,
ul.products li.product:hover{
  border-color:transparent;
  box-shadow:0 12px 30px -14px rgba(16,21,15,.34);
  z-index:2;
  transform:translateY(-2px);
}

/* the image — square white frame, product shown whole (never cropped) */
.wc-block-product-template li .wc-block-components-product-image,
.wc-block-product-template li .wp-block-woocommerce-product-image,
ul.products li.product a img,
.tit-products .wp-block-post-featured-image{
  margin:0 0 12px;
  border-radius:6px;
  overflow:hidden;
  background:#fff;
}
.wc-block-product-template li .wc-block-components-product-image img,
.wc-block-product-template li .wp-block-woocommerce-product-image img,
ul.products li.product a img,
.tit-products .wp-block-post-featured-image img{
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:contain;
  background:#fff;
  display:block;
  border-radius:6px;
  padding:8px;
  box-sizing:border-box;
}
@media (max-width:781px){
  .wc-block-product-template li,
  ul.products li.product,
  .tit-products .wp-block-post-template li{padding:12px;min-height:0}
  .wc-block-product-template li .wc-block-components-product-image img,
  .wc-block-product-template li .wp-block-woocommerce-product-image img,
  ul.products li.product a img,
  .tit-products .wp-block-post-featured-image img{padding:4px}
}

/* the name — clamped to two lines, normal weight like a retail listing */
.wc-block-product-template li .wp-block-post-title,
.wc-block-product-template li .wc-block-components-product-title,
ul.products li.product .woocommerce-loop-product__title{
  font-family:inherit;
  font-weight:400;
  font-size:1rem;
  line-height:1.4;
  letter-spacing:0;
  margin:0 0 8px;
  min-height:2.8em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
@media (max-width:781px){
  .wc-block-product-template li .wp-block-post-title,
  .wc-block-product-template li .wc-block-components-product-title,
  ul.products li.product .woocommerce-loop-product__title{
    font-size:.88rem;
    line-height:1.3;
    min-height:2.6em;
  }
}
.wc-block-product-template li .wp-block-post-title a,
ul.products li.product .woocommerce-loop-product__title{color:var(--tit-ink);text-decoration:none}
.wc-block-product-template li .wp-block-post-title a:hover{color:var(--tit-green)}

/* star rating, small and quiet */
.wc-block-product-template li .wc-block-components-product-rating{margin:0 0 6px;font-size:.78rem}

/* the price sits on the same baseline in every card */
.wc-block-product-template li .wp-block-woocommerce-product-price,
.wc-block-product-template li .wc-block-components-product-price,
ul.products li.product .price{
  margin:auto 0 10px;
  font-family:var(--tit-display);
  font-weight:800;
  font-size:1.2rem;
  line-height:1.2;
  color:var(--tit-ink);
}
/* a special: old price struck through, new price in green */
.wc-block-product-template li del,
ul.products li.product .price del{
  display:block;
  opacity:.55;
  font-weight:500;
  font-size:.72em;
  margin:0 0 2px;
  text-decoration:line-through;
}
.wc-block-product-template li ins,
ul.products li.product .price ins{
  text-decoration:none;
  color:var(--tit-ink);
}

/* the button, full width and always last */
.wc-block-product-template li .wp-block-button,
.wc-block-product-template li .wc-block-components-product-button,
ul.products li.product .button{margin-top:0;width:100%}
.wc-block-product-template li .wp-block-button__link,
.wc-block-product-template li .wc-block-components-product-button a,
ul.products li.product .button{
  display:block;
  width:100%;
  text-align:center;
  border-radius:6px;
  font-size:.85rem;
  font-weight:600;
  padding:.62rem 1rem;
  background:var(--tit-green);
  color:#fff;
  border:0;
}
.wc-block-product-template li .wp-block-button__link:hover,
ul.products li.product .button:hover{background:var(--tit-deep);color:#fff}

/* sale flash */
.wc-block-product-template li .wc-block-components-product-sale-badge,
ul.products li.product .onsale{
  position:absolute;
  margin:0;
  top:12px;left:12px;
  z-index:2;
  background:var(--tit-gold);
  color:#10150F;
  font-family:var(--tit-mono);
  font-size:.62rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:.28rem .55rem;
  border-radius:4px;
  min-height:0;min-width:0;
  line-height:1.4;
}

/* No descriptions in the grid — the shop is names and prices only. */
.tit-shop .wp-block-post-excerpt,
.wc-block-product-template li .wp-block-post-excerpt,
ul.products li.product .woocommerce-product-details__short-description{display:none}

/* ---- section headers with a call-to-action button on the right ---- */
.tit-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin:0 0 1rem;
}
.tit-section-head h2{margin:0}
.tit-pill .wp-block-button__link,
a.tit-pill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  border-radius:999px;
  background:var(--tit-green);
  color:#fff;
  font-weight:600;
  font-size:.86rem;
  padding:.6rem 1.15rem;
  text-decoration:none;
  border:0;
}
.tit-pill .wp-block-button__link:hover,
a.tit-pill:hover{background:var(--tit-deep);color:#fff}

/* ==========================================================================
   3b. SHOP BY CATEGORY SLIDER — your own images, arrows either side
   ========================================================================== */

.tit-slider{position:relative}
.tit-slider .tit-slider-track{
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  padding:4px 2px 12px;
  margin:0;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.tit-slider .tit-slider-track::-webkit-scrollbar{display:none}
.tit-slider .tit-slider-track > *{
  flex:0 0 auto;
  width:190px;
  scroll-snap-align:start;
  margin:0;
}
@media (max-width:600px){ .tit-slider .tit-slider-track > *{width:44vw} }

/* each tile: your uploaded image on top, label under it */
.tit-cat{
  background:var(--tit-surface);
  border:1px solid var(--tit-line);
  border-radius:var(--tit-radius-sm);
  overflow:hidden;
  text-align:center;
  transition:box-shadow .18s ease, border-color .18s ease;
}
.tit-cat:hover{box-shadow:0 6px 22px -8px rgba(16,21,15,.28);border-color:transparent}
.tit-cat figure,
.tit-cat .wp-block-image{margin:0}
.tit-cat img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  background:var(--tit-surface-2);
}
.tit-cat p{
  margin:0;
  padding:.7rem .6rem .85rem;
  font-weight:600;
  font-size:.88rem;
}
.tit-cat p a{color:var(--tit-ink);text-decoration:none}
.tit-cat p a:hover{color:var(--tit-green)}

/* the arrows */
.tit-slider-btn{
  position:absolute;
  top:calc(50% - 1.4rem);
  transform:translateY(-50%);
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:999px;
  border:1px solid var(--tit-line);
  background:var(--tit-surface);
  color:var(--tit-ink);
  box-shadow:0 6px 18px -8px rgba(16,21,15,.5);
  cursor:pointer;
  z-index:3;
  transition:background .16s ease, opacity .16s ease;
}
.tit-slider-btn:hover{background:var(--tit-green);color:#fff}
.tit-slider-btn[disabled]{opacity:.35;cursor:default}
.tit-slider-btn.is-prev{left:-14px}
.tit-slider-btn.is-next{right:-14px}
@media (max-width:781px){
  .tit-slider-btn.is-prev{left:2px}
  .tit-slider-btn.is-next{right:2px}
}

/* ==========================================================================
   4. SINGLE PRODUCT — where the description finally appears
   ========================================================================== */

.tit-product-hero{padding-top:clamp(1.5rem,3vw,2.5rem)}
.tit-product-gallery img{border-radius:var(--tit-radius);background:var(--tit-surface-2)}
.tit-product-summary .wp-block-woocommerce-product-price{font-size:1.9rem;font-family:var(--tit-display);font-weight:800}
.tit-product-summary del{opacity:.5;font-size:.6em;margin-right:.5rem}
.tit-product-summary ins{text-decoration:none;color:var(--tit-green)}
.tit-panel{
  background:var(--tit-surface);
  border:1px solid var(--tit-line);
  border-radius:var(--tit-radius);
  padding:clamp(1.1rem,2.5vw,1.75rem);
  box-shadow:var(--tit-shadow);
}
.tit-prose h2{margin-top:2rem;font-size:1.5rem}
.tit-prose h3{margin-top:1.5rem;font-size:1.2rem}
.tit-prose ul,.tit-prose ol{padding-left:1.15rem}
.tit-prose li{margin-bottom:.4rem}

.woocommerce-tabs ul.tabs{border-bottom:1px solid var(--tit-line);padding:0}
.woocommerce-tabs ul.tabs li{background:none;border:0;border-radius:0}
.woocommerce-tabs ul.tabs li.active a{border-bottom:2px solid var(--tit-gold)}

/* ==========================================================================
   5. SHARED FURNITURE
   ========================================================================== */

.tit-eyebrow{
  font-family:var(--tit-mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tit-green);
  display:flex;align-items:center;gap:.6rem;margin:0 0 .8rem;
}
.tit-eyebrow::before{content:"";width:24px;height:2px;background:var(--tit-gold);flex:none}
.tit-mono{font-family:var(--tit-mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--tit-muted)}
.tit-muted{color:var(--tit-muted)}

.tit-banner{
  background:var(--tit-wash);
  border-bottom:1px solid var(--tit-line);
  padding-block:clamp(1.75rem,4vw,3rem);
}

.tit-tile{
  display:block;border:1px solid var(--tit-line);border-radius:var(--tit-radius);
  padding:1rem;background:var(--tit-surface);height:100%;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.tit-tile:hover{background:var(--tit-deep);color:#fff;transform:translateY(-2px)}
.tit-tile:hover a,.tit-tile:hover p{color:#fff}
.tit-tile strong{font-family:var(--tit-display);font-weight:700;letter-spacing:-.02em;display:block}
.tit-tile p{margin:.3rem 0 0;font-family:var(--tit-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
.tit-tile a{text-decoration:none}

/* search / filters bar */
.tit-toolbar{
  display:flex;gap:1rem;flex-wrap:wrap;align-items:center;justify-content:space-between;
  padding:0 0 1rem;border-bottom:1px solid var(--tit-line);margin-bottom:1.5rem;
}
.tit-toolbar .woocommerce-result-count,.tit-toolbar .wc-block-components-product-results-count{margin:0;color:var(--tit-muted);font-size:.9rem}
.tit-toolbar select{min-width:190px;background-color:var(--tit-surface);font-weight:500}
.wp-block-search__input,
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=search],
select,textarea{
  background:var(--tit-surface);color:var(--tit-ink);
  border:1px solid var(--tit-line);border-radius:999px;padding:.6rem 1rem;
}
textarea{border-radius:var(--tit-radius-sm)}
.wp-block-search__button{border-radius:999px}

/* footer */
.tit-footer{background:var(--tit-deep);color:rgba(255,255,255,.74)}
.tit-footer a{color:rgba(255,255,255,.74);text-decoration:none}
.tit-footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.tit-footer .wp-block-site-title a{color:#fff}
.tit-footer ul{list-style:none;padding-left:0;margin:0}
.tit-foot-heading{
  font-family:var(--tit-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tit-gold);margin:0 0 .9rem;
}
.tit-foot-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:1.3rem;margin-top:2.5rem}

/* cart / checkout / account, so Woo's own screens match */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  background:var(--tit-surface);border-top:3px solid var(--tit-green);
  border-radius:var(--tit-radius-sm);color:var(--tit-ink);
}
.woocommerce table.shop_table,
.wc-block-cart-items{background:var(--tit-surface);border-radius:var(--tit-radius);border-color:var(--tit-line)}
.woocommerce-cart table.cart td,.woocommerce-cart table.cart th{border-color:var(--tit-line)}

/* accessibility */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--tit-gold);outline-offset:2px;border-radius:4px;
}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

@media (max-width:781px){
  :root{--tit-header-h:66px}
  .wc-block-product-template,ul.products{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:.7rem}
  .wc-block-product-template li,ul.products li.product{padding:.5rem .5rem .75rem}
  .wc-block-product-template li .wp-block-post-title{font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---- phone menu: lock the page while the sheet is open, never scroll sideways ---- */
html,body{overflow-x:hidden;max-width:100%}
html:has(.wp-block-navigation__responsive-container.is-menu-open),
body:has(.wp-block-navigation__responsive-container.is-menu-open){
  overflow:hidden;
}

/* ==========================================================================
   CATEGORIES PAGE — tiles plus one auto-sliding WooCommerce row per category
   ========================================================================== */

.tit-cats{display:block}

/* --- the category rail at the top of the page --- */
.tit-cat-strip{
  position:relative;
  margin:0 0 clamp(2rem,5vw,3.25rem);
}
.tit-cat-tiles{
  display:flex;
  gap:16px;
  margin:0;
  padding:3px 2px 12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.tit-cat-tiles::-webkit-scrollbar{display:none}
.tit-cat-tile{
  flex:0 0 clamp(150px,18vw,190px);
  width:clamp(150px,18vw,190px);
  scroll-snap-align:start;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding:.75rem .75rem .9rem;
  background:var(--tit-surface);
  border:1px solid var(--tit-line);
  border-radius:var(--tit-radius-sm);
  box-shadow:none;
  text-decoration:none;color:var(--tit-ink);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.tit-cat-tile:hover{transform:translateY(-2px);border-color:var(--tit-green);box-shadow:var(--tit-shadow)}
.tit-cat-tile__img{
  width:100%;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;
  background:var(--tit-surface-2);border-radius:7px;
}
.tit-cat-tile__img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:normal}
.tit-cat-tile__ph{
  width:100%;height:100%;
  background:linear-gradient(135deg,var(--tit-wash),var(--tit-surface-2));
}
.tit-cat-tile__label{
  width:100%;font-weight:700;font-size:.9rem;text-align:left;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tit-cat-tile__count{width:100%;font-family:var(--tit-mono);font-size:.68rem;color:var(--tit-muted);text-align:left}
.tit-cat-strip__button{
  position:absolute;top:50%;z-index:3;transform:translateY(-50%);
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--tit-line);border-radius:999px;
  background:var(--tit-surface);color:var(--tit-ink);
  box-shadow:0 7px 20px -8px rgba(16,21,15,.55);
  font-size:1.35rem;line-height:1;cursor:pointer;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.tit-cat-strip__button:hover{background:var(--tit-green);color:#fff;border-color:var(--tit-green)}
.tit-cat-strip__button:disabled{opacity:.35;cursor:default}
.tit-cat-strip__button:disabled:hover{background:var(--tit-surface);color:var(--tit-ink);border-color:var(--tit-line)}
.tit-cat-strip__button.is-prev{left:-18px}
.tit-cat-strip__button.is-next{right:-18px}
.tit-cat-strip__button[hidden]{display:none}
@media (max-width:781px){
  .tit-cat-tiles{gap:12px;padding-inline:1px}
  .tit-cat-tile{flex-basis:42vw;width:42vw;max-width:175px}
  .tit-cat-strip__button{width:38px;height:38px}
  .tit-cat-strip__button.is-prev{left:2px}
  .tit-cat-strip__button.is-next{right:2px}
}

/* --- one row per category --- */
.tit-catrow{margin:0 0 clamp(2.25rem,5vw,3.5rem)}
.tit-catrow .tit-section-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-bottom:.9rem;flex-wrap:wrap;
}
.tit-catrow__title{
  margin:0;
  font-family:var(--tit-display);
  font-size:clamp(1.15rem,2.4vw,1.6rem);
  font-weight:800;letter-spacing:-.02em;
}
.tit-catrow__tools{display:flex;align-items:center;gap:.5rem}
.tit-catrow__all{font-size:.88rem;font-weight:600;color:var(--tit-green);text-decoration:none;white-space:nowrap}
.tit-slide-btn{
  width:36px;height:36px;display:grid;place-items:center;
  border:1px solid var(--tit-line);border-radius:999px;
  background:var(--tit-surface);color:var(--tit-ink);
  font-size:1.25rem;line-height:1;cursor:pointer;
  box-shadow:var(--tit-shadow);
  transition:background-color .16s ease,border-color .16s ease,transform .16s ease;
}
.tit-slide-btn:hover{background:var(--tit-wash);border-color:var(--tit-green);transform:translateY(-1px)}
.tit-slide-btn[hidden]{display:none}

/* The rail is WooCommerce's own ul.products, laid out horizontally. */
.tit-rail{position:relative}
.tit-rail ul.products{
  display:flex !important;
  gap:16px;
  margin:0;padding:2px 2px 10px;
  list-style:none;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.tit-rail ul.products::-webkit-scrollbar{display:none}
.tit-rail ul.products li.product{
  flex:0 0 clamp(150px,42vw,220px);
  width:clamp(150px,42vw,220px);
  margin:0 !important;
  scroll-snap-align:start;
  display:flex;flex-direction:column;
  background:var(--tit-surface);
  border:1px solid var(--tit-line);
  border-radius:var(--tit-radius);
  padding:.75rem;
  box-shadow:var(--tit-shadow);
}
.tit-rail ul.products li.product img{
  width:100%;aspect-ratio:1/1;object-fit:contain;
  background:#fff;border-radius:var(--tit-radius-sm);margin-bottom:.6rem;
}
.tit-rail ul.products li.product .woocommerce-loop-product__title{
  font-size:.9rem;line-height:1.3;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.35em;padding:0;margin:0 0 .35rem;
}
.tit-rail ul.products li.product .price{margin-top:auto;font-family:var(--tit-display);font-weight:700}
.tit-rail ul.products li.product .button{width:100%;text-align:center;margin-top:.6rem}
.tit-rail ul.products li.product .woocommerce-product-details__short-description{display:none}

/* ==========================================================================
   LOGIN / REGISTER PAGES
   ========================================================================== */
.tit-account{
  max-width:520px;margin:0 auto;
  background:var(--tit-surface);
  border:1px solid var(--tit-line);
  border-radius:var(--tit-radius);
  box-shadow:var(--tit-shadow);
  padding:clamp(1.25rem,4vw,2rem);
}
.tit-account form{margin:0}
.tit-account input[type="text"],
.tit-account input[type="email"],
.tit-account input[type="password"]{
  width:100%;padding:.75rem .9rem;
  border:1px solid var(--tit-line);border-radius:var(--tit-radius-sm);
  background:var(--tit-paper);color:var(--tit-ink);
}
.tit-account .button{width:100%;border-radius:999px}
.tit-account-note{text-align:center}

/* Header icon links (account + cart) */
.tit-iconlink{display:inline-flex;align-items:center;justify-content:center;position:relative;width:2.35rem;height:2.35rem;border-radius:999px;color:var(--tit-ink);border:1px solid var(--tit-line);background:transparent;text-decoration:none;transition:background .18s ease,color .18s ease}
.tit-iconlink:hover{background:var(--tit-wash);color:var(--tit-green)}
.tit-iconlink svg{width:1.2rem;height:1.2rem}
.tit-cartlink__count{position:absolute;top:-.25rem;right:-.25rem;min-width:1.15rem;height:1.15rem;padding:0 .28rem;border-radius:999px;background:var(--tit-green);color:#fff;font-size:.66rem;font-weight:700;line-height:1.15rem;text-align:center}
.tit-cartlink__count[hidden]{display:none}

/* ==========================================================================
   HOME PAGE (front-page.html)
   Every colour here is a theme token, so the section follows the light/dark
   switch in the header automatically.
   ========================================================================== */

.tit-home{display:block}
.tit-home .tit-eyebrow{font-family:var(--tit-mono);text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;color:var(--tit-green);margin-bottom:.9rem}

.tit-home-hero{padding:clamp(2.5rem,6vw,4.5rem) 0}
.tit-home-hero__grid{gap:clamp(1.75rem,4vw,3rem)}
.tit-home-hero__title{max-width:16ch}
.tit-home-lead{font-size:clamp(1rem,1.6vw,1.12rem);color:var(--tit-muted);max-width:46ch}
.tit-home-trust{margin-top:1.1rem;font-size:.86rem;color:var(--tit-muted)}

/* Hero + feature pictures, painted from the theme folder so they never break. */
.tit-home-art{
  border-radius:26px;
  min-height:clamp(240px,34vw,420px);
  background:linear-gradient(155deg,var(--tit-green) 0%,var(--tit-deep) 100%);
  background-size:cover;
  background-position:center;
  box-shadow:var(--tit-shadow);
  border:1px solid var(--tit-line);
}
.tit-home-art--hero{background-image:url("assets/images/home-hero.jpg")}
.tit-home-art--feature{background-image:url("assets/images/home-feature.jpg")}
[data-tit-mode="dark"] .tit-home-art{filter:brightness(.88) saturate(1.05)}

/* Buttons: gold primary, outlined secondary. Links stay empty so they can be
   pointed at any page from Appearance > Editor. */
.tit-home-cta{margin-top:1.6rem;gap:.75rem}
.tit-btn-gold .wp-block-button__link{
  background:var(--tit-gold);color:#10150F;border:1px solid transparent;
  box-shadow:0 12px 26px -14px rgba(245,179,1,.85);
  padding:.9rem 1.9rem;font-weight:600;
}
.tit-btn-gold .wp-block-button__link:hover{background:var(--tit-green);color:#fff;transform:translateY(-2px)}
.tit-btn-ghost .wp-block-button__link{
  background:transparent;color:var(--tit-ink);
  border:1px solid var(--tit-line);padding:.9rem 1.9rem;font-weight:600;
}
.tit-btn-ghost .wp-block-button__link:hover{background:var(--tit-wash);color:var(--tit-green);border-color:var(--tit-green)}
.tit-home-cta .wp-block-button__link{transition:background .18s ease,color .18s ease,transform .18s ease,border-color .18s ease}

/* Bands and cards */
.tit-home-band{
  background:var(--tit-surface);
  border-top:1px solid var(--tit-line);
  border-bottom:1px solid var(--tit-line);
  padding:clamp(2.5rem,6vw,4.5rem) 0;
}
.tit-home-head{max-width:56ch;margin-bottom:2.25rem}
.tit-home-cards{gap:1.5rem}
.tit-home-card{
  background:var(--tit-paper);
  border:1px solid var(--tit-line);
  border-radius:var(--tit-radius);
  padding:clamp(1.25rem,3vw,1.9rem);
  height:100%;
}
.tit-home-card h3{font-size:1.15rem;margin-bottom:.4rem}

.tit-home-why{padding:clamp(2.5rem,6vw,4.5rem) 0}
.tit-home-why__grid{gap:clamp(1.75rem,4vw,3rem)}
.tit-home-list{margin-top:1.5rem}
.tit-home-list__item{padding:1rem 0;border-bottom:1px solid var(--tit-line)}
.tit-home-list__item:last-child{border-bottom:none}
.tit-home-list__item h4{font-family:var(--tit-display);font-size:1.02rem;margin:0 0 .2rem}
.tit-home-list__item p{margin:0;font-size:.94rem}

/* ==========================================================================
   PRODUCTS-FIRST GRID + BROWSE ALL
   ========================================================================== */

.tit-prodgrid ul.products{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.25rem;margin:0;padding:0;list-style:none;
}
.tit-prodgrid ul.products li.product{width:auto!important;margin:0!important;float:none!important;
  background:var(--tit-surface);border:1px solid var(--tit-line);border-radius:var(--tit-radius);
  padding:.75rem;box-shadow:var(--tit-shadow)}
.tit-prodgrid ul.products li.product img{border-radius:var(--tit-radius-sm)}
@media (max-width:900px){.tit-prodgrid ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:680px){.tit-prodgrid ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tit-prodgrid--cols-2 ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}
.tit-prodgrid--cols-3 ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}
.tit-prodgrid--cols-5 ul.products{grid-template-columns:repeat(5,minmax(0,1fr))}
.tit-prodgrid--cols-6 ul.products{grid-template-columns:repeat(6,minmax(0,1fr))}

.tit-browseall{text-align:center;margin:1.75rem 0 0}
.tit-browseall__btn{
  display:inline-block;font-size:.85rem;font-weight:600;
  padding:.55rem 1.2rem;border-radius:999px;
  border:1px solid var(--tit-line);background:transparent;color:var(--tit-ink);
  text-decoration:none;transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.tit-browseall__btn:hover{background:var(--tit-green);border-color:var(--tit-green);color:#fff}

.tit-cats-heading{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:0 0 1.25rem}

/* ---------- Search page ---------- */
.tit-searchform{display:flex;gap:.6rem;flex-wrap:wrap;margin:0 0 1.75rem}
.tit-searchform__field{flex:1 1 16rem;padding:.75rem 1rem;border-radius:999px;border:1px solid var(--tit-line);background:var(--tit-card);color:var(--tit-ink);font:inherit}
.tit-searchform__field:focus{outline:2px solid var(--tit-green);outline-offset:1px}
.tit-searchform__cat{padding:.75rem 1rem;border-radius:999px;border:1px solid var(--tit-line);background:var(--tit-card);color:var(--tit-ink);font:inherit}
.tit-searchform__btn{padding:.75rem 1.4rem;border-radius:999px;border:1px solid var(--tit-green);background:var(--tit-green);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.tit-searchform__btn:hover{background:var(--tit-gold);border-color:var(--tit-gold);color:#1a1400}
.tit-searchpager{margin-top:2rem;text-align:center}
.tit-searchpager .page-numbers{display:inline-block;padding:.35rem .7rem;margin:0 .15rem;border-radius:8px;border:1px solid var(--tit-line);text-decoration:none;color:var(--tit-ink)}
.tit-searchpager .page-numbers.current{background:var(--tit-green);border-color:var(--tit-green);color:#fff}

/* ---------- Header search box + button ---------- */
.tit-headersearch{display:flex;align-items:center;gap:.3rem;background:var(--tit-card);border:1px solid var(--tit-line);border-radius:999px;padding:.2rem .25rem .2rem .9rem}
.tit-headersearch__field{border:none;background:transparent;font:inherit;color:var(--tit-ink);width:9rem;min-width:0}
.tit-headersearch__field:focus{outline:none}
.tit-headersearch__btn{display:inline-flex;align-items:center;justify-content:center;width:2.15rem;height:2.15rem;flex:0 0 auto;border-radius:999px;border:none;background:var(--tit-green);color:#fff;cursor:pointer;transition:background .18s ease,color .18s ease}
.tit-headersearch__btn:hover{background:var(--tit-gold);color:#1a1400}
.tit-headersearch__btn svg{width:1.05rem;height:1.05rem}
@media (max-width:780px){.tit-headersearch__field{width:6rem}}
@media (max-width:560px){.tit-headersearch__field{width:4rem}}

/* ---------- Category tiles under the shop grid ---------- */
.tit-shop-cats{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--tit-line)}

/* ==========================================================================
   SHOP PAGE POLISH — a calm, professional retail layout
   ========================================================================== */

/* --- banner: a quiet branded strip instead of a bare heading --- */
.tit-banner{
  background:linear-gradient(135deg, var(--tit-wash) 0%, var(--tit-surface-2) 100%);
  border-bottom:1px solid var(--tit-line);
  padding:2.4rem 0 2.2rem;
}
.tit-banner .tit-eyebrow{
  font-family:var(--tit-mono);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--tit-green);
  margin:0 0 .35rem;
}
.tit-banner .wp-block-query-title{
  font-family:var(--tit-display);
  font-weight:800;
  letter-spacing:-.02em;
  margin:0;
}
.tit-banner .tit-muted{color:var(--tit-muted);max-width:58ch;margin:.6rem 0 0}

/* --- toolbar: results + sorting on one tidy line --- */
.tit-shop .tit-toolbar{
  align-items:center;
  gap:.75rem;
  margin:0 0 1.4rem;
  padding:.7rem .95rem;
  background:var(--tit-surface);
  border:1px solid var(--tit-line);
  border-radius:var(--tit-radius-sm);
}
.tit-shop .tit-toolbar select,
.tit-shop .tit-toolbar .wc-block-components-sort-select__select{
  border:1px solid var(--tit-line);
  border-radius:8px;
  background:var(--tit-surface);
  color:var(--tit-ink);
  padding:.42rem 2rem .42rem .7rem;
  font-size:.88rem;
}

/* --- cards: softer frame, gentle image zoom, clearer hierarchy --- */
.tit-shop .wc-block-product-template li,
.tit-shop ul.products li.product{
  padding:12px 12px 14px;
  border-radius:var(--tit-radius);
  background:var(--tit-surface);
}
.tit-shop .wc-block-product-template li .wp-block-woocommerce-product-image,
.tit-shop ul.products li.product a img{
  background:var(--tit-surface-2);
  border-radius:8px;
}
.tit-shop .wc-block-product-template li img{
  transition:transform .35s ease;
}
.tit-shop .wc-block-product-template li:hover img{transform:scale(1.04)}
.tit-shop .wc-block-product-template li:hover{
  border-color:color-mix(in oklab, var(--tit-green) 35%, transparent);
  box-shadow:0 18px 38px -20px rgba(16,21,15,.42);
}

/* buttons stay understated until hovered */
.tit-shop .wc-block-product-template li .wp-block-button__link,
.tit-shop ul.products li.product .button{
  background:var(--tit-surface);
  color:var(--tit-green);
  border:1px solid color-mix(in oklab, var(--tit-green) 45%, transparent);
  transition:background .18s ease, color .18s ease;
}
.tit-shop .wc-block-product-template li .wp-block-button__link:hover,
.tit-shop ul.products li.product .button:hover{
  background:var(--tit-green);
  color:#fff;
  border-color:var(--tit-green);
}

/* ==========================================================================
   QUICK BUY — trolley trigger + variation side drawer
   ========================================================================== */

ul.products li.product .tit-quick-buy-trigger,
.tit-shop ul.products li.product .tit-quick-buy-trigger,
.tit-rail ul.products li.product .tit-quick-buy-trigger{
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:4;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  min-width:42px;
  margin:0;
  padding:0;
  border:1px solid var(--tit-green);
  border-radius:999px;
  background:var(--tit-surface);
  color:var(--tit-green);
  box-shadow:var(--tit-shadow);
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease,transform .18s ease;
}
ul.products li.product .tit-quick-buy-trigger:hover,
.tit-shop ul.products li.product .tit-quick-buy-trigger:hover,
.tit-rail ul.products li.product .tit-quick-buy-trigger:hover{
  background:var(--tit-green);
  color:#fff;
  transform:translateY(-2px);
}
.tit-quick-buy-trigger svg{width:21px;height:21px;pointer-events:none}
ul.products li.product:has(.tit-quick-buy-trigger) .price{padding-right:52px;margin-bottom:0}

.tit-quick-buy[hidden]{display:none}
.tit-quick-buy{position:fixed;inset:0;z-index:100000}
.tit-quick-buy__backdrop{
  position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;
  background:rgba(16,21,15,.56);opacity:0;cursor:default;
  transition:opacity .24s ease;
}
.tit-quick-buy__panel{
  position:absolute;top:0;right:0;bottom:0;
  display:flex;flex-direction:column;
  width:min(92vw,520px);height:100dvh;
  background:var(--tit-paper);color:var(--tit-ink);
  border-left:1px solid var(--tit-line);
  box-shadow:-24px 0 60px -28px rgba(16,21,15,.65);
  transform:translateX(100%);
  transition:transform .24s ease;
}
.tit-quick-buy.is-open .tit-quick-buy__backdrop{opacity:1}
.tit-quick-buy.is-open .tit-quick-buy__panel{transform:translateX(0)}
.tit-quick-buy-open{overflow:hidden}
.tit-quick-buy__header{
  min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1.1rem;border-bottom:1px solid var(--tit-line);background:var(--tit-surface);
}
.tit-quick-buy__header p{margin:0;font-family:var(--tit-display);font-size:1.05rem;font-weight:800}
.tit-quick-buy__close{
  display:grid;place-items:center;width:40px;height:40px;flex:none;padding:0;
  border:1px solid var(--tit-line);border-radius:999px;background:transparent;color:var(--tit-ink);cursor:pointer;
}
.tit-quick-buy__close:hover{background:var(--tit-wash);color:var(--tit-green)}
.tit-quick-buy__close svg{width:22px;height:22px}
.tit-quick-buy__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:1.1rem 1.1rem 2rem}
.tit-quick-buy__summary{display:grid;grid-template-columns:112px minmax(0,1fr);gap:1rem;padding-bottom:1.25rem;border-bottom:8px solid var(--tit-surface-2)}
.tit-quick-buy__image{display:block;background:var(--tit-surface);border:1px solid var(--tit-line);border-radius:var(--tit-radius-sm);overflow:hidden}
.tit-quick-buy__image img{display:block;width:100%;height:100%;aspect-ratio:1/1;object-fit:contain}
.tit-quick-buy__intro{min-width:0;align-self:center}
.tit-quick-buy__eyebrow{margin:0 0 .35rem;font-family:var(--tit-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--tit-green)}
.tit-quick-buy__title{margin:0 0 .55rem;font-family:var(--tit-display);font-size:1.1rem;line-height:1.2;font-weight:800}
.tit-quick-buy__price{font-family:var(--tit-display);font-size:1.35rem;font-weight:800;color:var(--tit-green)}
.tit-quick-buy__price del{font-size:.68em;color:var(--tit-muted);margin-right:.4rem}.tit-quick-buy__price ins{text-decoration:none}
.tit-quick-buy__details{display:inline-block;margin-top:.55rem;font-size:.82rem;font-weight:600;color:var(--tit-green)}
.tit-quick-buy__options{padding-top:1.25rem}
.tit-quick-buy__options table.variations{width:100%;margin:0;border-collapse:collapse}
.tit-quick-buy__options table.variations tr{display:block;margin:0 0 1.1rem}
.tit-quick-buy__options table.variations th,
.tit-quick-buy__options table.variations td{display:block;width:100%;padding:0;text-align:left;background:transparent;border:0}
.tit-quick-buy__options table.variations th label{display:block;margin:0 0 .5rem;font-family:var(--tit-display);font-size:.95rem;font-weight:800;color:var(--tit-ink)}
.tit-quick-buy__options table.variations select{width:100%;min-height:48px;border-radius:7px;background:var(--tit-surface);border-color:var(--tit-line);font-weight:600}
.tit-quick-buy__options .reset_variations{display:inline-block;margin-top:.45rem;font-size:.78rem;color:var(--tit-muted)}
.tit-quick-buy__options .woocommerce-variation{padding:.8rem 0}
.tit-quick-buy__options .woocommerce-variation-price{font-family:var(--tit-display);font-size:1.25rem;font-weight:800;color:var(--tit-green)}
.tit-quick-buy__options .single_variation_wrap{margin-top:.5rem}
.tit-quick-buy__options .woocommerce-variation-add-to-cart{display:grid;grid-template-columns:86px 1fr;gap:.65rem}
.tit-quick-buy__options .quantity .qty{width:100%;height:52px;border-radius:7px;text-align:center}
.tit-quick-buy__options .single_add_to_cart_button{
  width:100%;min-height:52px;border:0;border-radius:7px;padding:.8rem 1rem;
  background:var(--tit-green);color:#fff;font-family:var(--tit-display);font-weight:800;cursor:pointer;
}
.tit-quick-buy__options .single_add_to_cart_button:hover{background:var(--tit-deep)}
.tit-quick-buy__options .single_add_to_cart_button.disabled{opacity:.45;cursor:not-allowed}
.tit-quick-buy__status{min-height:50vh;display:grid;place-content:center;justify-items:center;gap:.75rem;text-align:center;color:var(--tit-muted)}
.tit-quick-buy__spinner{width:32px;height:32px;border:3px solid var(--tit-line);border-top-color:var(--tit-green);border-radius:999px;animation:tit-quick-buy-spin .8s linear infinite}
.tit-quick-buy__status--error{color:var(--tit-ink)}
@keyframes tit-quick-buy-spin{to{transform:rotate(360deg)}}
@media (max-width:600px){
  .tit-quick-buy__panel{width:100vw}
  .tit-quick-buy__summary{grid-template-columns:96px minmax(0,1fr)}
  ul.products li.product .tit-quick-buy-trigger{right:9px;bottom:9px;width:38px;height:38px;min-width:38px}
  ul.products li.product:has(.tit-quick-buy-trigger) .price{padding-right:44px}
}
@media (prefers-reduced-motion:reduce){
  .tit-quick-buy__backdrop,.tit-quick-buy__panel{transition:none}
  .tit-quick-buy__spinner{animation-duration:1.5s}
}

/* --- stop third-party carousels and oversized images breaking the layout --- */
.tit-shop img,
.tit-shop .swiper,
.tit-shop .slick-slider,
.tit-shop [class*="carousel"]{max-width:100%}
.tit-shop .swiper,
.tit-shop .slick-slider,
.tit-shop [class*="carousel"]{overflow:hidden}
.tit-shop .wc-block-product-template li *{min-width:0}

/* --- pagination --- */
.tit-shop .wp-block-query-pagination{
  margin-top:2.4rem;
  gap:.35rem;
  align-items:center;
}
.tit-shop .wp-block-query-pagination a,
.tit-shop .wp-block-query-pagination .page-numbers{
  padding:.4rem .75rem;
  border:1px solid var(--tit-line);
  border-radius:8px;
  text-decoration:none;
  color:var(--tit-ink);
  font-size:.9rem;
}
.tit-shop .wp-block-query-pagination .page-numbers.current{
  background:var(--tit-green);
  border-color:var(--tit-green);
  color:#fff;
}

/* --- categories below the grid --- */
.tit-shop-cats{margin-top:3.5rem;padding-top:2.2rem;border-top:1px solid var(--tit-line)}
.tit-shop-cats h2,
.tit-shop-cats .tit-cats-title{
  font-family:var(--tit-display);
  font-size:1.15rem;
  margin:0 0 1.1rem;
}