/* ==========================================================================
   Golden Touch Vapor Studio — auth, account, wishlist and content pages.
   Mobile-first: single column by default, wider layouts at min-width breakpoints.
   Builds on the shared blocks in storefront.css (.card, .form-*, .badge, ...).
   ========================================================================== */

/* ---------- Forms (shared by auth, account, contact) ----------------------- */
.form-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.form-label-row .form-label { margin-bottom: 7px; }
.form-optional { font-weight: 400; color: var(--color-text-muted); font-size: 12.5px; }
.form-label-aside { font-size: 13px; white-space: nowrap; }
.form-control[aria-invalid="true"] { border-color: var(--color-danger); }

/* ---------- Auth -------------------------------------------------------------- */
.auth-shell { width: min(460px, 100%); display: grid; gap: 16px; }
.auth-shell .alert { margin-bottom: 0; }
.auth-card .btn-lg { margin-top: 4px; }
.auth-legal { font-size: 13px; color: var(--color-text-secondary); margin: 4px 0 18px; line-height: 1.55; }
.auth-perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; font-size: 13px; color: var(--color-text-secondary); }
.auth-perks li { display: inline-flex; align-items: center; gap: 7px; }
.auth-perks .icon { color: var(--color-primary); }

/* ---------- Account shell ------------------------------------------------------ */
.account-main { min-width: 0; display: grid; gap: 22px; align-content: start; }
.account-main > .alert { margin-bottom: 0; }
.account-section { min-width: 0; }
.account-section .card-title { display: flex; align-items: center; gap: 8px; }
.account-section .card-title .icon { color: var(--color-primary); }
.account-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.account-section-head .card-title { margin-bottom: 0; }
.account-section-head .section-link { margin-inline-end: 0; }
.account-form .btn { width: 100%; }
.account-nav form { margin: 0; }

.stat-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.stat-card { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); }
.stat-card:hover { border-color: var(--color-primary-light); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.stat-icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--color-ivory); color: var(--color-primary); flex-shrink: 0; }
.stat-body { display: grid; line-height: 1.25; }
.stat-body strong { font-family: var(--font-heading); font-size: 26px; font-weight: 700; }
.stat-body span { font-size: 13px; color: var(--color-text-secondary); }

