/* =====================================================================================================
   Tailo v2.7 · organic design system for the customer shop (every page in shop/).
   Load LAST, after tailo-organic.css. It restyles the shared parts of shop.css + tailo-theme.css:
   header, buttons, fields, cards, chips, badges, page titles, designs grid, design page, cart, checkout,
   orders, account, sign-in, empty states, pager and footer.
   Language: pebble-round shapes, cream glass on an oat page, moss + forest greens, ochre for the
   one action that matters on a screen, sage for success, terracotta for problems.
   Fraunces for headings, Nunito for reading. Only classes change; no page logic is touched.
   ===================================================================================================== */
:root {
    --og-surface: color-mix(in srgb, #fffdf8 82%, transparent);
    --og-surface-solid: #fffdf8;
    --og-sunk: color-mix(in srgb, var(--hv-mid) 6%, #fffdf8);
    --og-edge: color-mix(in srgb, var(--hv-mid) 13%, transparent);
    --og-edge-2: color-mix(in srgb, var(--hv-mid) 24%, transparent);
    --og-ring: 0 0 0 4px color-mix(in srgb, var(--hv-gold) 26%, transparent);
    --og-shadow: 0 1px 2px rgba(42, 43, 34, .05), 0 14px 34px -18px rgba(31, 43, 28, .35);
    --og-shadow-hi: 0 2px 4px rgba(42, 43, 34, .06), 0 22px 44px -18px rgba(31, 43, 28, .45);
    --og-r: 22px;
    --og-r-sm: 14px;
    --og-moss-grad: linear-gradient(160deg, #4a6140, var(--hv-mid) 55%, #2f3f29);
    --og-ochre-grad: linear-gradient(150deg, #d2a160, var(--hv-gold) 55%, #9d6f30);
    --og-sage-grad: linear-gradient(150deg, #7a9a63, var(--hv-leaf) 60%, #4b673a);
    /* hand-drawn vine under page titles */
    --og-vine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M2 9c18-8 34 6 52-1s34-7 64 0' fill='none' stroke='%23b9853f' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M58 7c3-5 9-6 12-4-2 4-8 6-12 4Z' fill='%235a7a46'/%3E%3C/svg%3E");
}

body { color: var(--hv-ink); -webkit-font-smoothing: antialiased; }
::selection { background: color-mix(in srgb, var(--hv-gold) 35%, transparent); }
a { color: var(--bz-sky); }
a:hover { color: var(--hv-mid); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--hv-gold) 70%, transparent); outline-offset: 2px; }
h1, h2, h3 { color: var(--hv-ink); }

/* ------------------------------------------------------------------ header */
.site-header .logo, .site-header .logo b { font-family: var(--hv-display); letter-spacing: -.01em; }
.site-header .head-search, .site-header .hero-search {
    background: color-mix(in srgb, #fffdf8 94%, transparent) !important; border: 1px solid color-mix(in srgb, #fff 60%, transparent) !important;
    border-radius: 999px !important; box-shadow: inset 0 1px 0 #fff, 0 8px 20px -12px rgba(0, 0, 0, .5);
}
.site-header .head-search select { border-radius: 999px !important; background: var(--og-sunk) !important; }
.site-header .head-search button, .site-header .head-search .btn { border-radius: 999px !important; background: var(--og-ochre-grad) !important; color: #fff !important; }
.main-nav a { border-radius: 999px; text-decoration: none !important; transition: background .15s, color .15s; }
.main-nav a:hover { background: color-mix(in srgb, #fff 12%, transparent); }
.main-nav a.active { background: color-mix(in srgb, #fff 16%, transparent); box-shadow: inset 0 -2px 0 var(--hv-gold); }
.mode-switch button, .mode-switch a { border-radius: 999px !important; }
.loc-strip, .site-bar { background: color-mix(in srgb, var(--hv-gold) 13%, var(--bz-page)) !important; color: var(--hv-ink2) !important; border-bottom: 1px solid var(--og-edge) !important; }

/* ------------------------------------------------------------------ buttons */
.btn, .btn-primary, .btn-gold, .btn-ghost, .btn-light, .btn-danger-ghost, .quick-add, button.btn[type="submit"] {
    border-radius: 999px !important; font-family: var(--hv-font) !important; font-weight: 800 !important; letter-spacing: .01em;
    transition: transform .12s ease, box-shadow .18s ease, background .18s ease, color .18s ease !important;
}
.btn-primary, .btn.pri, .btn.primary, button.btn[type="submit"] {
    background: var(--og-moss-grad) !important; border: 1px solid color-mix(in srgb, #fff 14%, transparent) !important; color: #fff !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 25%, transparent), 0 10px 22px -12px color-mix(in srgb, var(--hv-deep) 80%, transparent) !important;
}
.btn-primary:hover:not(:disabled), button.btn[type="submit"]:hover:not(:disabled) { transform: translateY(-1px); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 25%, transparent), 0 14px 26px -12px var(--hv-deep) !important; }
.btn-gold, .quick-add {
    background: var(--og-ochre-grad) !important; color: #fff !important; border: 1px solid color-mix(in srgb, #fff 20%, transparent) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent), 0 10px 22px -12px color-mix(in srgb, var(--hv-gold) 90%, transparent) !important;
}
.btn-gold:hover:not(:disabled), .quick-add:hover { transform: translateY(-1px); filter: saturate(1.1); }
.quick-add.done, [data-act="place"] { background: var(--og-sage-grad) !important; border-color: transparent !important; color: #fff !important; }
.btn-ghost, .btn-light, .btn-secondary {
    background: var(--og-surface) !important; color: var(--hv-mid) !important; border: 1.5px solid var(--og-edge-2) !important;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.btn-ghost:hover:not(:disabled), .btn-light:hover:not(:disabled) { background: var(--og-sunk) !important; border-color: var(--hv-mid) !important; }
.btn-danger-ghost { border-radius: 999px !important; color: var(--bz-bad) !important; border-color: color-mix(in srgb, var(--bz-bad) 35%, transparent) !important; }
.btn:active, .btn-primary:active, .btn-gold:active, .quick-add:active { transform: scale(.98) !important; }
.stepper { background: var(--og-sage-grad) !important; border-radius: 999px !important; }
.icon-btn, .heart { border-radius: 999px !important; }
.heart { background: color-mix(in srgb, #fffdf8 80%, transparent) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid color-mix(in srgb, #fff 70%, transparent) !important; }
.heart.on, .heart[aria-pressed="true"] { color: var(--bz-bad) !important; }
.link-btn { color: var(--bz-sky) !important; font-weight: 700; }

/* ------------------------------------------------------------------ fields */
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=search], input[type=date], input[type=time], select, textarea {
    background: var(--og-surface-solid) !important; border: 1.5px solid var(--og-edge-2) !important; border-radius: var(--og-r-sm) !important;
    color: var(--hv-ink) !important; font-family: var(--hv-font) !important; transition: border-color .15s, box-shadow .15s;
}
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--hv-mid) 40%, transparent) !important; }
input:focus, select:focus, textarea:focus { border-color: var(--hv-gold) !important; box-shadow: var(--og-ring) !important; outline: none; }
input.invalid, textarea.invalid { border-color: var(--bz-bad) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--bz-bad) 16%, transparent) !important; }
.field label, .label { color: var(--hv-ink2) !important; font-weight: 700 !important; }
.field-hint { color: var(--hv-ink3); }
.field-error { color: var(--bz-bad) !important; font-weight: 600; }
input[type=checkbox], input[type=radio] { accent-color: var(--hv-leaf); }
.hv-search input, .ts-search input, .head-search input, .hero-search input { border: 0 !important; box-shadow: none !important; background: transparent !important; }

/* ------------------------------------------------------------------ surfaces: cards, panels, boxes */
.card, .panel, .filters, .summary, .cx-side, .order-card, .addr-card, .pcard, .tailor-card, .auth-box, .fee-box, .del-box, .eta-box, .success-box, .preorder-box, .measure-panel, .rev-block, .review-form {
    background: var(--og-surface) !important; border: 1px solid var(--og-edge) !important; border-radius: var(--og-r) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 75%, transparent), var(--og-shadow) !important;
    -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
}
.filters h3, .summary h3, .card-title { font-family: var(--hv-display); letter-spacing: -.01em; }
.alert, .note, .trust-note, .good-note, .near-note, .results-note { border-radius: var(--og-r-sm) !important; }

/* page titles with a little vine underneath */
.page-head { border-bottom: 0 !important; position: relative; }
.page-head h1 { font-family: var(--hv-display) !important; font-weight: 650; letter-spacing: -.02em; }
.page-head h1::after { content: ''; display: block; width: 120px; height: 14px; margin-top: 6px; background: var(--og-vine) no-repeat left center / contain; }
.page-head p { color: var(--hv-ink2) !important; }
.section-head h2 { font-family: var(--hv-display) !important; font-weight: 650; }
.eyebrow { color: var(--bz-marigold-deep) !important; letter-spacing: .08em; }
.breadcrumb a { color: var(--hv-ink3); } .breadcrumb a:hover { color: var(--hv-mid); }

/* chips, badges, pills */
.chip, .achip, .fopt, .tab, .legal-tabs a, .tabs button {
    border-radius: 999px !important; border: 1px solid var(--og-edge-2) !important; background: var(--og-surface) !important;
    color: var(--hv-ink2) !important; font-weight: 700 !important; box-shadow: inset 0 1px 0 #fff;
}
.chip:hover, .achip:hover, .fopt:hover { border-color: var(--hv-mid) !important; color: var(--hv-mid) !important; }
.chip.active, .achip.active, .fopt.active, .fopt.on, .tab.active, .tabs button[aria-selected="true"] { background: var(--og-moss-grad) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 8px 18px -10px var(--hv-deep); }
.badge { border-radius: 999px !important; font-weight: 700 !important; background: color-mix(in srgb, var(--hv-mid) 9%, transparent) !important; color: var(--hv-mid) !important; }
.badge.ok { background: color-mix(in srgb, var(--hv-leaf) 15%, transparent) !important; color: #3f5a30 !important; }
.badge.gold { background: color-mix(in srgb, var(--hv-gold) 18%, transparent) !important; color: #7a5420 !important; }
.badge.warn { background: var(--bz-warn-soft) !important; color: var(--bz-warn) !important; }
.status-pill { border-radius: 999px !important; font-weight: 800 !important; }
.rating-badge, .stars { color: var(--hv-leaf) !important; }
.gtag, .soon-tag, .m-pill { border-radius: 999px !important; }

/* ------------------------------------------------------------------ designs grid (services, wishlist, fabrics) */
.grid-services { gap: clamp(14px, 2vw, 22px) !important; }
.service-card {
    padding: 10px !important; border-radius: 24px !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
}
.service-card:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 #fff, var(--og-shadow-hi) !important; }
.service-card:hover .card-title { text-decoration: none !important; color: var(--hv-mid); }
.service-card .thumb { border-radius: 18px !important; }
.service-card .card-title { font-family: var(--hv-font) !important; font-weight: 800; }
.price, .big-price, .fprice { font-family: var(--hv-display) !important; color: var(--hv-ink) !important; font-weight: 650 !important; }
.price small, .big-price small { font-family: var(--hv-font) !important; }
.card-avail, .avail-ok { color: var(--hv-leaf) !important; }
.avail-busy { color: var(--bz-warn) !important; } .avail-closed { color: var(--bz-bad) !important; }
.thumb, .photo-tile, .sample-photo { border-radius: 18px !important; }

/* tailor cards (tailors page) */
.tailor-card { transition: transform .2s ease, box-shadow .2s ease !important; }
.tailor-card:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 #fff, var(--og-shadow-hi) !important; }
.tailor-card:hover h3 { text-decoration: none !important; color: var(--hv-mid); }
.tailor-card h3, .tailor-hero h1 { font-family: var(--hv-display) !important; font-weight: 650; }
.tailor-avatar, .avatar, .mini-logo { border-radius: 16px !important; background: var(--og-moss-grad) !important; color: var(--gl-gold-hi, #dcae6a) !important; }

/* filters sidebar + results bar */
.results-bar { border-bottom: 1px solid var(--og-edge) !important; }
.fgroup + .fgroup { border-top: 1px dashed var(--og-edge-2) !important; }
.filter-toggle, .fab-filters { border-radius: 999px !important; }
.fab-sheet, .tm-sheet, .tm-modal, .fab-modal { border-radius: 28px 28px 0 0 !important; background: var(--og-surface-solid) !important; }

/* ------------------------------------------------------------------ design page */
.detail-img { border-radius: 32px !important; border: 1px solid var(--og-edge) !important; box-shadow: var(--og-shadow-hi); }
.detail h1 { font-family: var(--hv-display) !important; font-weight: 650; }
.buy-box {
    background: linear-gradient(150deg, color-mix(in srgb, var(--hv-gold) 10%, #fffdf8), color-mix(in srgb, var(--hv-leaf) 9%, #fffdf8)) !important;
    border: 1px solid var(--og-edge) !important; border-radius: 26px !important; box-shadow: inset 0 1px 0 #fff, var(--og-shadow);
}
.qty { border-radius: 999px !important; border: 1.5px solid var(--og-edge-2) !important; background: var(--og-surface-solid) !important; overflow: hidden; }
.qty button { color: var(--hv-mid) !important; }
.fact, .o-fact { border-radius: 16px !important; background: var(--og-sunk) !important; border: 1px solid var(--og-edge) !important; }
.mini-tailor { border-radius: 20px !important; background: var(--og-surface) !important; border: 1px solid var(--og-edge) !important; }
.review { border-bottom-color: var(--og-edge) !important; }
.swatch { border-radius: 14px !important; }
.size-grid button, .choice, .pay-opt, .type-card, .profile-pick, .slot-grid button {
    border-radius: 18px !important; border: 1.5px solid var(--og-edge-2) !important; background: var(--og-surface-solid) !important; transition: border-color .15s, box-shadow .15s;
}
.size-grid button[aria-pressed="true"], .choice.active, .choice.on, .choice:has(input:checked), .pay-opt:has(input:checked), .pay-opt.active, .type-card.active, .slot-grid button.active, .slot-grid button[aria-pressed="true"] {
    border-color: var(--hv-leaf) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--hv-leaf) 20%, transparent) !important;
    background: color-mix(in srgb, var(--hv-leaf) 7%, #fffdf8) !important;
}

/* ------------------------------------------------------------------ cart + checkout */
.cart-line { border-bottom: 1px dashed var(--og-edge-2) !important; }
.cart-line .thumb { border-radius: 18px !important; }
.cart-line h3 { font-family: var(--hv-font) !important; font-weight: 800; }
.sum-row { border-color: var(--og-edge) !important; }
.sum-row.total, .oc-total { font-family: var(--hv-display); }
.cx-progress, .steps-bar { border-radius: 999px !important; }
.cx-progress .step, .t-step { color: var(--hv-ink3) !important; }
.cx-progress .step.active, .cx-progress .step.done, .t-step.done, .t-step.active { color: var(--hv-mid) !important; }
.cx-progress .step.active::before, .cx-progress .step.done::before, .t-dot.done, .t-dot.active { background: var(--og-sage-grad) !important; border-color: transparent !important; color: #fff !important; }
.cx-title { font-family: var(--hv-display) !important; font-weight: 650; }

/* ------------------------------------------------------------------ orders + tracking */
.oc, .order-card { border-radius: var(--og-r) !important; }
.oc-title, .order-head h3 { font-family: var(--hv-display) !important; font-weight: 650; }
.tracker, .track { border-radius: 20px !important; }
.live-dot { background: var(--hv-leaf) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--hv-leaf) 22%, transparent); }

/* ------------------------------------------------------------------ sign in / register */
.auth-wrap { background: transparent !important; }
.auth-art {
    background:
        radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, var(--hv-gold) 40%, transparent), transparent 65%),
        radial-gradient(60% 70% at 0% 100%, color-mix(in srgb, var(--hv-leaf) 60%, transparent), transparent 62%),
        var(--hv-deep) !important;
}
.auth-art::before { background: color-mix(in srgb, var(--hv-mid) 80%, transparent) !important; filter: blur(2px); }
.auth-art h2 { font-family: var(--hv-display) !important; font-weight: 600; }
.auth-box h1, .auth-box h2 { font-family: var(--hv-display) !important; font-weight: 650; }
.otp-input input, .code-box input { border-radius: 16px !important; }

/* ------------------------------------------------------------------ empty states, skeletons, pager, toast */
.empty {
    background: var(--og-surface) !important; border: 1.5px dashed var(--og-edge-2) !important; border-radius: 28px !important;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.empty::before {   /* a small leaf above every empty state */
    content: ''; display: block; width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 50% 0;
    background: var(--og-sage-grad); transform: rotate(45deg); opacity: .85;
    box-shadow: 0 10px 20px -10px var(--hv-leaf);
}
.empty h3 { font-family: var(--hv-display) !important; font-weight: 650; }
.skeleton { background: color-mix(in srgb, var(--hv-mid) 8%, transparent) !important; border-radius: 18px !important; }
.pagination a, .pagination button, .pagination span { border-radius: 999px !important; border-color: var(--og-edge-2) !important; }
.pagination .active, .pagination [aria-current="page"] { background: var(--og-moss-grad) !important; color: #fff !important; border-color: transparent !important; }

/* ------------------------------------------------------------------ footer */
.site-footer {
    position: relative; margin-top: 56px; border-top: 0 !important; color: color-mix(in srgb, #fff 82%, transparent) !important;
    background:
        radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--hv-gold) 22%, transparent), transparent 60%),
        var(--hv-deep) !important;
}
.site-footer::before {   /* soft hill-line edge */
    content: ''; position: absolute; left: 0; right: 0; top: -28px; height: 30px; pointer-events: none;
    background: radial-gradient(60% 100% at 50% 100%, var(--hv-deep) 98%, transparent 100%);
}
.site-footer h3, .site-footer h4, .site-footer .logo { color: #fff !important; font-family: var(--hv-display); }
.site-footer a, .site-footer .flink { color: color-mix(in srgb, #fff 78%, transparent) !important; }
.site-footer a:hover { color: var(--gl-gold-hi, #dcae6a) !important; }
.footer-bottom { border-top-color: color-mix(in srgb, #fff 14%, transparent) !important; color: color-mix(in srgb, #fff 60%, transparent) !important; }
@media (max-width: 760px) { .site-footer { margin-bottom: 0; padding-bottom: 110px; } }

/* ------------------------------------------------------------------ motion */
.grid-services > *, .grid-tailors > *, .order-card, .cart-line { animation: ogIn .4s ease both; }
.grid-services > *:nth-child(2), .grid-tailors > *:nth-child(2) { animation-delay: .04s; }
.grid-services > *:nth-child(3), .grid-tailors > *:nth-child(3) { animation-delay: .08s; }
.grid-services > *:nth-child(4), .grid-tailors > *:nth-child(4) { animation-delay: .12s; }
@keyframes ogIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .grid-services > *, .grid-tailors > *, .order-card, .cart-line { animation: none; }
    .service-card, .tailor-card, .btn, .btn-primary, .btn-gold { transition: none !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .card, .panel, .filters, .summary, .order-card, .tailor-card, .auth-box, .empty { background: var(--og-surface-solid) !important; }
}

/* gender tags in earthy tones, frosted over the photo */
.gtag { background: color-mix(in srgb, #fffdf8 85%, transparent) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid color-mix(in srgb, #fff 70%, transparent); box-shadow: none !important; }
.gtag.g-female { color: #8a4a2c !important; }      /* clay */
.gtag.g-male { color: #3f5a30 !important; }        /* moss */
.gtag.g-unisex { color: #6b5a3e !important; }      /* bark */

/* headings that pages focus for screen readers should not show a ring */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none !important; box-shadow: none !important; }

/* a smaller help button on phones so it hides less of the page */
@media (max-width: 760px) {
    .tsup-fab { padding: 8px 13px !important; font-size: 13px !important; right: 12px !important; }
}