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

/* Store-specific overrides only. Each rule names its SECTION_MAP row. */

/* Row 0: announcement bar 50px desktop / 42px mobile */
.tk-topbar{min-height:var(--tk-topbar-h);display:flex;align-items:center;justify-content:center;font-weight:500;letter-spacing:.01em}
.tk-topbar a:hover{opacity:1;text-decoration:underline}
@media (max-width:767px){.tk-topbar{min-height:var(--tk-topbar-h-m);font-size:13px;padding:.35em var(--tk-gutter-m)}}

/* Row 1: header — logo left, nav after logo (flex-start), icons right; 104/94/64 */
.tk-header{border-bottom:1px solid var(--tk-border)}
.tk-header__inner{gap:40px}
.tk-wordmark{color:var(--tk-fg);font-size:1.6rem;font-weight:800;letter-spacing:-.01em}
.tk-wordmark::first-letter{color:var(--tk-accent-dark)}
.tk-nav a{font-size:15px;font-weight:500}
.tk-nav .sub-menu a{font-weight:400;padding:.45em 0}
.tk-nav .menu-item-has-children>a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg)}
@media (min-width:1024px) and (max-width:1199px){.tk-header__inner{gap:20px}.tk-nav ul{gap:16px}.tk-nav a{font-size:14px}}
@media (max-width:1023px){.tk-header__inner{min-height:var(--tk-header-h-t)}}
@media (max-width:767px){.tk-header__inner{min-height:var(--tk-header-h-m)}}

/* Buttons: honey accent with dark text (contrast 8.9:1) */
.tk-btn,.button,button.button,input[type=submit]{border-radius:var(--tk-btn-radius)}
.tk-btn--ghost{background:transparent;color:var(--tk-fg);border-color:var(--tk-fg)}

/* Row 2: hero contained in the 1340 container (1340x628 at 1440; 738x346 at 768; 360x202 at 390) */
.tk-hero{width:calc(100% - 2*var(--tk-gutter));max-width:var(--tk-container);margin:0 auto}
.tk-hero .tk-hero__body .tk-container{padding:0 56px}
.tk-hero__title{font-size:var(--tk-fs-hero);font-weight:600;line-height:1.1;max-width:14ch}
.tk-hero__text{font-size:18px}
@media (max-width:1023px){.tk-hero__title{font-size:34px}.tk-hero .tk-hero__body .tk-container{padding:0 32px}}
@media (max-width:767px){.tk-hero{width:calc(100% - 2*var(--tk-gutter-m))}.tk-hero .tk-hero__body .tk-container{padding:0}.tk-hero__title{font-size:var(--tk-fs-hero-m)}.tk-hero__text{font-size:16px}}

/* Rows 3-7, 9, 10: product rows — 28px/600 heading row, tight band spacing */
.tk-section__head{margin-bottom:18px}
.tk-section__head h2{font-size:var(--tk-fs-h2)}
.tk-section__link{font-size:14px;text-decoration:underline;text-underline-offset:3px}
@media (max-width:767px){.tk-section__head h2{font-size:var(--tk-fs-h2-m)}}

/* Row 8: centred rich-text band, heading 36px */
.tk-rich-section .tk-rich h2{font-size:var(--tk-fs-rich)}
.tk-rich-section .tk-rich{max-width:900px}
.tk-rich-section .tk-rich p{color:var(--tk-muted)}
@media (max-width:767px){.tk-rich-section .tk-rich h2{font-size:var(--tk-fs-rich-m)}}

/* Row 11: recipient tiles 1:1, label centred under tile */
.tk-tiles{--tk-tile-align:center}
.tk-tile .tk-slot{border-radius:var(--tk-radius)}
.tk-tile__label{font-weight:600}

/* Row 12 replacement: trust row */
.tk-trust-section{border-top:1px solid var(--tk-border)}
.tk-trust__item svg{color:var(--tk-accent-dark)}

/* Row 13: footer — brand block + Company + Customer Support */
.tk-footer{border-top:1px solid var(--tk-border)}
.tk-footer h2{font-size:18px;font-weight:600}
.tk-footer .tk-wordmark{font-size:1.5rem}
.tk-footer .tk-brand{margin-bottom:12px}
.tk-footer__bottom{color:var(--tk-muted)}