.order-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main badge" "main total"; align-items: center; gap: 4px 14px; padding: 14px 4px; border-top: 1px solid var(--color-border); transition: background .2s; }
.order-row:first-of-type { border-top: 0; }
.order-row:hover { background: #FCFBF9; }
.order-row-main { grid-area: main; display: grid; gap: 2px; min-width: 0; }
.order-row-main .text-muted { font-size: 13px; }
.order-row .badge { grid-area: badge; justify-self: end; }
.order-row-total { grid-area: total; justify-self: end; font-weight: 600; font-size: 14px; }
.order-row-arrow { display: none; color: var(--color-text-muted); }

.account-empty { text-align: center; padding: 22px 10px 8px; color: var(--color-text-secondary); }
.account-empty .icon { color: var(--color-primary); margin: 0 auto 8px; display: block; }
.account-empty p { margin-bottom: 14px; }

.quick-links { display: grid; grid-template-columns: 1fr; gap: 12px; }
.quick-link { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: border-color .2s, color .2s; }
.quick-link:hover { border-color: var(--color-primary-light); color: var(--color-primary-dark); }
.quick-link > .icon { color: var(--color-primary); }
.quick-link span { display: grid; line-height: 1.3; }
.quick-link strong { font-size: 14.5px; font-weight: 600; }
.quick-link small { font-size: 12.5px; color: var(--color-text-muted); }

/* Orders table: labelled cards on phones (base), a real table from 640px */
.table-wrap:has(.table-stack) { border: 0; background: transparent; overflow: visible; }
.table-stack { min-width: 0; }
.table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
.table-stack tr { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 6px 16px; margin-bottom: 12px; }
.table-stack td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--color-border); text-align: end; }
.table-stack tr td:last-child { border-bottom: 0; }
.table-stack td[data-label]::before { content: attr(data-label); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); font-weight: 600; text-align: start; }
.table-stack .table-action { justify-content: stretch; }
.table-stack .table-action .btn { width: 100%; }
@media (min-width: 640px) {
    .table-wrap:has(.table-stack) { border: 1px solid var(--color-border); background: #fff; overflow-x: auto; }
    .table-stack { display: table; min-width: 560px; }
    .table-stack thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
    .table-stack tbody { display: table-row-group; }
    .table-stack tr { display: table-row; background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
    .table-stack td { display: table-cell; width: auto; padding: 14px 16px; text-align: start; border-bottom: 1px solid var(--color-border); }
    .table-stack tr td:last-child { border-bottom: 1px solid var(--color-border); }
    .table-stack tr:last-child td { border-bottom: 0; }
    .table-stack td[data-label]::before { content: none; }
    .table-stack .table-action { text-align: end; }
    .table-stack .table-action .btn { width: auto; }
}

/* ---------- Order detail ---------------------------------------------------- */
.order-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.order-hero .badge { font-size: 13px; padding: 5px 14px; }

.order-tracker { display: grid; gap: 0; counter-reset: step; }
.tracker-step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 0; color: var(--color-text-muted); }
.tracker-step + .tracker-step::before { content: ""; position: absolute; inset-inline-start: 15px; top: -12px; height: 24px; width: 2px; background: var(--color-border); }
.tracker-step.is-done + .tracker-step::before { background: var(--color-primary); }
.tracker-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; background: #fff; border: 2px solid var(--color-border-strong); color: var(--color-text-muted); position: relative; z-index: 1; }
.tracker-label { font-size: 14px; font-weight: 500; }
.tracker-date { font-size: 12.5px; color: var(--color-text-muted); }
.tracker-step.is-done { color: var(--color-text); }
.tracker-step.is-done .tracker-dot { background: var(--gold-gradient); border-color: transparent; color: #fff; }
.tracker-step.is-current { color: var(--color-text); }
.tracker-step.is-current .tracker-label { font-weight: 700; }
.tracker-step.is-current .tracker-dot { border-color: var(--color-primary); color: var(--color-primary-dark); box-shadow: 0 0 0 5px rgba(184, 138, 53, .14); }
.tracker-step.is-skipped { opacity: .5; }
.tracker-step.is-skipped .tracker-label { text-decoration: line-through; }
.tracker-step.is-final .tracker-label { font-weight: 700; }
.tracker-step.is-final.is-cancelled { color: var(--color-danger); }
.tracker-step.is-final.is-cancelled .tracker-dot { background: var(--color-danger); border-color: transparent; color: #fff; }
.tracker-step.is-final.is-refunded { color: var(--color-text-secondary); }
.tracker-step.is-final.is-refunded .tracker-dot { background: var(--color-text-secondary); border-color: transparent; color: #fff; }
.order-tracker.is-delivered .tracker-step:last-child .tracker-dot { background: var(--color-success); }

.order-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.order-grid-main, .order-grid-side { display: grid; gap: 22px; min-width: 0; }

.order-items { display: grid; }
.order-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--color-border); }
.order-item:first-child { border-top: 0; padding-top: 0; }
.order-item img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; border: 1px solid var(--color-border); background: #fff; padding: 4px; }
.order-item h3 { font-family: var(--font-body); font-size: 14.5px; font-weight: 600; margin: 0 0 3px; line-height: 1.35; }
.order-item h3 a:hover { color: var(--color-primary-dark); }
.order-item-meta { font-size: 12.5px; color: var(--color-text-muted); }
.order-item-total { font-weight: 600; font-size: 14.5px; white-space: nowrap; }

.order-totals { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--color-border); display: grid; gap: 9px; }
.order-totals > div, .order-facts > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.order-totals dt { color: var(--color-text-secondary); display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.order-totals dd, .order-facts dd { margin: 0; font-weight: 600; text-align: end; }
.order-totals .is-discount dd { color: var(--color-success); }
.order-totals .is-total { margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--color-border-strong); }
.order-totals .is-total dt { color: var(--color-text); font-weight: 600; font-size: 15px; }
.order-totals .is-total dd { font-family: var(--font-heading); font-size: 21px; color: var(--color-primary-dark); }

.order-facts { margin: 0; display: grid; gap: 12px; }
.order-facts dt { color: var(--color-text-secondary); font-size: 14px; }
.tracking-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; background: var(--color-ivory); padding: 3px 8px; border-radius: 6px; word-break: break-all; }
.order-address { font-style: normal; line-height: 1.7; font-size: 14px; overflow-wrap: anywhere; }
.order-notes { margin: 12px 0 0; font-size: 13.5px; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.order-side-note { margin: 0; font-size: 14px; }
.order-help { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius-md); background: var(--color-ivory); font-size: 14px; }
.order-help .icon { color: var(--color-primary); }
.order-help p { margin: 0; }

.timeline { display: grid; gap: 0; }
.timeline-item { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 14px; padding-bottom: 18px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 6px; top: 16px; bottom: 0; width: 2px; background: var(--color-border); }
.timeline-dot { width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; background: var(--color-primary); box-shadow: 0 0 0 4px rgba(184, 138, 53, .14); }
.timeline-item.is-success .timeline-dot { background: var(--color-success); box-shadow: 0 0 0 4px rgba(35, 132, 91, .14); }
.timeline-item.is-danger .timeline-dot { background: var(--color-danger); box-shadow: 0 0 0 4px rgba(217, 54, 54, .14); }
.timeline-item.is-muted .timeline-dot { background: var(--color-text-muted); box-shadow: 0 0 0 4px rgba(0, 0, 0, .05); }
.timeline-text { font-weight: 600; font-size: 14px; }
.timeline-note { font-size: 13.5px; color: var(--color-text-secondary); margin-top: 2px; overflow-wrap: anywhere; }
.timeline-date { display: block; font-size: 12.5px; color: var(--color-text-muted); margin-top: 2px; }

