/*
Theme Name: Pearltee
Description: Store child theme for pearltee.com (taokhungwp). Layout numbers in tokens.css come from .wmb/pearltee.com/SECTION_MAP.md.
Template: taokhung-base
Version: 1.0.0
Text Domain: pearltee
License: GPL-2.0-or-later
*/

/* ---- SECTION_MAP row 1: promo bar (ref 74px tall, bright, text + pill button) ---- */
.pt-topbar{display:flex;align-items:center;justify-content:center;gap:16px;min-height:74px;padding:12px var(--tk-gutter);font-size:15px;font-weight:600}
.pt-topbar__btn{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:999px;background:var(--tk-header-bg);color:#fff;text-decoration:none;font-size:13px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
@media (max-width:767px){.pt-topbar{min-height:56px;font-size:13px;gap:10px;padding:8px var(--tk-gutter-m)}.pt-topbar__btn{min-height:34px;padding:0 12px;font-size:11px}}

/* ---- row 2: dark header (ref 73px; Shop drawer button, 150x24 logo, wide search, labelled icons, CTA) ---- */
.pt-header{position:relative;top:auto;border-bottom:0;background:var(--tk-header-bg);color:var(--tk-header-fg)} /* reference header is static (measured position:static) */
.pt-header__inner{gap:20px}
.pt-header .tk-brand{order:0}
.pt-header .tk-wordmark{font-size:26px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:24px}
.pt-header .tk-brand img{max-height:var(--tk-logo-h)}
.pt-shop-toggle{display:inline-flex!important;flex-direction:column;gap:2px;min-width:48px;font-size:12px}
.pt-icon{flex-direction:column;gap:2px;font-size:12px;min-width:52px}
.pt-icon-label{display:block;line-height:1;font-size:12px;font-weight:500}
.pt-header__search{flex:1 1 auto;max-width:560px;margin:0 auto}
.pt-header__search form{display:flex;gap:0;width:100%}
.pt-header__search input[type=search]{flex:1;min-height:44px;padding:0 14px;border:0;border-radius:var(--tk-btn-radius) 0 0 var(--tk-btn-radius);background:#fff;color:var(--tk-fg)}
.pt-header__search button,.pt-header__search input[type=submit]{min-height:44px;border-radius:0 var(--tk-btn-radius) var(--tk-btn-radius) 0;border:0;background:var(--tk-accent);color:#fff;padding:0 16px}
.pt-search-toggle{display:none!important}
.pt-icons{gap:6px}
.pt-header__cta{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:var(--tk-btn-radius);background:var(--tk-accent);color:#fff;text-decoration:none;font-weight:600;font-size:14px;white-space:nowrap;margin-left:6px}
@media (max-width:1023px){
  .pt-header__inner{min-height:var(--tk-header-h-m)}
  .pt-header .tk-brand{flex:1 1 auto;justify-content:center}
  .pt-header .tk-wordmark{font-size:20px}
  .pt-header__search{display:none;position:absolute;left:0;right:0;top:100%;max-width:none;padding:10px var(--tk-gutter-m);background:var(--tk-header-bg);z-index:5}
  .pt-header__search.is-open{display:block}
  .pt-search-toggle{display:inline-flex!important}
  .pt-icon-label,.pt-shop-toggle .pt-icon-label{display:none}
  .pt-header__cta{display:none}
  .pt-header .tk-icon--account{display:none}
}

/* ---- row 3: dark category band (ref 80px tall; centred items 56-80px wide: 40px round icon + 12px label; "Shop All" boxed first) ---- */
.pt-explore{background:var(--tk-header-bg);border-top:1px solid rgba(255,255,255,.08)}
.pt-explore__inner{min-height:var(--tk-explore-h);display:flex;align-items:center}
.pt-explore ul{list-style:none;margin:0 auto;padding:6px 0;display:flex;gap:4px;flex-wrap:nowrap;justify-content:center;align-items:center}
.pt-explore__item a{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:64px;padding:4px 8px;color:#fff;text-decoration:none;font-size:12px;font-weight:500;white-space:nowrap;border-radius:8px}
.pt-explore__icon{display:block;width:40px;height:40px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.14)}
.pt-explore__icon .tk-slot{width:40px;height:40px;background:rgba(255,255,255,.14)}
.pt-explore__item--all a{flex-direction:row;min-height:47px;padding:0 14px;margin-right:12px;border:1px solid rgba(255,255,255,.5);font-weight:700;font-size:13px}
.pt-explore__item a:hover{background:rgba(255,255,255,.08);opacity:1}
@media (max-width:1023px){
  .pt-explore__inner{min-height:var(--tk-explore-h-m);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .pt-explore ul{justify-content:flex-start;margin:0}
  .pt-explore__item a{min-width:58px;font-size:11px}
  .pt-explore__icon,.pt-explore__icon .tk-slot{width:34px;height:34px}
  .pt-explore__item--all a{min-height:40px;margin-right:6px}
}
.admin-bar .pt-header{top:auto}

/* ---- shared image card with readable text panel (rows 5-6) ---- */
.pt-card{position:relative;border-radius:var(--tk-radius);overflow:hidden;background:var(--tk-slot-bg)}
.pt-card .tk-slot{border-radius:var(--tk-radius)}
.pt-card__panel{position:absolute;left:16px;bottom:16px;right:16px;max-width:30rem;padding:18px 20px;border-radius:var(--tk-radius);background:var(--tk-card-panel);color:#fff}
.pt-card__kicker{margin:0 0 4px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.pt-card__title{margin:0 0 6px;font-size:var(--tk-fs-h2);font-weight:600;line-height:1.2;color:#fff}
.pt-card__title--xl{font-size:40px;font-weight:600}
.pt-card__text{margin:0 0 12px;font-size:15px}
.pt-btn-light{background:#fff;color:var(--tk-header-bg);border-color:#fff;min-height:40px;padding:.4em 1.2em}
@media (max-width:767px){.pt-card__title--xl{font-size:26px}.pt-card__panel{position:static;max-width:none;border-radius:0 0 var(--tk-radius) var(--tk-radius);background:var(--tk-header-bg)}.pt-card__title{font-size:20px}}

/* ---- row 4: slim call-out strip ---- */
.pt-strip{padding:16px 0 0}
.pt-strip__band{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;min-height:64px;padding:10px 20px;border-radius:var(--tk-radius);background:#ecebf3;text-align:center}
.pt-strip__text{margin:0;display:flex;flex-direction:column;line-height:1.3}
.pt-strip__text strong{font-size:16px}
.pt-strip__text span{font-size:13px;color:var(--tk-muted)}
.pt-strip__btn{min-height:38px;padding:.3em 1.1em;font-size:14px}

/* ---- row 5: hero grid (850 + 413 at 1440, side tiles stacked) ---- */
.pt-hero-grid{padding-top:24px}
.pt-hero-grid__grid{display:grid;grid-template-columns:minmax(0,850fr) minmax(0,413fr);gap:var(--tk-gap);align-items:start}
.pt-hero-grid__side{display:grid;gap:var(--tk-gap);align-content:start}
@media (max-width:767px){.pt-hero-grid__grid{grid-template-columns:1fr;gap:var(--tk-gap-m)}.pt-hero-grid__side{grid-template-columns:1fr 1fr;gap:var(--tk-gap-m)}.pt-hero-grid__side .pt-card__text,.pt-hero-grid__side .pt-btn-light{display:none}.pt-hero-grid__side .pt-card__title{font-size:16px;margin:0}}

/* ---- row 7: category tiles (ref 8 across, round 100px icons, label under) ---- */
.tk-tiles--round .tk-tile{text-align:center}
.tk-tiles--round .tk-slot{max-width:100px;margin:0 auto;border-radius:50%}
.tk-tiles--round .tk-tile__label{text-align:center;font-weight:500;font-size:15px}
.tk-tiles--round .tk-grid{gap:16px}
@media (max-width:767px){.tk-tiles--round .tk-slot{max-width:72px}.tk-tiles--round .tk-tile__label{font-size:13px}}

/* ---- row 9: site copy block ---- */
.tk-rich-section--copy .tk-rich{max-width:none;columns:2 360px;column-gap:48px;font-size:15px;color:var(--tk-muted)}
.tk-rich-section--copy h2{column-span:all;color:var(--tk-fg);font-size:18px;font-weight:600}
.tk-rich-section--copy h3{font-size:16px;color:var(--tk-fg);margin-top:0;break-after:avoid}

/* ---- section heads (ref h2 24px/400) ---- */
.tk-section__head h2{font-weight:500}

/* ---- footer (ref: brand block + link columns, legal row at bottom) ---- */
.pt-footer__grid{grid-template-columns:1.5fr 1fr 1fr 1fr}
.pt-footer__mail a{font-weight:600}
.pt-footer__legal{display:flex;gap:16px;flex-wrap:wrap}
@media (max-width:1023px){.pt-footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:767px){.pt-footer__grid{grid-template-columns:1fr}}
.tk-footer{border-top:1px solid var(--tk-border)}
.tk-footer .tk-wordmark{font-size:24px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.tk-footer h2{font-size:15px;letter-spacing:.04em;text-transform:uppercase}
.tk-footer__bottom{color:var(--tk-muted)}

/* ---- policy & support pages (policy-pages.md §3) ---- */
.policy-updated{font-size:var(--tk-fs-small);color:var(--tk-muted)}
.policy-summary{background:#f4f4f8;border:1px solid var(--tk-border);border-radius:var(--tk-radius);padding:18px 22px;margin:18px 0 28px}
.policy-summary h2{margin-top:0;font-size:20px}
.policy-summary ul{margin-bottom:0}
.tk-prose .policy-table caption{font-size:15px}
.tk-prose .policy-table th{background:#f4f4f8}
.tk-prose h2{font-size:24px}
.tk-prose h3{font-size:18px}
.pt-ticket-links{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));list-style:none;padding:0!important}
.pt-ticket-links a{display:block;padding:12px 14px;border:1px solid var(--tk-border);border-radius:var(--tk-radius);text-decoration:none;font-weight:600}
.woocommerce form.track_order{max-width:560px;margin:0 0 28px;padding:18px 20px;border:1px solid var(--tk-border);border-radius:var(--tk-radius)}

/* ---- inner pages: base .tk-page padding shorthand removed the container side gutters (0px on mobile) ---- */
.tk-container.tk-page{padding-left:var(--tk-gutter);padding-right:var(--tk-gutter)}
@media (max-width:767px){.tk-container.tk-page{padding-left:var(--tk-gutter-m);padding-right:var(--tk-gutter-m)}}

/* ---- logo sizing (vector stand-in logo until the owner supplies the real one) ---- */
.pt-header .tk-brand img{width:auto;height:var(--tk-logo-h);max-height:none}
.tk-footer .tk-brand img{width:auto;height:34px;max-height:none}
@media (max-width:1023px){.pt-header .tk-brand img{height:var(--tk-logo-h-m)}}

/* ---- interaction: colour/shadow transitions only (no transforms, no keyframes, no looping animation) ---- */
.pt-card a,.pt-btn-light,.pt-explore__item a,.tk-tiles--round .tk-tile,.tk-trust__item a{transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}
.pt-btn-light:hover,.pt-btn-light:focus-visible{background:#f1f1f6;color:var(--tk-header-bg)}
a:focus-visible,.tk-btn:focus-visible,button:focus-visible{outline:2px solid var(--tk-accent);outline-offset:2px}
.pt-explore a:focus-visible{outline-color:#fff}

/* ---- trust row (base static line icons: truck, return, lock, chat) ---- */
.tk-trust-section{padding-top:var(--tk-section-y)}
.tk-trust-section .tk-trust{text-align:left}
.tk-trust-section .tk-trust__item{display:grid;grid-template-columns:32px 1fr;column-gap:12px;align-items:start;padding:14px 16px;border:1px solid var(--tk-border);border-radius:var(--tk-radius);background:#fff}
.tk-trust-section .tk-trust__item svg{grid-row:1 / span 2;margin-top:2px;color:var(--tk-accent)}
.tk-trust-section .tk-trust__item h3{margin:0;font-size:16px;line-height:1.3}
.tk-trust-section .tk-trust__item h3 a{color:inherit;text-decoration:none}
.tk-trust-section .tk-trust__item h3 a:hover,.tk-trust-section .tk-trust__item h3 a:focus-visible{text-decoration:underline}
.tk-trust-section .tk-trust__item p{margin:2px 0 0;font-size:13px}
@media (max-width:1023px){.tk-trust-section .tk-trust{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.tk-trust-section{padding-top:var(--tk-section-y-m)}.tk-trust-section .tk-trust{gap:var(--tk-gap-m)}}
@media (max-width:480px){.tk-trust-section .tk-trust{grid-template-columns:1fr}}

/* ============ Empty image slots (no photos attached yet) ============
   Visitors never see a grey void: promo cards become flat brand-colour panels with readable text, the
   header category band and the category grid lose their icon circles and show text links.
   Administrators still see the neutral boxes with ?tk_slots=1 (body.tk-slot-guides). */
body:not(.tk-slot-guides) .pt-card:has(.tk-slot--empty){display:flex;flex-direction:column;justify-content:center;min-height:210px;--pc-bg:var(--tk-header-bg);--pc-fg:#fff;--pc-kick:#f5c242;background:var(--pc-bg);color:var(--pc-fg)}
body:not(.tk-slot-guides) .pt-card:has(.tk-slot--empty) .tk-slot--empty{display:none}
body:not(.tk-slot-guides) .pt-card:has(.tk-slot--empty) .pt-card__panel{position:static;max-width:none;padding:28px;background:none;color:inherit}
body:not(.tk-slot-guides) .pt-card:has(.tk-slot--empty) .pt-card__title{color:inherit}
body:not(.tk-slot-guides) .pt-card:has(.tk-slot--empty) .pt-card__kicker{color:var(--pc-kick);opacity:1}
body:not(.tk-slot-guides) .pt-hero-grid__grid:has(.tk-slot--empty){align-items:stretch}
body:not(.tk-slot-guides) .pt-hero-grid__main:has(.tk-slot--empty){min-height:440px}
body:not(.tk-slot-guides) .pt-hero-grid__main:has(.tk-slot--empty) .pt-card__panel{padding:40px 44px;max-width:36rem}
body:not(.tk-slot-guides) .pt-hero-grid__side .pt-card:has(.tk-slot--empty){min-height:0}
body:not(.tk-slot-guides) .pt-hero-grid__side .pt-card:nth-child(1):has(.tk-slot--empty){--pc-bg:#0d6f78}
body:not(.tk-slot-guides) .pt-hero-grid__side .pt-card:nth-child(2):has(.tk-slot--empty){--pc-bg:#f5c242;--pc-fg:#17192c;--pc-kick:#17192c}
body:not(.tk-slot-guides) .pt-hero-grid__side .pt-card:nth-child(2):has(.tk-slot--empty) .pt-btn-light{background:#17192c;color:#fff;border-color:#17192c}
body:not(.tk-slot-guides) .pt-card--promo:nth-child(1):has(.tk-slot--empty){--pc-bg:#f5c242;--pc-fg:#17192c}
body:not(.tk-slot-guides) .pt-card--promo:nth-child(1):has(.tk-slot--empty) .pt-btn-light{background:#17192c;color:#fff;border-color:#17192c}
body:not(.tk-slot-guides) .pt-card--promo:nth-child(2):has(.tk-slot--empty){--pc-bg:#0d6f78}
body:not(.tk-slot-guides) .pt-card--promo:nth-child(3):has(.tk-slot--empty){--pc-bg:#17192c}
body:not(.tk-slot-guides) .pt-card--promo:has(.tk-slot--empty){min-height:240px}
@media (max-width:767px){
  body:not(.tk-slot-guides) .pt-hero-grid__main:has(.tk-slot--empty){min-height:0}
  body:not(.tk-slot-guides) .pt-hero-grid__main:has(.tk-slot--empty) .pt-card__panel{padding:28px 22px}
  body:not(.tk-slot-guides) .pt-hero-grid__side .pt-card:has(.tk-slot--empty) .pt-card__panel{padding:16px 14px}
  body:not(.tk-slot-guides) .pt-card--promo:has(.tk-slot--empty){min-height:0}
}
/* homepage category grid: text chips while the category pictures are empty */
body:not(.tk-slot-guides) .tk-tiles--round .tk-grid:has(.tk-slot--empty){grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px}
body:not(.tk-slot-guides) .tk-tiles--round .tk-tile:has(.tk-slot--empty) .tk-slot{display:none}
body:not(.tk-slot-guides) .tk-tiles--round .tk-tile:has(.tk-slot--empty){display:flex;align-items:center;justify-content:center;min-height:56px;padding:10px 12px;border:1px solid var(--tk-border);border-radius:var(--tk-radius);background:#fff;color:var(--tk-fg)}
body:not(.tk-slot-guides) .tk-tiles--round .tk-tile:has(.tk-slot--empty) .tk-tile__label{margin:0;font-size:15px;font-weight:600}
body:not(.tk-slot-guides) .tk-tiles--round .tk-tile:has(.tk-slot--empty):hover,body:not(.tk-slot-guides) .tk-tiles--round .tk-tile:has(.tk-slot--empty):focus-visible{border-color:var(--tk-accent);box-shadow:0 2px 10px rgba(23,25,44,.08)}
@media (max-width:767px){body:not(.tk-slot-guides) .tk-tiles--round .tk-grid:has(.tk-slot--empty){grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* header category band: text-only items while the category pictures are empty */
.pt-explore__item--text a{flex-direction:row;min-height:40px;padding:0 12px;font-size:13px;font-weight:600}


/* empty hero: side tiles share the hero height; tiles stay clickable on mobile */
@media (min-width:768px){body:not(.tk-slot-guides) .pt-hero-grid__side:has(.tk-slot--empty){align-content:stretch;grid-template-rows:1fr 1fr}}
@media (max-width:767px){body:not(.tk-slot-guides) .pt-hero-grid__side .pt-card:has(.tk-slot--empty) .pt-btn-light{display:inline-flex;min-height:34px;padding:.2em .9em;font-size:13px;margin-top:8px}body:not(.tk-slot-guides) .pt-hero-grid__side .pt-card:has(.tk-slot--empty) .pt-card__title{margin-bottom:0}}