/* Base fix: .tk-page shorthand padding removed the container side gutters */
.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)}}

/* Policy prose classes (policy-pages.md §3) */
.policy-updated{color:var(--tk-muted);font-size:var(--tk-fs-small)}
.policy-summary{background:var(--tk-footer-bg);border:1px solid var(--tk-border);border-left:4px solid var(--tk-accent);border-radius:var(--tk-radius);padding:18px 22px;margin:0 0 28px}
.policy-summary h2{margin-top:0!important;font-size:1.25rem}
.policy-summary ul{margin-bottom:0}
.tk-prose a{color:var(--tk-link);text-underline-offset:2px}
.tk-prose .policy-table th{background:var(--tk-footer-bg)}

/* Empty catalog note */
.tk-empty-catalog{max-width:var(--tk-prose-max)}

/* ===== Brand + empty-slot states (finalize pass 2026-10-03; skill 1.1.x) =====
   No looping animation, no decorative overlays. Only hover/focus transitions. Empty photo slots render as
   calm, intentional layouts (no grey voids); attach a photo and the slot box returns automatically. */
/* Logo: keep header/footer logo inside the header box (SECTION_MAP row 1: 160x64 d / 90x36 m) */
.tk-brand .tk-logo{height:46px;width:auto;max-width:100%;aspect-ratio:1200/291;display:block}
.tk-footer .tk-brand .tk-logo{height:42px}
@media (max-width:767px){.tk-brand .tk-logo{height:36px}}

/* Hero with an empty slot: warm text panel instead of a 1340x628 neutral box (dark text, always readable) */
.tk-hero:has(.tk-slot--empty) .tk-hero__media{display:none}
.tk-hero:has(.tk-slot--empty) .tk-hero__body{position:static;padding:72px 0;background:var(--tk-footer-bg);border:1px solid var(--tk-border);border-radius:var(--tk-radius);color:var(--tk-fg)}
.tk-hero:has(.tk-slot--empty) .tk-hero__title{max-width:18ch}
@media (max-width:767px){.tk-hero:has(.tk-slot--empty) .tk-hero__body{padding:36px 20px}}
/* admin guide (?tk_slots=1) still shows the reserved boxes */
.tk-slot-guides .tk-hero:has(.tk-slot--empty) .tk-hero__media{display:block}
.tk-slot-guides .tk-hero:has(.tk-slot--empty) .tk-hero__body{position:absolute;padding:0;background:none;border:0}

/* Recipient tiles: simple hover/focus transition only */
.tk-tile__label{transition:color .2s ease}
@media (hover:hover){.tk-tile:hover .tk-tile__label{color:var(--tk-accent-dark)}}
.tk-tile:focus-visible{outline:3px solid var(--tk-accent);outline-offset:2px}
/* Tiles whose photo slot is empty become compact label cards (no grey squares) */
.tk-tile:has(.tk-slot--empty){display:flex;align-items:center;justify-content:center;min-height:96px;padding:18px 12px;background:var(--tk-footer-bg);border:1px solid var(--tk-border);border-radius:var(--tk-radius);transition:border-color .2s ease}
.tk-tile:has(.tk-slot--empty) .tk-slot{display:none}
.tk-tile:has(.tk-slot--empty) .tk-tile__label{margin:0;font-size:1.1rem;font-weight:600}
@media (hover:hover){.tk-tile:has(.tk-slot--empty):hover{border-color:var(--tk-accent)}}
.tk-slot-guides .tk-tile:has(.tk-slot--empty){display:block;min-height:0;padding:0;background:none;border:0}
.tk-slot-guides .tk-tile:has(.tk-slot--empty) .tk-slot{display:block}

/* Category page banner (if a banner slot is ever added): hidden for visitors while empty */
.tk-cat-banner:has(.tk-slot--empty){display:none}
.tk-slot-guides .tk-cat-banner:has(.tk-slot--empty){display:block}

/* Trust row: static line icons from the base theme (truck, return, chat) */
.tk-trust__item svg{width:32px;height:32px;color:var(--tk-accent-dark)}