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

/* Store-specific overrides. Row references = SECTION_MAP.md band numbers. */

/* T/H: top bar 37px dark, header = white floating rounded bar (reference header row) */
.tk-topbar{min-height:37px;display:flex;align-items:center;justify-content:center;font-size:14px;letter-spacing:.01em}
.tk-header{background:var(--tk-page-top-bg);border-bottom:0;padding:8px 0;position:relative}
.tk-header__inner{background:#fff;border:1px solid var(--tk-border);border-radius:32px;padding:0 20px;min-height:48px;box-shadow:0 1px 3px rgba(31,27,29,.06)}
.tk-nav a{font-size:16px;font-weight:600}
.tk-wordmark{font-family:var(--tk-font-head);font-weight:900;font-size:1.55rem;letter-spacing:-.01em;text-transform:lowercase;color:var(--tk-brand)}
.tk-wordmark::first-letter{color:var(--tk-fg)}
.rt-pill{display:inline-flex;align-items:center;min-height:32px;padding:0 22px;border-radius:30px;background:var(--tk-pill);color:#fff;font-weight:600;font-size:16px;text-decoration:none;white-space:nowrap}
.rt-pill:hover{opacity:.9;color:#fff}
@media (max-width:1023px){.rt-pill{display:none}.tk-header{padding:0}.tk-header__inner{border-radius:0;border-width:0 0 1px;box-shadow:none;min-height:56px;padding:0 var(--tk-gutter-m)}}

/* Section heads: centered uppercase titles with accent bar (reference two-tone H2) */
.tk-section__head{justify-content:center;text-align:center;flex-direction:column;align-items:center;margin-bottom:32px}
.tk-section__head h1,.tk-section__head h2{text-transform:uppercase;max-width:736px;line-height:1.3}
.tk-section__head h2::after{content:"";display:block;width:56px;height:4px;border-radius:2px;background:var(--tk-brand);margin:12px auto 0}
.tk-section__sub{max-width:640px}
.tk-section__link{margin-top:8px}
h1,h2{text-transform:uppercase}
.tk-prose h2,.tk-prose h3,.tk-page__title{text-transform:none}
.tk-section--alt{background:var(--tk-alt-bg)}

/* 0: hero — dark band, white text over image slot (stacks under image on mobile) */
.tk-hero .tk-slot{background:var(--tk-hero-bg)}
.tk-hero__title{font-size:var(--tk-fs-h1);line-height:1;font-weight:900;max-width:9ch}
.tk-hero__text{font-size:18px;max-width:40ch}
.tk-hero .tk-btn{min-height:57px;padding:0 2.2em;font-size:18px;border-radius:8px;margin-top:8px}
.tk-hero--on-image{color:#fff}
@media (max-width:767px){.tk-hero--stack-m .tk-hero__body{color:var(--tk-fg);text-align:center}.tk-hero--stack-m .tk-hero__body .tk-container{align-items:center}.tk-hero__title{max-width:none}}

/* 1: trust row */
.tk-trust-section{padding:40px 0}
.tk-trust__item svg{color:var(--tk-brand)}
.tk-trust{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1023px){.tk-trust{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 2/3/9: tiles */
.tk-tile__label{text-transform:uppercase;font-weight:800;font-size:15px;text-align:center;letter-spacing:.02em}
.tk-tile .tk-slot{border-radius:var(--tk-radius)}
.tk-tiles .tk-grid{gap:32px}
@media (max-width:767px){.tk-tiles .tk-grid{gap:16px}}

/* 4: media band */
.rt-media{max-width:1200px;margin:0 auto}
.rt-media .tk-slot{border-radius:var(--tk-radius)}

/* 5/6: split bands */
.tk-split__body h2{text-transform:uppercase}
.tk-split-section--accent{background:var(--tk-band-accent);color:#fff}
.tk-split-section--accent .tk-btn{background:#fff;color:var(--tk-band-accent);border-color:#fff}
.tk-split-section--accent{padding:56px 0}
.tk-split__body ul{padding-left:1.2em}

/* 8/10: steps */
.rt-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.rt-step .tk-slot{border-radius:var(--tk-radius);margin-bottom:14px}
.rt-step h3{font-size:var(--tk-fs-h3);font-weight:600;margin:0 0 .4em}
.rt-step p{color:var(--tk-muted);margin:0 0 .6em}
.rt-step a{color:var(--tk-link);font-weight:600;text-decoration:none}
.rt-steps-cta{text-align:center;margin-top:32px}
@media (max-width:767px){.rt-steps{grid-template-columns:1fr}}

/* 11: FAQ two columns */
.rt-faq{display:grid;grid-template-columns:1fr 1fr;gap:8px 48px;text-align:left;max-width:none}
.rt-faq details{border-bottom:1px solid var(--tk-border);padding:14px 0}
.rt-faq summary{cursor:pointer;font-weight:600}
.rt-faq p{margin:.6em 0 0;color:var(--tk-muted)}
.tk-rich-section .tk-rich{max-width:none}
.tk-rich-section h2{text-align:center}
@media (max-width:767px){.rt-faq{grid-template-columns:1fr}}

/* Buttons and links */
.tk-btn,.button,button.button,input[type=submit]{border-radius:var(--tk-btn-radius);min-height:48px;font-weight:700}
.tk-prose a,.term-description a{color:var(--tk-link)}

/* Policy page components */
.policy-updated{color:var(--tk-muted);font-size:var(--tk-fs-small)}
.policy-summary{background:var(--tk-alt-bg);border-left:4px solid var(--tk-brand);border-radius:var(--tk-radius);padding:16px 20px;margin:0 0 24px}
.policy-summary h2{margin-top:0;font-size:1.25rem}
.policy-table caption{font-weight:700}
.policy-table th{background:var(--tk-alt-bg)}

/* Catalog: category description + grid gaps (reference 3 cols) */
.woocommerce ul.products{gap:32px 24px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-weight:700}
.tk-woo h1.page-title{font-size:28px;text-transform:none}

/* Product page: stacked open info sections (reference shows all sections open) */
.tk-accordion summary{font-size:18px}

/* Footer: dark, accent headings, giant wordmark */
.tk-footer{background:var(--tk-footer-bg);color:var(--tk-footer-fg);padding-top:48px}
.tk-footer__grid{grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px}
.tk-footer h2{color:var(--tk-footer-head);font-size:19px;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.tk-footer a{color:var(--tk-footer-fg)}
.tk-footer .tk-wordmark{color:#fff}
.tk-footer .tk-wordmark::first-letter{color:var(--tk-footer-head)}
.rt-footer-email{display:block;font-family:var(--tk-font-head);font-weight:900;font-size:22px;margin:14px 0;word-break:break-all;text-transform:uppercase}
.tk-footer .tk-btn{background:var(--tk-pill);border-color:var(--tk-pill);color:#fff}
.tk-footer__bottom{border-top-color:rgba(255,255,255,.18)}
.rt-giant{font-family:var(--tk-font-head);font-weight:900;font-size:clamp(64px,17vw,250px);line-height:.8;letter-spacing:-.04em;color:#fff;text-transform:lowercase;overflow:hidden;white-space:nowrap;margin:24px 0 0;user-select:none}
@media (max-width:1023px){.tk-footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:767px){.tk-footer__grid{grid-template-columns:1fr}.rt-footer-email{font-size:18px}}
@media (max-width:1023px){.tk-header>.tk-container{padding:0}}
@media (max-width:767px){.tk-hero__title{font-size:var(--tk-fs-h1-m);line-height:1.1}.tk-topbar{font-size:12px;padding:.35em 12px}}
.tk-trust__item h3 a{text-decoration:none}
.rt-topbar{display:flex;justify-content:space-between;align-items:center;gap:16px}
.rt-topbar__item a{color:inherit}
@media (max-width:767px){.rt-topbar{justify-content:center}.rt-topbar__item:not(:first-child){display:none}}
.tk-topbar{padding-left:0;padding-right:0}
/* Base theme: .tk-page padding shorthand zeroes the container gutters on pages/catalog - restore them (VISUAL_QA_LOG #1) */
.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)}}

/* ===== Brand: logo sizing (static; the earlier animated asset pass was removed - taokhungwp 1.1.x no-animation policy) ===== */
.tk-brand .tk-logo{display:block;height:var(--tk-logo-h);width:auto;max-width:none}
.tk-brand--footer .tk-logo{height:48px}
@media (max-width:1023px){.tk-brand--header .tk-logo{height:var(--tk-logo-h-m)}}

/* ===== Motion policy: hover/focus colour transitions only (no keyframes, no marquee, no sparkle layers) ===== */
@media (prefers-reduced-motion:no-preference){
  a,.tk-btn,.button,.tk-nav a,.tk-tile{transition:opacity .15s ease,background-color .15s ease,color .15s ease,border-color .15s ease}
}
.tk-trust__item svg{stroke-width:1.5}

/* ===== Empty image slots: professional, photo-ready presentation (parent theme-base 1.0.0 has no rules for this;
   same intent as theme-base 1.1.0). Everything below applies only while a slot has no photo and switches off by itself
   when a photo is attached. Administrators see the raw neutral boxes with ?tk_slots=1 (body.tk-slot-guides). ===== */
.tk-slot--empty{background:var(--tk-slot-bg,#ece6e8)}
.tk-tile .tk-slot--empty,.tk-split__media .tk-slot--empty,.rt-step .tk-slot--empty{border-radius:var(--tk-radius)}

/* hero: solid brand-dark band, white text stays readable (dark plum #3b0d1c vs #fff = 15:1) */
.tk-hero .tk-slot--empty{background:linear-gradient(120deg,#3b0d1c 0%,#541227 60%,#6d1632 100%)}
body:not(.tk-slot-guides) .tk-hero:has(.tk-slot--empty) .tk-btn{background:#fff;color:var(--tk-brand);border-color:#fff}
body:not(.tk-slot-guides) .tk-hero:has(.tk-slot--empty) .tk-btn:hover,body:not(.tk-slot-guides) .tk-hero:has(.tk-slot--empty) .tk-btn:focus-visible{background:#ffe9ee;color:#7d0b2b}
@media (max-width:767px){
  /* no 390x560 empty box on phones: text sits on the same dark band */
  body:not(.tk-slot-guides) .tk-hero--stack-m:has(.tk-slot--empty) .tk-hero__media{display:none}
  body:not(.tk-slot-guides) .tk-hero--stack-m:has(.tk-slot--empty) .tk-hero__body{background:linear-gradient(120deg,#3b0d1c 0%,#541227 60%,#6d1632 100%);color:#fff;padding:56px 0 60px}
  body:not(.tk-slot-guides) .tk-hero--stack-m:has(.tk-slot--empty) .tk-hero__text{margin-left:auto;margin-right:auto}
}

/* tiles without a photo become clean link cards (label only), no grey voids */
body:not(.tk-slot-guides) .tk-tile:has(.tk-slot--empty){display:flex;align-items:center;justify-content:center;min-height:104px;padding:20px 16px;border:1px solid var(--tk-border);border-radius:var(--tk-radius);background:#fff;color:var(--tk-fg)}
body:not(.tk-slot-guides) .tk-tile:has(.tk-slot--empty) .tk-slot{display:none}
body:not(.tk-slot-guides) .tk-tile:has(.tk-slot--empty) .tk-tile__label{margin:0;padding:0}
body:not(.tk-slot-guides) .tk-tile:has(.tk-slot--empty) .tk-tile__label::after{content:" \203A";color:var(--tk-brand)}
body:not(.tk-slot-guides) .tk-tile:has(.tk-slot--empty):hover,body:not(.tk-slot-guides) .tk-tile:has(.tk-slot--empty):focus-visible{border-color:var(--tk-brand);color:var(--tk-brand)}
body:not(.tk-slot-guides) .tk-tiles .tk-grid:has(.tk-slot--empty){gap:16px}

/* wide feature band: hidden until its photo exists */
body:not(.tk-slot-guides) .rt-media-band:has(.tk-slot--empty){display:none}

/* image + text splits: text only, centred, until the photo exists */
body:not(.tk-slot-guides) .tk-split:has(.tk-slot--empty){grid-template-columns:1fr;max-width:760px;margin-left:auto;margin-right:auto;text-align:center}
body:not(.tk-slot-guides) .tk-split:has(.tk-slot--empty) .tk-split__media{display:none}
body:not(.tk-slot-guides) .tk-split:has(.tk-slot--empty) .tk-split__body ul{display:inline-block;text-align:left}
body:not(.tk-slot-guides) .tk-split-section:has(.tk-slot--empty){padding-top:var(--tk-section-y);padding-bottom:var(--tk-section-y)}

/* step / info cards: numbered text cards until photos exist */
.rt-steps{counter-reset:rtstep}
body:not(.tk-slot-guides) .rt-step:has(.tk-slot--empty){counter-increment:rtstep;border:1px solid var(--tk-border);border-radius:var(--tk-radius);padding:24px;background:#fff}
body:not(.tk-slot-guides) .rt-step:has(.tk-slot--empty) .tk-slot{display:none}
body:not(.tk-slot-guides) .rt-step:has(.tk-slot--empty)::before{content:counter(rtstep);display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-bottom:12px;border-radius:50%;background:var(--tk-brand);color:#fff;font-weight:800}
body:not(.tk-slot-guides) .tk-section--alt .rt-step:has(.tk-slot--empty){background:#fff}

/* category banner slot (child hook, none rendered by the current layout): never show an empty grey block */
.tk-cat-banner:has(.tk-slot--empty){display:none}
.tk-slot-guides .tk-cat-banner:has(.tk-slot--empty){display:block}