/**
 * tomtoc Customizer — CSS ของ "กล่อง" ที่ครอบ iframe เท่านั้น
 *
 * WHY ไฟล์แยก ไม่ไปต่อท้าย pub/media/ref-custom-styles-4.css
 *   ไฟล์นั้นเป็น CSS รวมของทั้งเว็บและอยู่บน shared mount (pub/media) —
 *   แก้ผิดคือทุก pod พังพร้อมกัน ไม่มี canary
 *   ของโมดูลควรมาพร้อมโมดูล ถอนออกก็หายไปด้วย
 *
 * ⚠️ CSS ของเราไม่ข้ามเข้าไปข้างใน iframe และของเขาก็ออกมาไม่ได้
 *   iframe isolate สนิท ไม่ต้องกลัว custom CSS ของเว็บชนกับ customizer
 *   ที่ต้องคุมมีแค่ overlay กับปุ่ม
 */

/* ============================================================
   1) PDP button
   ============================================================ */

/**
 * Vertical rhythm around the button: price →(16px)→ button →(20px)→
 * divider. One base rule is enough — the button exists only when the
 * customizer is available, in both customize mode and dual-button mode.
 */
.tomtoc-customizer {
    margin: 16px 0 20px;
}

/**
 * Yellow full-width "ออกแบบ" button per Toey's mockup — replaces the old
 * white/black outline style.
 *
 * #FFB932 confirmed as the brand yellow — it is the dot color inside the
 * official 425 logo SVG (see LOGO_SRC in customizer.js).
 * Height/radius read off the mockup (48px / 8px) — verify with Toey's
 * Figma if she flags them.
 */
.tomtoc-customize-btn {
    display: inline-block;
    width: 100%;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #FFB932;
    color: #1A1A1A;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    cursor: pointer;
}

.tomtoc-customize-btn:hover {
    background: #F5A916;
    color: #1A1A1A;
}

/* ============================================================
   2) Customize mode — hides the standard purchase UI so the yellow
   button replaces it, per Toey's mockup.
   UI-hiding only: the real purchase block is the Quote::addProduct
   plugin (pending business sign-off).

   Condition lives ENTIRELY in CSS via :has(), keyed off the customize
   button div — the one thing proven to render (data-bc probe, 16 Sep).
   Every PHP body-class route failed on this codebase; the full story
   is in ViewModel/BodyClass.php's docblock:
     - observer on catalog_controller_product_view → PageConfig::
       addBodyClass() built the layout before initProductLayout(),
       product.info.main vanished silently
     - Page\Config as layout object argument → interpreter throws
       (ArgumentInterface required), block vanished
     - BodyClass wrapper → addBodyClass() confirmed called, but the
       class never reached <body>: this theme/Magento assembles body
       attributes BEFORE block output, not after

   :has() support: Chrome 105+ / Safari 15.4+ / Firefox 121+.
   Older browsers simply keep seeing add-to-cart — acceptable, since
   purchase is blocked server-side anyway once the plugin lands.
   ============================================================ */

/**
 * Hide qty + "เพิ่มลงถุง"/"ซื้อเลย" — but NOT the whole .box-tocart:
 * the wishlist/compare strip must stay, per the mockup.
 * (Verified on beta 16 Sep: qty/add-to-cart/buy-now gone, wishlist +
 * compare intact.)
 */
body:has([data-role=tomtoc-customizer]) .box-tocart .field.qty,
body:has([data-role=tomtoc-customizer]) .box-tocart .actions {
    display: none !important;
}

/**
 * Codazon sticky add-to-cart bar (appears on scroll) has its own buy
 * buttons — must be hidden in customize mode too.
 *
 * 🔴 VERIFY: selector below is a placeholder — never confirmed whether
 * the bar even appears on these PDPs. Find the real class by scrolling
 * the beta PDP until the bar shows, then in console:
 *   [...document.querySelectorAll('*')].filter(function (el) {
 *       return getComputedStyle(el).position === 'fixed'
 *           && el.querySelector('[class*="tocart"], button');
 *   }).map(function (el) { return el.className; })
 */
body:has([data-role=tomtoc-customizer]) .cz-sticky-addtocart,
body:has([data-role=tomtoc-customizer]) .sticky-tocart {
    display: none !important;
}

/**
 * "Shop at 425° Store" stock-checker (Vue widget) — not in Toey's mockup
 * for custom products. Store pickup makes no sense for made-to-order
 * items anyway.
 */
body:has([data-role=tomtoc-customizer]) .store-checker-wrapper {
    display: none !important;
}

/* ---------- 2b) Spacing around the hidden buy UI ---------- */

/**
 * Collapse the structural shell of the hidden buy UI so the button sits
 * snugly between price and divider instead of floating in dead space.
 */
body:has([data-role=tomtoc-customizer]) .product-add-form,
body:has([data-role=tomtoc-customizer]) .box-tocart {
    margin: 0 !important;
    padding: 0 !important;
}

/**
 * The ONE stubborn leftover (proven by toggling rules in DevTools,
 * 16 Sep): site custom styles (custom-styles…04.css ~line 4332) give
 * .box-tocart a 32px bottom margin via
 *   body.product-view-style-03 .product-info-main .box-tocart
 * which outranks the generic rule above (0,3,1 vs 0,2,1 — both
 * !important, higher specificity wins). Adding .product-add-form to the
 * path lands (0,4,1) and beats it outright.
 * NOTE: #qtybox-anchor's inline min-height turned out NOT to hold space
 * once this margin is gone — no override needed; don't add ones that
 * DevTools didn't prove.
 */
