/*
Theme Name: Taokhung Base
Theme URI: https://example.invalid/taokhung-base
Description: Lightweight WooCommerce parent theme bundled with the taokhungwp skill. All layout numbers are CSS custom properties overridden by each store's child theme (tokens.css) from the measured reference SECTION_MAP.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: taokhung
License: GPL-2.0-or-later
*/

/* ---------- default tokens (child tokens.css overrides) ---------- */
:root{
  --tk-container:1280px; --tk-gutter:24px; --tk-gutter-m:16px;
  --tk-section-y:64px; --tk-section-y-m:40px; --tk-gap:24px; --tk-gap-m:12px;
  --tk-cols-d:4; --tk-cols-t:3; --tk-cols-m:2;
  --tk-font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --tk-font-head:var(--tk-font-body);
  --tk-fs-base:16px; --tk-lh:1.6;
  --tk-fs-h1:40px; --tk-fs-h1-m:28px; --tk-fs-h2:30px; --tk-fs-h2-m:22px; --tk-fs-h3:20px; --tk-fs-small:14px;
  --tk-fw-head:700; --tk-ls-head:0;
  --tk-radius:8px; --tk-btn-radius:6px;
  --tk-bg:#ffffff; --tk-fg:#1d1d1f; --tk-muted:#5f6368; --tk-border:#e3e3e0;
  --tk-accent:#1d1d1f; --tk-accent-fg:#ffffff;
  --tk-topbar-bg:#1d1d1f; --tk-topbar-fg:#ffffff;
  --tk-header-bg:#ffffff; --tk-header-fg:#1d1d1f; --tk-header-h:72px; --tk-header-h-m:56px; --tk-logo-h:40px; --tk-logo-h-m:32px;
  --tk-footer-bg:#f5f5f3; --tk-footer-fg:#1d1d1f;
  --tk-slot-bg:#efefec;
  --tk-prose-max:820px;
  --tk-single-gallery:55%;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tk-bg);color:var(--tk-fg);font-family:var(--tk-font-body);font-size:var(--tk-fs-base);line-height:var(--tk-lh);overflow-x:hidden}
