/* TANYARAT — contemporary botanical storefront, layered over the existing UI. */
:root {
    --ty-espresso: #183e35;
    --ty-espresso-2: #245044;
    --ty-cocoa: #36594b;
    --ty-gold: #577548;
    --ty-gold-2: #c3d29b;
    --ty-gold-soft: #e5ecd7;
    --ty-cream: #f8f9f3;
    --ty-cream-2: #eff2e8;
    --ty-sand: #dbe2d5;
    --ty-ink: #203d33;
    --ty-muted: #647267;
    --ty-grad-gold: linear-gradient(120deg, #234b3e, #234b3e);
    --ty-grad-hero: linear-gradient(120deg, #f0f3e8, #f8f9f3);
    --ty-radius: 1rem;
    --ty-shadow-sm: 0 6px 24px #203d3308;
    --ty-shadow: 0 12px 35px #203d3310;
    --ty-shadow-gold: 0 8px 24px #203d3315;
}
html { scroll-padding-top: 110px; }
body { line-height: 1.75; }
h1,h2,h3,h4,h5,h6 { line-height: 1.5; }
a,button,input,select,textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #688446 !important; outline-offset: 5px; }
.btn { min-height: 44px; border-radius: 8px; font-weight: 500; box-shadow: none; }
.btn-primary { background: #234b3e; border: 1px solid #234b3e; box-shadow: none; }
.btn-primary:hover,.btn-primary:focus { background: #163a2d; border-color: #163a2d; box-shadow: 0 6px 18px #203d3318; }
.btn-outline-primary,.btn-outline-secondary { border-color: #cbd6c6; background: transparent; }
.btn-lg { font-size: 1rem; padding: .95rem 1.45rem; }
.card:hover { transform: none; }
.form-control,.form-select { border-radius: 8px; min-height: 46px; background-color: #fff; border-color: #d4ddd0; }
.form-control:focus,.form-select:focus { border-color: #688446; box-shadow: 0 0 0 3px #68844620; }
.text-muted { color: #647267 !important; }
.skip-link { position: fixed; top: -100px; left: 16px; background: #fff; color: #183e35; padding: 12px 24px; z-index: 2000; border-radius: 8px; }
.skip-link:focus { top: 10px; }
.announcement-bar { background: #203f34; color: #f0f3e7; text-align: center; padding: 7px 16px; font-size: .72rem; letter-spacing: .06em; }
.announcement-bar span { padding: 0 14px; color: #baca9a; }
.navbar,.navbar.ty-scrolled { background: rgba(248,249,243,.96) !important; box-shadow: none; border-bottom: 1px solid #203d3312; padding-block: 17px; }
.navbar-brand { font-size: 1.28rem; letter-spacing: .12em; }
.navbar-brand img { width: 34px; height: 34px; border: 0; box-shadow: none; }
.navbar .nav-link { border-radius: 5px; font-size: .9rem; }
.navbar .nav-link.active { background: transparent; color: #1b4235 !important; text-decoration: underline; text-underline-offset: 9px; text-decoration-color: #829b61; }
.navbar .nav-link:hover { background: #e9eedf; }
.navbar .navbar-brand { order: 0; }
.navbar .navbar-collapse { order: 1; }
.navbar .ty-nav-actions { order: 2; }
.navbar .navbar-toggler { order: 3; min-width: 44px; min-height: 44px; }
.ty-nav-actions .btn { font-size: .82rem; }
.studio-label { display: block; color: #61714f; font-size: .66rem; font-weight: 600; letter-spacing: .16em; line-height: 1.8; }
.botanical-hero { padding: 38px 0 54px; }
.hero-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 52px; }
.hero-copy { padding: 20px 0; }
.hero-copy > .studio-label { display: flex; align-items: center; gap: 9px; }
.hero-copy > .studio-label > span { width: 7px; height: 7px; border-radius: 50%; background: #7a9258; }
.hero-copy h1 { font-size: clamp(3.1rem,5.5vw,5.1rem); line-height: 1.28; font-weight: 500; letter-spacing: -.055em; margin: 27px 0 22px; }
.hero-italic { color: #7c8d54; }
.hero-copy > p { color: #667162; font-size: .98rem; line-height: 1.95; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 25px; margin-top: 28px; }
.hero-cta .btn { display: flex; align-items: center; gap: 25px; }
.text-link { display: inline-flex; align-items: center; gap: 18px; font-size: .88rem; text-decoration: none; border-bottom: 1px solid #a8b59e; padding: 6px 0; color: #254335; }
.text-link:hover { color: #56733b; border-color: currentColor; }
.hero-origin { display: flex; align-items: center; gap: 13px; border-top: 1px solid #dce3d5; margin-top: 37px; padding-top: 21px; font-size: .72rem; color: #63735f; max-width: 330px; }
.hero-origin > i { font-size: 1.4rem; }
.hero-origin strong { font-weight: 500; color: #284335; }
.hero-photo { position: relative; height: 590px; border-radius: 120px 12px 12px 12px; overflow: hidden; background: #e7e7c9; }
.hero-photo > img { width: 100%; height: 100%; object-fit: cover; object-position: 52% center; }
.photo-overline { position: absolute; top: 28px; right: 26px; font-size: .6rem; letter-spacing: .19em; color: #34432c; }
.photo-caption { position: absolute; left: 22px; right: 22px; bottom: 47px; background: rgba(252,253,244,.93); backdrop-filter: blur(16px); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 19px 20px; border-radius: 9px; text-decoration: none; color: #203d33; }
.photo-caption small { display: block; letter-spacing: .14em; font-size: .59rem; margin-bottom: 6px; color: #657255; }
.photo-caption strong { font-size: .87rem; font-weight: 500; }
.round-arrow { width: 40px; height: 40px; flex-shrink: 0; border: 1px solid #b6c4a8; border-radius: 50%; display: grid; place-items: center; font-size: 1.35rem; transition: background .2s, color .2s; }
a:hover .round-arrow { background: #234b3e; color: white; }
.photo-index { position: absolute; bottom: 16px; left: 26px; font-size: .56rem; letter-spacing: .13em; color: #fff; text-shadow: 0 1px 5px #000; }
.promise-bar { border-block: 1px solid #dce3d5; }
.promise-items { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 22px; font-size: .78rem; color: #53644d; }
.promise-items i { margin-right: 9px; font-size: 1rem; }
.promise-items a { text-decoration: none; }
.ty-section { padding: 78px 0; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 32px; }
.section-heading h2 { font-size: clamp(1.5rem,2.6vw,2rem); font-weight: 500; margin: 10px 0 0; letter-spacing: -.035em; }
.section-heading > p { font-size: .85rem; color: #6b7765; margin: 0; }
.collection-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 25px; }
.collection-card { text-decoration: none; color: #203d33; }
.collection-image { position: relative; aspect-ratio: 1.17; overflow: hidden; border-radius: 12px; background: #e8ecde; }
.collection-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.collection-card:hover img { transform: scale(1.04); }
.collection-number { position: absolute; top: 15px; left: 15px; background: #f8f9f3ee; border-radius: 4px; padding: 5px 10px; font-size: .6rem; letter-spacing: .1em; }
.collection-caption { display: flex; justify-content: space-between; align-items: center; padding: 18px 2px 0; gap: 12px; }
.collection-caption h3 { font-size: 1.13rem; font-weight: 500; margin: 0 0 4px; }
.collection-caption p { font-size: .8rem; color: #647267; margin: 0; }
.featured-section { background: #eef2e6; }
.ty-product-card { box-shadow: none; border: 1px solid #dce3d5; border-radius: 12px; height: 100%; }
.ty-product-card:hover { box-shadow: 0 10px 24px #203d3310; transform: translateY(-3px); }
.ty-product-media { background: #f5f6ee; }
.ty-product-body { padding: 20px; }
.ty-product-name { font-size: 1rem; font-weight: 500; }
.ty-product-desc { color: #647267; }
.ty-price { color: #234b3e; font-size: 1.3rem; }
.ty-badge,.ty-badge-gold { background: #234b3e; color: #fff; box-shadow: none; border-radius: 4px; font-weight: 500; }
.ty-product-actions { gap: 8px; }
.ty-product-actions .btn { padding: .6rem .65rem; font-size: .8rem; }
.story-panel { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #dbe2d5; border-radius: 16px; overflow: hidden; }
.story-art { min-height: 410px; background: #244b3c; color: #edf0d7; padding: 42px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.story-art::after { content: ''; position: absolute; width: 350px; height: 350px; border: 1px solid #c6d29a33; border-radius: 50% 0 50% 50%; right: -85px; bottom: -95px; transform: rotate(-30deg); }
.story-art .studio-label { color: #c8d1b3; }
.story-word { font-family: 'Prompt',sans-serif; font-size: clamp(2.7rem,4.5vw,4.5rem); font-weight: 400; line-height: 1.45; letter-spacing: -.04em; z-index: 1; }
.story-word em { color: #c4d299; font-style: normal; }
.story-location { font-size: .6rem; letter-spacing: .15em; }
.story-copy { padding: 48px; align-self: center; }
.story-copy h2 { font-size: 1.8rem; font-weight: 500; margin: 15px 0 20px; }
.story-copy p { font-size: .9rem; color: #647267; }
.help-banner { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding-bottom: 70px; }
.help-banner h2 { font-size: 1.6rem; font-weight: 500; margin: 10px 0; }
.help-banner p { color: #647267; font-size: .9rem; margin: 0; }
.help-banner .btn { white-space: nowrap; }
.ty-title { font-weight: 500; }
.ty-accent { color: #658047; }
.ty-contact-info { background: #234b3e; }
.ty-contact-card { box-shadow: none; border: 1px solid #dbe2d5; }
.ty-footer { margin-top: 0; }
.ty-footer::before { display: none; }
.ty-footer-bottom { color: #c3cdbf !important; }
.ty-line-fab { width: 48px; height: 48px; background: #234b3e; box-shadow: 0 5px 18px #203d3320; }
.ty-page-head { padding: 48px 0; border-bottom: 1px solid #dce3d5; }
.ty-page-head h1 { font-weight: 500; }
.filter-reset { background: transparent; border: 0; color: #47643a; text-decoration: underline; text-underline-offset: 4px; font-size: .72rem; padding: 8px 0 8px 8px; min-height: 44px; }
.shop-filters .card { border: 1px solid #dbe2d5 !important; box-shadow: none !important; }
.shop-filters .card-header { border-color: #e5eadf; padding: 12px 18px; }
.shop-filters h5 { font-size: .95rem; }
.reveal { opacity: 1; transform: none; }
@media (min-width: 1400px) { .container { max-width: 1200px; } }
@media (max-width: 991.98px) {
    .hero-layout { gap: 28px; }
    .hero-copy h1 { font-size: 3.4rem; }
    .hero-photo { height: 540px; }
    .hero-cta { gap: 16px; }
    .ty-nav-actions .btn { padding-inline: .7rem; }
    .navbar .nav-link { padding-inline: .65rem !important; }
    .story-copy { padding: 30px; }
    .promise-items { flex-wrap: wrap; }
    .promise-items > * { width: calc(50% - 10px); }
    .help-banner { flex-wrap: wrap; }
}
@media (max-width: 767.98px) {
    .navbar,.navbar.ty-scrolled { padding-block: 11px; }
    .navbar .navbar-collapse { order: 4; padding-top: 12px; }
    .navbar .navbar-brand { font-size: 1rem; margin-right: 8px; letter-spacing: .08em; }
    .navbar-brand img { width: 28px; height: 28px; margin-right: 7px; }
    .ty-nav-actions { margin-right: 2px; gap: 5px !important; }
    .ty-nav-actions .btn { min-width: 40px; padding: 9px; }
    .ty-nav-actions .btn i { margin: 0 !important; }
    #navAccountName { display: none; }
    .announcement-bar { font-size: .6rem; }
    .announcement-bar span { padding-inline: 6px; }
    .botanical-hero { padding: 20px 0 30px; }
    .hero-layout { grid-template-columns: 1fr; gap: 27px; }
    .hero-copy { padding: 8px 7px 0; }
    .hero-copy h1 { font-size: clamp(3rem,10vw,4.5rem); margin-top: 20px; }
    .hero-copy h1 br:last-of-type { display: none; }
    .hero-copy > p { font-size: .92rem; }
    .hero-origin { margin-top: 24px; padding-top: 16px; max-width: none; }
    .hero-photo { height: 430px; border-top-left-radius: 85px; }
    .photo-caption { left: 16px; right: 16px; padding: 16px; }
    .promise-items { gap: 16px 12px; padding-block: 20px; font-size: .68rem; }
    .promise-items > * { width: calc(50% - 6px); }
    .promise-items i { margin-right: 4px; }
    .ty-section { padding: 46px 0; }
    .section-heading { align-items: start; flex-direction: column; gap: 12px; margin-bottom: 24px; }
    .section-heading > p br { display: none; }
    .collection-grid { grid-template-columns: 1fr; gap: 25px; }
    .collection-image { aspect-ratio: 1.45; }
    .collection-caption { padding-top: 12px; }
    .story-panel { grid-template-columns: 1fr; }
    .story-art { min-height: 330px; padding: 30px; }
    .story-word { font-size: 3.3rem; }
    .story-copy { padding: 30px 24px; }
    .help-banner { padding-bottom: 44px; }
    .help-banner h2 { font-size: 1.35rem; }
    .shop-page .d-flex:has(> div > #total-products) { flex-wrap: wrap; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,*::before,*::after { animation: none !important; transition: none !important; }
}
/* Keep Bootstrap's wide footer gutters inside the viewport. */
.ty-footer > .container > .row { --bs-gutter-x: 1.5rem; }
.ty-accent { background: none; -webkit-text-fill-color: currentColor; }
.navbar-brand .bs-icon { background: transparent !important; box-shadow: none !important; width: auto; height: auto; }
.navbar-brand .bs-icon img { margin: 0 !important; }
.featured-error { padding: 42px 24px; border: 1px dashed #aebca2; border-radius: 12px; }
#featured-products-container > .col-12 { width: 100%; }
.shop-filters .card-header > .d-flex { flex-wrap: wrap; }
.navbar .btn.shadow { box-shadow: none !important; }
.ty-cart-btn .cart-count-badge { position: absolute; top: -6px; right: -6px; }