body:has([data-role=tomtoc-customizer]) #qtybox-anchor .box-tocart {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/**
 * Tighten the wishlist/compare/social strip. Outer wrapper only — the
 * theme nests two .product-social-links divs; squeezing both stacks the
 * reductions and lands too tight.
 */
body:has([data-role=tomtoc-customizer]) .product-info-main > .product-social-links {
    margin: 0 !important;
    padding: 12px 0 !important;
}

/* ============================================================
   3) Overlay
   ============================================================ */

/**
 * z-index 2147483000
 * WHY สูงขนาดนี้: ต้องชนะทั้ง sticky add-to-cart bar ของ Codazon (คลาส .active)
 * และ Fotorama fullscreen ซึ่งตั้ง z-index สูงมากเอง
 * ตัวเลขนี้ต่ำกว่า int32 max อยู่ 647 เผื่อให้ของที่ต้องอยู่บนสุดจริง ๆ ยังแทรกได้
 *
 * Full-viewport fixed + this z-index also satisfies the Figma "Don't"
 * rule: the 425 site navbar can never be visible while the overlay is open.
 */
.tomtoc-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483000;
    display: flex;
    flex-direction: column;
    background: #fff;
}

/**
 * Header bar per Toey's Figma (node 2035-107):
 * black, 56px, Back left + logo center, Sukhumvit Set 14px w600 white.
 * Font comes from the site's base font stack — not redeclared here.
 */
.tomtoc-overlay__bar {
    flex: 0 0 auto;
    height: 56px;
    background: #000;
    color: #fff;
}

/**
 * Inner wrapper max-width 1290px (desktop) — Figma note: keeps the Back
 * button from drifting to the far edge on screens wider than 1290px.
 * position:relative anchors the absolutely-centered logo.
 */
.tomtoc-overlay__bar-inner {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 16px;
}

/**
 * Back button per Figma: plain white text on the black bar — no pill.
 * !important is deliberate: the overlay is appended to <body>, so
 * Codazon's global button styling (white bg, uppercase, borders)
 * outranks a single class here. Covers hover/active/focus so the
 * pill can't come back on interaction.
 */
.tomtoc-overlay__back,
.tomtoc-overlay__back:hover,
.tomtoc-overlay__back:active,
.tomtoc-overlay__back:focus {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    margin: 0 0 0 -8px;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1;
    text-transform: none !important;
    letter-spacing: 0;
    cursor: pointer;
}

.tomtoc-overlay__back-icon {
    font-size: 12px;
    line-height: 1;
}

/**
 * Logo centered against the full bar width (not flex-centered) so it
 * stays put regardless of the Back button's rendered width.
 * Source is the official white 425 SVG (data URI in customizer.js) —
 * no invert() filter, so the dot stays its real color (#FFB932).
 * The 120x72 viewBox carries built-in padding: 44px box renders the
 * mark itself ~28px tall.
 */
.tomtoc-overlay__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 44px;
    width: auto;
}

/**
 * min-height: 0 บน flex child
 * WHY: flex item ที่มี iframe ข้างในจะไม่ยอมหดต่ำกว่า content ถ้าไม่ตั้งค่านี้
 * อาการคือ iframe ล้นออกนอกจอบนมือถือ แถบหัวหายไปด้านบน ปิดไม่ได้
 */
.tomtoc-overlay__body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

.tomtoc-overlay__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.tomtoc-overlay__loader {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #6b6b76;
    font-size: 13px;
}

/**
 * ล็อก scroll หน้าหลัก
 * WHY position:fixed ไม่ใช่ overflow:hidden
 *   iOS Safari ไม่สนใจ overflow:hidden บน body หน้าหลังยังเลื่อนได้
 *   JS เก็บ scrollY ไว้ใน top แล้วคืนตอนปิด (ดู lockScroll/unlockScroll)
 */
body.tomtoc-modal-open {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

/* ============================================================
   4) โหมด "กำลังบันทึกดีไซน์"
   ครอบทับพื้นที่ iframe ระหว่างรอ server เรียก record-details แล้ว redirect
   ============================================================ */

.tomtoc-overlay__saving {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: #fff;
    /* กันกดโดนอะไรที่อยู่ข้างใต้ระหว่างรอ */
    z-index: 2;
}

.tomtoc-overlay.-saving .tomtoc-overlay__saving {
    display: flex;
}

/* Hide the Back button while saving — close() is already blocked in JS,
   but a visible-yet-dead button reads as "the site froze". */
.tomtoc-overlay.-saving .tomtoc-overlay__back,
.tomtoc-overlay.-saving .tomtoc-overlay__loader {
    display: none;
}

.tomtoc-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0, 0, 0, .12);
    border-top-color: #333;
    border-radius: 50%;
    animation: tomtoc-spin .8s linear infinite;
}

@keyframes tomtoc-spin {
    to {
        transform: rotate(360deg);
    }
}

/* เคารพ prefers-reduced-motion แต่ไม่หยุดหมุนสนิท
   ไม่งั้นจะกลายเป็นวงกลมนิ่ง ๆ ซึ่งดูเหมือนเว็บค้างมากกว่าเดิม */
@media (prefers-reduced-motion: reduce) {
    .tomtoc-spinner {
        animation-duration: 2.5s;
    }
}

.tomtoc-saving__text {
    margin: 0;
    font-size: 14px;
    color: #555;
    text-align: center;
    padding: 0 24px;
}

/**
 * #qtybox-anchor carries an inline min-height (~116px) set by theme JS
 * to reserve space for the qty box we hide — it DOES hold empty space on
 * real page load (the earlier DevTools toggle test was misleading: by
 * then layout had already settled). Inline style loses to a stylesheet
 * !important per the cascade, so this wins.
 */
body:has([data-role=tomtoc-customizer]) #qtybox-anchor {
    min-height: 0 !important;
}