img,svg,video{max-width:100%;height:auto}
a{color:inherit}
a:hover{opacity:.85}
:focus-visible{outline:2px solid var(--tk-accent);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--tk-font-head);font-weight:var(--tk-fw-head);letter-spacing:var(--tk-ls-head);line-height:1.2;margin:0 0 .6em}
h1{font-size:var(--tk-fs-h1)} h2{font-size:var(--tk-fs-h2)} h3{font-size:var(--tk-fs-h3)}
p{margin:0 0 1em}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;margin:-1px;padding:0}
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:10000;width:auto;height:auto;clip:auto;background:#fff;color:#000;padding:8px 12px}
.tk-container{width:100%;max-width:calc(var(--tk-container) + 2*var(--tk-gutter));margin:0 auto;padding:0 var(--tk-gutter)}
.tk-btn,.button,button.button,input[type=submit]{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.65em 1.4em;border:1px solid var(--tk-accent);border-radius:var(--tk-btn-radius);background:var(--tk-accent);color:var(--tk-accent-fg);font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.tk-btn--ghost{background:transparent;color:var(--tk-accent)}
input,select,textarea{font:inherit;max-width:100%}

/* ---------- top bar & header ---------- */
.tk-topbar{background:var(--tk-topbar-bg);color:var(--tk-topbar-fg);font-size:var(--tk-fs-small);text-align:center;padding:.45em var(--tk-gutter)}
.tk-topbar a{text-decoration:none}
.tk-header{position:sticky;top:0;z-index:100;background:var(--tk-header-bg);color:var(--tk-header-fg);border-bottom:1px solid var(--tk-border)}
.admin-bar .tk-header{top:32px}
.tk-header__inner{display:flex;align-items:center;gap:24px;min-height:var(--tk-header-h)}
.tk-brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.tk-brand img{max-height:var(--tk-logo-h);width:auto}
.tk-wordmark{font-family:var(--tk-font-head);font-weight:800;font-size:1.45rem;letter-spacing:.02em;line-height:1;white-space:nowrap}
.tk-nav{flex:1 1 auto;min-width:0}
.tk-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;gap:22px;justify-content:var(--tk-nav-justify,center)}
.tk-nav li{position:relative}
.tk-nav a{display:block;padding:.5em 0;text-decoration:none;font-weight:500;white-space:nowrap}
.tk-nav .sub-menu{display:none;position:absolute;left:-12px;top:100%;min-width:220px;flex-direction:column;gap:0;background:var(--tk-header-bg);border:1px solid var(--tk-border);padding:8px 12px;z-index:5}
.tk-nav li:hover>.sub-menu,.tk-nav li:focus-within>.sub-menu{display:flex}
.tk-icons{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.tk-icon{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;background:none;border:0;color:inherit;cursor:pointer;text-decoration:none;padding:0}
.tk-icon svg{width:22px;height:22px}
.tk-cart-count{font-size:12px;margin-left:2px}
.tk-menu-toggle{display:none}
.tk-search{display:none;border-top:1px solid var(--tk-border);padding:12px 0}
.tk-search.is-open{display:block}
.tk-search form{display:flex;gap:8px}
.tk-search input[type=search]{flex:1;min-height:44px;padding:0 12px;border:1px solid var(--tk-border);border-radius:var(--tk-btn-radius)}
.tk-drawer{position:fixed;inset:0;z-index:200;display:none}
.tk-drawer.is-open{display:block}
.tk-drawer__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.tk-drawer__panel{position:absolute;top:0;bottom:0;left:0;width:min(86vw,360px);background:var(--tk-bg);overflow-y:auto;padding:16px}
.tk-drawer__panel ul{list-style:none;margin:0;padding:0}
.tk-drawer__panel a{display:block;padding:12px 0;border-bottom:1px solid var(--tk-border);text-decoration:none;font-weight:500}
.tk-drawer__panel .sub-menu a{padding-left:16px;font-weight:400}
@media (max-width:1023px){
  .tk-nav{display:none}
  .tk-menu-toggle{display:inline-flex}
  .tk-header__inner{min-height:var(--tk-header-h-m);gap:8px}
  .tk-header .tk-brand{flex:1 1 auto;justify-content:var(--tk-brand-justify-m,center)}
  .tk-header .tk-brand img{max-height:var(--tk-logo-h-m)}
  .tk-header .tk-wordmark{font-size:1.2rem}
  .tk-icons{gap:0}
  .tk-icon--account{display:none}
}
@media (max-width:782px){.admin-bar .tk-header{top:0}}

/* ---------- sections ---------- */
.tk-section{padding:var(--tk-section-y) 0}
.tk-section--tight{padding:calc(var(--tk-section-y)/2) 0}
.tk-section--alt{background:var(--tk-footer-bg)}
.tk-section__head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:24px}
.tk-section__head h2{margin:0}
.tk-section__sub{color:var(--tk-muted);margin:.4em 0 0}
.tk-grid{display:grid;gap:var(--tk-gap);grid-template-columns:repeat(var(--cols-d,var(--tk-cols-d)),minmax(0,1fr))}
@media (max-width:1023px){.tk-grid{grid-template-columns:repeat(var(--cols-t,var(--tk-cols-t)),minmax(0,1fr))}}
@media (max-width:767px){.tk-grid{gap:var(--tk-gap-m);grid-template-columns:repeat(var(--cols-m,var(--tk-cols-m)),minmax(0,1fr))}.tk-section{padding:var(--tk-section-y-m) 0}.tk-container{padding:0 var(--tk-gutter-m)}h1{font-size:var(--tk-fs-h1-m)}h2{font-size:var(--tk-fs-h2-m)}}
.tk-hero{position:relative;padding:0}
.tk-hero__media{position:relative}
.tk-hero__body{position:absolute;inset:0;display:flex;align-items:center}
.tk-hero__body .tk-container{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.tk-hero--center .tk-hero__body .tk-container{align-items:center;text-align:center}
.tk-hero--below .tk-hero__body{position:static;padding:24px 0}
.tk-hero__title{margin:0;max-width:16ch}
.tk-hero__text{max-width:46ch;margin:0}
.tk-hero--on-image{color:var(--tk-hero-fg,#fff)}
@media (max-width:767px){.tk-hero--stack-m .tk-hero__body{position:static;padding:20px 0;color:var(--tk-fg)}}
.tk-tile{display:block;text-decoration:none}
.tk-tile__label{display:block;margin-top:10px;font-weight:600;text-align:var(--tk-tile-align,left)}
.tk-banner{position:relative;display:block;text-decoration:none}
.tk-banner__body{position:absolute;left:0;right:0;bottom:0;padding:24px;color:var(--tk-hero-fg,#fff)}
.tk-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--tk-gap);align-items:center}
.tk-split--reverse .tk-split__media{order:2}
@media (max-width:767px){.tk-split{grid-template-columns:1fr}.tk-split--reverse .tk-split__media{order:0}}
.tk-trust{display:grid;gap:var(--tk-gap);grid-template-columns:repeat(var(--cols-d,3),minmax(0,1fr));text-align:center}
.tk-trust__item h3{font-size:1.05rem;margin:.4em 0}
.tk-trust__item p{color:var(--tk-muted);margin:0}
@media (max-width:767px){.tk-trust{grid-template-columns:1fr}}
.tk-rich{max-width:var(--tk-prose-max)}
.tk-rich--center{margin:0 auto;text-align:center}

/* ---------- pages & prose ---------- */
.tk-main{min-height:40vh}
.tk-page{padding:32px 0 var(--tk-section-y)}
.tk-page__title{margin-bottom:.5em}
.tk-breadcrumb{font-size:var(--tk-fs-small);color:var(--tk-muted);margin:16px 0}
.tk-breadcrumb a{text-decoration:none}
.tk-breadcrumb .woocommerce-breadcrumb{margin:0}
.tk-prose{max-width:var(--tk-prose-max)}
.tk-prose h2{margin-top:1.8em}
.tk-prose h3{margin-top:1.4em}
.tk-prose ul,.tk-prose ol{padding-left:1.3em;margin:0 0 1em}
.tk-prose li{margin:.25em 0}
.tk-prose table{width:100%;border-collapse:collapse;margin:1rem 0 1.5rem}
.tk-prose th,.tk-prose td{border:1px solid var(--tk-border);padding:.5rem .65rem;text-align:left;vertical-align:top}
.tk-prose caption{text-align:left;font-weight:600;margin-bottom:.5rem}
.tk-prose details{border:1px solid var(--tk-border);border-radius:var(--tk-radius);padding:.75rem 1rem;margin:.6rem 0}
.tk-prose summary{cursor:pointer;font-weight:600}
@media (max-width:600px){.tk-prose table{display:block;overflow-x:auto}}
.tk-empty-catalog{padding:24px 0;color:var(--tk-muted)}

/* ---------- WooCommerce: catalog grid (replaces woocommerce-layout.css) ---------- */
.woocommerce ul.products,.woocommerce-page ul.products{display:grid;gap:var(--tk-gap);grid-template-columns:repeat(var(--cols-d,var(--tk-cols-d)),minmax(0,1fr));list-style:none;margin:0 0 32px;padding:0}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product{width:auto!important;float:none!important;margin:0!important;padding:0;position:relative;text-align:left}
.woocommerce ul.products li.product a img{width:100%;aspect-ratio:var(--tk-card-ratio,1/1);object-fit:cover;margin:0 0 10px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:1rem;font-weight:500;padding:0;margin:0 0 4px}
.woocommerce ul.products li.product .price{display:block;color:var(--tk-fg);font-weight:600;margin-bottom:8px}
.woocommerce ul.products li.product .button{margin-top:4px}
@media (max-width:1023px){.woocommerce ul.products{grid-template-columns:repeat(var(--cols-t,var(--tk-cols-t)),minmax(0,1fr))}}
@media (max-width:767px){.woocommerce ul.products{gap:var(--tk-gap-m);grid-template-columns:repeat(var(--cols-m,var(--tk-cols-m)),minmax(0,1fr))}}
.woocommerce .woocommerce-result-count{float:left;margin:0 0 16px}
.woocommerce .woocommerce-ordering{float:right;margin:0 0 16px}
.woocommerce .woocommerce-ordering+*,.woocommerce ul.products{clear:both}
.woocommerce nav.woocommerce-pagination{text-align:center}
.term-description,.tk-term-description{max-width:var(--tk-prose-max);margin:0 0 24px}

/* ---------- WooCommerce: single product ---------- */
.woocommerce div.product{display:grid;grid-template-columns:var(--tk-single-gallery) 1fr;gap:calc(var(--tk-gap)*2);align-items:start}
.woocommerce div.product .woocommerce-product-gallery,.woocommerce div.product div.images,.woocommerce div.product div.summary{width:auto!important;float:none!important;margin:0!important}
.tk-gallery-right .woocommerce div.product .woocommerce-product-gallery{order:2}
.woocommerce div.product .woocommerce-tabs,.woocommerce div.product .related,.woocommerce div.product .upsells,.woocommerce div.product .tk-accordion,.woocommerce div.product>.onsale~section{grid-column:1/-1}
.woocommerce div.product .product_title{font-size:var(--tk-fs-h2)}
.woocommerce div.product form.cart{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.woocommerce div.product form.cart.variations_form{display:block}
.woocommerce div.product form.cart .quantity input{min-height:44px;width:72px}
.woocommerce div.product .single_add_to_cart_button{min-height:48px;padding:0 2em}
.woocommerce .woocommerce-product-gallery__wrapper{margin:0}
.woocommerce .flex-control-thumbs{display:grid!important;grid-template-columns:repeat(5,1fr);gap:8px;margin:8px 0 0!important;padding:0;list-style:none}
.woocommerce .flex-control-thumbs li{width:auto!important;float:none!important}
.tk-accordion details{border-top:1px solid var(--tk-border);padding:14px 0}
.tk-accordion details:last-child{border-bottom:1px solid var(--tk-border)}
.tk-accordion summary{cursor:pointer;font-weight:600;list-style-position:outside}
@media (max-width:767px){.woocommerce div.product{grid-template-columns:1fr;gap:20px}.tk-gallery-right .woocommerce div.product .woocommerce-product-gallery{order:0}}

/* ---------- cart / checkout / account basics ---------- */
.woocommerce table.shop_table{width:100%;border-collapse:collapse}
.woocommerce table.shop_table td,.woocommerce table.shop_table th{padding:10px;border-bottom:1px solid var(--tk-border);text-align:left}
.woocommerce .col2-set{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.woocommerce .col2-set .col-1,.woocommerce .col2-set .col-2{width:auto;float:none}
.woocommerce form .form-row{margin:0 0 12px}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{width:100%;min-height:44px;padding:8px 10px;border:1px solid var(--tk-border);border-radius:var(--tk-btn-radius)}
.woocommerce-account .woocommerce{display:grid;grid-template-columns:240px 1fr;gap:32px}
.woocommerce-account .woocommerce-MyAccount-navigation,.woocommerce-account .woocommerce-MyAccount-content{width:auto;float:none}
@media (max-width:767px){.woocommerce .col2-set,.woocommerce-account .woocommerce{grid-template-columns:1fr}.woocommerce table.shop_table_responsive tr td{display:block;text-align:right}}

/* ---------- footer ---------- */
.tk-footer{background:var(--tk-footer-bg);color:var(--tk-footer-fg);padding:56px 0 0;margin-top:0}
.tk-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.tk-footer h2{font-size:1rem;text-transform:var(--tk-footer-head-transform,none);margin:0 0 14px}
.tk-footer ul{list-style:none;margin:0;padding:0}
.tk-footer li{margin:0 0 8px}
.tk-footer a{text-decoration:none}
.tk-footer__about{color:inherit;opacity:.85;max-width:42ch}
.tk-footer__social{display:flex;gap:12px;margin:12px 0}
.tk-footer__bottom{border-top:1px solid var(--tk-border);margin-top:40px;padding:18px 0;display:flex;justify-content:space-between;gap:16px;font-size:var(--tk-fs-small)}
.tk-payments{display:flex;gap:8px;align-items:center}
@media (max-width:767px){.tk-footer__grid{grid-template-columns:1fr;gap:28px}.tk-footer__bottom{flex-direction:column}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.tk-banner__title{display:block;font-family:var(--tk-font-head);font-weight:var(--tk-fw-head);font-size:var(--tk-fs-h2);line-height:1.2}
.tk-banner__title.h3{font-size:var(--tk-fs-h3)}
.tk-banner__text{display:block;margin-top:6px}
.tk-section__link{white-space:nowrap;font-weight:600}
.tk-trust__item svg{width:32px;height:32px}
.tk-post-list{display:grid;gap:32px}
.tk-post-list h2{font-size:var(--tk-fs-h3);margin:.4em 0}
.admin-bar .tk-drawer{top:32px}
@media (max-width:782px){.admin-bar .tk-drawer{top:46px}}