/* ---------- Wishlist ----------------------------------------------------------- */
.wishlist-page [hidden] { display: none !important; }
.wishlist-note { margin-bottom: 0; }
.wishlist-note .icon { color: var(--color-primary); }

/* ---------- CMS / content pages ------------------------------------------------- */
.page-updated { font-size: 13px; }
.content-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.content-main { min-width: 0; }
.content-card { max-width: none; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 22px 20px; }
.content-card > :first-child { margin-top: 0; }
.content-card > :last-child { margin-bottom: 0; }
.content-aside { display: grid; gap: 18px; }
.content-aside-title { font-size: 16px; margin-bottom: 10px; }
.content-nav { padding: 18px 12px 10px; }
.content-nav .content-aside-title { padding: 0 10px; }
.content-nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; border-radius: 10px; font-size: 14px; color: var(--color-text-secondary); transition: background .2s, color .2s; }
.content-nav a:hover, .content-nav a.is-active { background: var(--color-ivory); color: var(--color-primary-dark); }
.content-nav a.is-active { font-weight: 600; }
.content-nav .icon { opacity: .5; }
.content-help { text-align: center; }
.content-help-icon { width: 48px; height: 48px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: var(--color-ivory); color: var(--color-primary); }
.content-help p { font-size: 14px; color: var(--color-text-secondary); }

/* FAQ accordion */
.faq-intro { margin-bottom: 20px; }
.faq-list { display: grid; gap: 12px; }
.faq-item { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: border-color .2s, box-shadow .2s; }
.faq-item[open] { border-color: var(--color-primary-light); box-shadow: var(--shadow-soft); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; cursor: pointer; list-style: none; font-family: var(--font-heading); font-weight: 600; font-size: 15px; line-height: 1.35; border-radius: var(--radius-md); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--color-primary-dark); }
.faq-icon { color: var(--color-primary); transition: transform .25s var(--ease); }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-answer { padding: 0 16px 16px; max-width: none; font-size: 15px; }
.faq-answer > :last-child { margin-bottom: 0; }

/* ---------- Contact ------------------------------------------------------------ */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.contact-required-note { margin: -8px 0 18px; }
.contact-submit { width: 100%; }
.contact-aside { display: grid; gap: 18px; }
.contact-list { display: grid; gap: 16px; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 14.5px; overflow-wrap: anywhere; }
.contact-list small { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); font-weight: 600; margin-bottom: 2px; }
.contact-list a { font-weight: 600; }
.contact-list a:hover { color: var(--color-primary-dark); }
.contact-icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--color-ivory); color: var(--color-primary); flex-shrink: 0; }
.contact-faq p { font-size: 14px; color: var(--color-text-secondary); }
.contact-links { display: grid; gap: 8px; margin-bottom: 16px; font-size: 14px; }
.hp-field { position: absolute !important; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Wider screens ---------------------------------------------------------- */
@media (min-width: 576px) {
    .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stat-card { flex-direction: column; align-items: flex-start; gap: 12px; }
    .quick-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .order-row { grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "main badge total arrow"; padding: 14px 6px; }
    .order-row-total { min-width: 90px; text-align: end; }
    .order-row-arrow { display: block; grid-area: arrow; }
    .order-item { grid-template-columns: 72px minmax(0, 1fr) auto; }
    .order-item img { width: 72px; height: 72px; }
    .content-card { padding: 30px 32px; }
    .contact-submit { width: auto; }
    .account-form .btn { width: auto; min-width: 170px; }
    .faq-item summary { padding: 18px 20px; font-size: 16px; }
    .faq-answer { padding: 0 20px 18px; }
}

@media (min-width: 768px) {
    .stat-card { flex-direction: row; align-items: center; }
    /* Horizontal tracker */
    .order-tracker { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .tracker-step { grid-template-columns: none; justify-items: center; text-align: center; gap: 8px; padding: 0 4px; align-content: start; }
    .tracker-step + .tracker-step::before { inset-inline-start: calc(-50% + 20px); inset-inline-end: calc(50% + 20px); top: 15px; width: auto; height: 2px; }
}

@media (min-width: 992px) {
    .content-layout { grid-template-columns: minmax(0, 1fr) 290px; gap: 32px; }
    .content-aside { position: sticky; top: 130px; }
    .contact-layout { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 28px; }
}

@media (min-width: 1200px) {
    .order-grid { grid-template-columns: minmax(0, 1fr) 320px; }
    .quick-links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}