/* ==========================================================================
   TextileERP - home page (Views/Home/Index.cshtml)
   Everything is scoped under .tx-home, so the shared product card and the
   shop, cart and account pages keep their own look.

   The language: ivory and deep wine, gold as the accent, frosted-glass cards
   over slowly drifting light ("auras"), arch-topped category cards like a
   temple doorway, and offers as coupon tickets. Motion is slow and quiet, and
   stops entirely for anyone who has asked for reduced motion.
   ========================================================================== */

.tx-home {
    --tx-h-gold:      #b8873a;
    --tx-h-gold-lite: #e9cf9f;
    --tx-h-gold-grad: linear-gradient(110deg, #a8772f 0%, #e3bd76 45%, #c99a4f 60%, #a8772f 100%);
    --tx-h-ivory:     #fbf7f0;
    --tx-h-radius:    22px;
    --tx-h-ease:      cubic-bezier(.22, .61, .36, 1);

    background: var(--tx-h-ivory);
}

/* --------------------------------------------------------------------------
   Glass - the frosted panel every card on this page is made of
   -------------------------------------------------------------------------- */
.tx-home .tx-glass {
    background: rgba(255, 255, 255, .58);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
            backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .75);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 22px 50px rgba(61, 15, 24, .10);
}
.tx-home .tx-glass--dark {
    background: rgba(26, 8, 12, .38);
    border-color: rgba(255, 255, 255, .22);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 12px 30px rgba(0, 0, 0, .25);
}
/* No backdrop blur (older browsers): a more solid panel so text stays readable. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .tx-home .tx-glass       { background: rgba(255, 255, 255, .92); }
    .tx-home .tx-glass--dark { background: rgba(26, 8, 12, .78); }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.tx-hbtn {
    position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 30px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
    font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
    transition: transform .3s var(--tx-h-ease), box-shadow .3s var(--tx-h-ease), background-color .3s, color .3s, border-color .3s;
}
.tx-hbtn:hover { transform: translateY(-2px); }
.tx-hbtn:focus-visible { outline: 2px solid var(--tx-h-gold-lite); outline-offset: 3px; }
.tx-hbtn svg { transition: transform .3s var(--tx-h-ease); }
.tx-hbtn:hover svg { transform: translateX(4px); }

.tx-hbtn--gold {
    color: #2a0910; background: var(--tx-h-gold-grad); background-size: 220% 100%; background-position: 0 0;
    box-shadow: 0 10px 28px rgba(184, 135, 58, .35);
    transition: background-position .8s var(--tx-h-ease), transform .3s var(--tx-h-ease), box-shadow .3s var(--tx-h-ease);
}
.tx-hbtn--gold:hover { color: #2a0910; background-position: 100% 0; box-shadow: 0 14px 34px rgba(184, 135, 58, .5); }

.tx-hbtn--glass {
    color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .45);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.tx-hbtn--glass:hover { color: #2a0910; background: #fff; border-color: #fff; }

.tx-hbtn--outline { color: var(--tx-wine); background: rgba(255, 255, 255, .4); border-color: rgba(123, 31, 43, .45); }
.tx-hbtn--outline:hover { color: #fff; background: var(--tx-wine); border-color: var(--tx-wine); box-shadow: 0 12px 28px rgba(123, 31, 43, .28); }

/* --------------------------------------------------------------------------
   Section frame and heading
   -------------------------------------------------------------------------- */
.tx-hsection { position: relative; padding: 96px 0; }
.tx-hsection > .tx-shell { position: relative; z-index: 1; }

.tx-hhead { max-width: 680px; margin: 0 auto 52px; text-align: center; }
.tx-hhead .tx-eyebrow {
    display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--tx-h-gold);
}
.tx-hhead h2 {
    margin: 12px 0 0; font-family: var(--tx-font-brand); font-weight: 600;
    font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; letter-spacing: .01em; color: var(--tx-wine-dark);
}
.tx-hhead p { margin: 0; font-size: 15.5px; color: var(--tx-muted); }
.tx-hhead--light h2 { color: #fff; }
.tx-hhead--light .tx-eyebrow { color: var(--tx-h-gold-lite); }
.tx-hhead--light p { color: rgba(255, 255, 255, .72); }

/* Gold rule - diamond - gold rule */
.tx-ornament { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px 0; }
.tx-ornament::before,
.tx-ornament::after { content: ""; width: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--tx-h-gold)); }
.tx-ornament::after { transform: scaleX(-1); }
.tx-ornament i { width: 7px; height: 7px; background: var(--tx-h-gold); transform: rotate(45deg); }
.tx-hhead--light .tx-ornament::before, .tx-hhead--light .tx-ornament::after { background: linear-gradient(90deg, transparent, var(--tx-h-gold-lite)); }
.tx-hhead--light .tx-ornament i { background: var(--tx-h-gold-lite); }
.tx-ornament--start { justify-content: flex-start; }
.tx-ornament--start::before { display: none; }

.tx-hmore { margin-top: 48px; text-align: center; }

/* --------------------------------------------------------------------------
   Auras - soft wine and gold light drifting behind the glass. Radial
   gradients (not filter: blur) keep them cheap to paint.
   -------------------------------------------------------------------------- */
.tx-hsection--aura { overflow: hidden; background: linear-gradient(180deg, var(--tx-h-ivory), #f6efe4 60%, var(--tx-h-ivory)); }
.tx-aura { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.tx-aura i { position: absolute; border-radius: 50%; will-change: transform; }
.tx-aura i:nth-child(1) {
    width: 620px; height: 620px; left: -180px; top: -120px;
    background: radial-gradient(circle, rgba(123, 31, 43, .20), rgba(123, 31, 43, 0) 68%);
    animation: txAuraA 22s ease-in-out infinite alternate;
}
.tx-aura i:nth-child(2) {
    width: 560px; height: 560px; right: -160px; top: 18%;
    background: radial-gradient(circle, rgba(201, 154, 79, .28), rgba(201, 154, 79, 0) 68%);
    animation: txAuraB 26s ease-in-out infinite alternate;
}
.tx-aura i:nth-child(3) {
    width: 480px; height: 480px; left: 32%; bottom: -220px;
    background: radial-gradient(circle, rgba(214, 120, 140, .18), rgba(214, 120, 140, 0) 68%);
    animation: txAuraC 30s ease-in-out infinite alternate;
}
.tx-hsection--aura-alt .tx-aura i:nth-child(1) { left: auto; right: -200px; }
.tx-hsection--aura-alt .tx-aura i:nth-child(2) { right: auto; left: -140px; top: 40%; }

@keyframes txAuraA { to { transform: translate(120px, 90px) scale(1.12); } }
@keyframes txAuraB { to { transform: translate(-110px, -70px) scale(.92); } }
@keyframes txAuraC { to { transform: translate(-90px, -120px) scale(1.18); } }

/* --------------------------------------------------------------------------
   Hero - taller, the words on a frosted panel
   -------------------------------------------------------------------------- */
.tx-home .tx-hero__track { height: clamp(520px, 80vh, 760px); }
.tx-home .tx-hero__veil {
    background:
        linear-gradient(90deg, rgba(20, 6, 10, .72) 0%, rgba(20, 6, 10, .35) 50%, rgba(20, 6, 10, .08) 100%),
        linear-gradient(0deg, rgba(20, 6, 10, .55) 0%, rgba(20, 6, 10, 0) 35%);
}
.tx-home .tx-hero__copy {
    max-width: 600px; padding: 40px 42px; border-radius: 28px;
    background: rgba(20, 6, 10, .26);
    -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 30px 60px rgba(0, 0, 0, .25);
}
.tx-home .tx-hero__copy .tx-eyebrow {
    display: flex; align-items: center; gap: 12px; color: var(--tx-h-gold-lite); letter-spacing: .28em; font-size: 11.5px;
}
.tx-home .tx-hero__copy .tx-eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--tx-h-gold-lite); }
.tx-home .tx-hero__slide[data-align="center"] .tx-hero__copy .tx-eyebrow { justify-content: center; }
.tx-home .tx-hero__slide[data-align="right"]  .tx-hero__copy .tx-eyebrow { justify-content: flex-end; }
.tx-home .tx-hero__copy h1 {
    margin: 16px 0 14px; font-family: var(--tx-font-brand); font-weight: 600;
    font-size: clamp(38px, 5.6vw, 72px); line-height: 1.02; letter-spacing: .005em;
}
.tx-home .tx-hero__copy p { font-size: 16.5px; line-height: 1.65; color: rgba(255, 255, 255, .86); margin-bottom: 28px; }
.tx-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.tx-home .tx-hero__slide[data-align="center"] .tx-hero__actions { justify-content: center; }
.tx-home .tx-hero__slide[data-align="right"]  .tx-hero__actions { justify-content: flex-end; }
.tx-hero__count {
    display: block; margin-top: 26px; font-size: 12px; letter-spacing: .24em; color: rgba(255, 255, 255, .55);
}
.tx-hero__count strong { color: var(--tx-h-gold-lite); font-weight: 700; }
.tx-home .tx-hero__dots { bottom: 92px; }
/* A thin line to look at, a 22px band to hit: padding around a 2px content box. */
.tx-home .tx-hero__dots button {
    box-sizing: border-box; width: 34px; height: 22px; padding: 10px 0; background-clip: content-box;
    background-color: rgba(255, 255, 255, .4);
}
.tx-home .tx-hero__dots button.is-active { width: 60px; background-color: var(--tx-h-gold-lite); }
.tx-home .tx-hero__slide.is-active .tx-hero__copy > *:nth-child(5) { animation-delay: 330ms; }

/* --------------------------------------------------------------------------
   Trust bar - a glass strip floating over the foot of the hero
   -------------------------------------------------------------------------- */
.tx-htrust-wrap { position: relative; z-index: 5; padding: 40px 0 0; }
.tx-htrust-wrap.is-over-hero { margin-top: -64px; padding-top: 0; }
.tx-htrust {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
    padding: 12px; border-radius: 26px;
}
/* Mostly opaque: half of it sits over the dark hero, where a thin glass turns
   muddy grey. Scoped like .tx-home .tx-glass so it outranks it. */
.tx-home .tx-htrust { background: rgba(255, 255, 255, .94); }
.tx-htrust__item { display: flex; align-items: center; gap: 14px; padding: 16px 14px; border-radius: 18px; transition: background-color .3s; }
.tx-htrust__item:hover { background: rgba(255, 255, 255, .7); }
.tx-htrust__icon {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%;
    color: var(--tx-wine); background: linear-gradient(135deg, #fff, #f6ead6);
    box-shadow: 0 0 0 1px rgba(184, 135, 58, .45), 0 8px 18px rgba(184, 135, 58, .2);
}
.tx-htrust__icon svg { width: 22px; height: 22px; }
.tx-htrust__item strong { display: block; font-size: 14.5px; color: var(--tx-ink); }
.tx-htrust__item span span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--tx-muted); }
@media (min-width: 1000px) {
    .tx-htrust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tx-htrust__item + .tx-htrust__item { border-left: 1px solid rgba(184, 135, 58, .18); border-radius: 0 18px 18px 0; }
}

/* --------------------------------------------------------------------------
   Categories - arch-topped, like a temple doorway
   -------------------------------------------------------------------------- */
.tx-hcats { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px)  { .tx-hcats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tx-hcats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; } }

.tx-hcat {
    position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4;
    /* A true arch: the two top corners together span the full width (50% + 50%).
       Oversized radii like 999px get scaled down in proportion, which is what
       flattened the first attempt. */
    border-radius: 50% 50% 26px 26px / 36% 36% 26px 26px;
    background: var(--tx-ink); color: #fff; isolation: isolate;
    box-shadow: 0 18px 40px rgba(61, 15, 24, .16);
    transform: perspective(900px) rotateX(var(--tx-rx, 0deg)) rotateY(var(--tx-ry, 0deg)) translateY(var(--tx-lift, 0px));
    transition: transform .45s var(--tx-h-ease), box-shadow .45s var(--tx-h-ease);
}
.tx-hcat img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.2s var(--tx-h-ease);
}
/* A darkening foot for the label, and a fine gold arch drawn inside the edge. */
.tx-hcat::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(20, 6, 10, 0) 45%, rgba(20, 6, 10, .6) 100%);
}
.tx-hcat::after {
    content: ""; position: absolute; inset: 10px; z-index: 1; pointer-events: none;
    border-radius: inherit; border: 1px solid rgba(233, 207, 159, 0);
    transition: border-color .45s var(--tx-h-ease), inset .45s var(--tx-h-ease);
}
.tx-hcat:hover { --tx-lift: -8px; box-shadow: 0 28px 60px rgba(61, 15, 24, .28); }
.tx-hcat.is-tilting { transition: transform .12s linear, box-shadow .45s var(--tx-h-ease); }
.tx-hcat:hover img { transform: scale(1.09); }
.tx-hcat:hover::after { border-color: rgba(233, 207, 159, .85); inset: 8px; }

.tx-hcat__label {
    position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 14px 14px 18px; border-radius: 18px;
}
.tx-hcat__label strong { display: block; font-family: var(--tx-font-brand); font-weight: 700; font-size: 21px; line-height: 1.1; }
.tx-hcat__label > span > span { display: block; margin-top: 3px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--tx-h-gold-lite); }
.tx-hcat__go {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
    color: #2a0910; background: var(--tx-h-gold-lite); transition: transform .4s var(--tx-h-ease), background-color .3s;
}
.tx-hcat:hover .tx-hcat__go { transform: rotate(-45deg); background: #fff; }

/* --------------------------------------------------------------------------
   Product cards - frosted glass, lift, pointer glare and a light sweep
   -------------------------------------------------------------------------- */
.tx-hproducts { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px)  { .tx-hproducts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tx-hproducts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; } }

.tx-home .tx-card {
    padding: 8px; border-radius: var(--tx-h-radius); isolation: isolate;
    background: rgba(255, 255, 255, .58);
    -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .8);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 16px 40px rgba(61, 15, 24, .10);
    transform: perspective(1000px) rotateX(var(--tx-rx, 0deg)) rotateY(var(--tx-ry, 0deg)) translateY(var(--tx-lift, 0px));
    transition: transform .45s var(--tx-h-ease), box-shadow .45s var(--tx-h-ease), border-color .45s;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .tx-home .tx-card { background: rgba(255, 255, 255, .94); }
}
.tx-home .tx-card:hover {
    --tx-lift: -8px;
    border-color: rgba(233, 207, 159, .9);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 30px 60px rgba(61, 15, 24, .20);
}
.tx-home .tx-card.is-tilting { transition: transform .12s linear, box-shadow .45s var(--tx-h-ease), border-color .45s; }

/* Glare that follows the pointer (position from home.js) */
.tx-home .tx-card::before {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
    background: radial-gradient(circle at var(--tx-gx, 50%) var(--tx-gy, 0%), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 45%);
    opacity: 0; transition: opacity .4s;
}
.tx-home .tx-card:hover::before { opacity: 1; }

/* One diagonal sweep of light across the picture on hover */
.tx-home .tx-card__media { border-radius: 16px; background: #efe6d8; }
.tx-home .tx-card__media::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -75%; width: 50%; z-index: 1; pointer-events: none;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0));
    transform: skewX(-18deg);
}
.tx-home .tx-card:hover .tx-card__media::after { animation: txSweep 1s var(--tx-h-ease); }
@keyframes txSweep { to { left: 130%; } }
.tx-home .tx-card:hover .tx-card__media img { transform: scale(1.08); }
.tx-home .tx-card__media img { transition: transform 1.1s var(--tx-h-ease); }

.tx-home .tx-flag {
    padding: 4px 10px; border-radius: 999px; font-size: 10px; letter-spacing: .14em;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.tx-home .tx-flag--save { background: rgba(123, 31, 43, .88); }
.tx-home .tx-flag--new  { background: rgba(184, 135, 58, .92); }
.tx-home .tx-flag--best { background: rgba(36, 28, 31, .82); }

.tx-home .tx-card__quick .tx-btn {
    border-radius: 999px; border: 1px solid rgba(255, 255, 255, .6);
    background: rgba(93, 21, 31, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
}
.tx-home .tx-card__body { padding: 14px 10px 10px; }
.tx-home .tx-card__cat { letter-spacing: .2em; font-size: 10.5px; color: var(--tx-h-gold); }
.tx-home .tx-card__name { font-family: var(--tx-font-brand); font-weight: 700; font-size: 19px; line-height: 1.2; }
.tx-home .tx-price { font-size: 17px; color: var(--tx-wine-dark); }

/* --------------------------------------------------------------------------
   Offers - coupon tickets on deep wine
   -------------------------------------------------------------------------- */
.tx-hoffers {
    position: relative; overflow: hidden; padding: 96px 0;
    background:
        radial-gradient(ellipse 60% 80% at 0% 0%, rgba(201, 154, 79, .22), transparent 60%),
        radial-gradient(ellipse 50% 70% at 100% 100%, rgba(214, 120, 140, .16), transparent 60%),
        linear-gradient(135deg, #22070d 0%, #5d151f 55%, #34101a 100%);
}
.tx-hoffers > .tx-shell { position: relative; z-index: 1; }
/* A slow band of gold light crossing the section */
.tx-hoffers__shine {
    position: absolute; top: -40%; bottom: -40%; left: -30%; width: 30%; pointer-events: none;
    background: linear-gradient(90deg, rgba(233, 207, 159, 0), rgba(233, 207, 159, .10), rgba(233, 207, 159, 0));
    transform: rotate(18deg); animation: txShine 11s ease-in-out infinite;
}
@keyframes txShine { 0% { left: -40%; } 55%, 100% { left: 130%; } }

.tx-hoffers__grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .tx-hoffers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tx-ticket {
    --tx-stub: 132px;
    position: relative; display: grid; grid-template-columns: var(--tx-stub) minmax(0, 1fr);
    border-radius: var(--tx-h-radius); color: #fff;
    background: rgba(255, 255, 255, .07);
    -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(233, 207, 159, .32);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 24px 50px rgba(0, 0, 0, .28);
    /* Two half masks, each with a round notch where the stub is torn off. */
    -webkit-mask: radial-gradient(circle 13px at var(--tx-stub) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                  radial-gradient(circle 13px at var(--tx-stub) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
            mask: radial-gradient(circle 13px at var(--tx-stub) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                  radial-gradient(circle 13px at var(--tx-stub) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
    transition: transform .45s var(--tx-h-ease), background-color .45s;
}
.tx-ticket:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .11); }

.tx-ticket__value {
    display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22px 10px;
    border-right: 2px dashed rgba(233, 207, 159, .35); text-align: center;
}
.tx-ticket__value strong {
    font-family: var(--tx-font-brand); font-weight: 700; font-size: 38px; line-height: 1;
    background: var(--tx-h-gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
    overflow-wrap: anywhere;
}
.tx-ticket__value span { margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--tx-h-gold-lite); }

.tx-ticket__body { padding: 24px 26px; min-width: 0; }
.tx-ticket__badge {
    display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: #2a0910; background: var(--tx-h-gold-lite);
}
.tx-ticket__body h3 { margin: 0; font-family: var(--tx-font-brand); font-weight: 700; font-size: 25px; line-height: 1.15; color: #fff; }
.tx-ticket__body p { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.tx-ticket__terms { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.tx-ticket__terms span { font-size: 12px; color: rgba(233, 207, 159, .85); }
.tx-ticket__terms span + span::before { content: "\00B7"; margin-right: 14px; color: rgba(233, 207, 159, .5); }

.tx-ticket__code {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 9px 16px 9px 18px;
    border-radius: 999px; border: 1.5px dashed var(--tx-h-gold-lite); cursor: pointer;
    background: rgba(233, 207, 159, .08); color: var(--tx-h-gold-lite);
    font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--tx-h-ease);
}
.tx-ticket__code span { font-size: 15px; letter-spacing: .16em; color: #fff; }
.tx-ticket__code:hover { background: var(--tx-h-gold-lite); color: #2a0910; border-style: solid; transform: scale(1.03); }
.tx-ticket__code:hover span { color: #2a0910; }
.tx-ticket__code:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* --------------------------------------------------------------------------
   About - the story on glass, counters, best sellers beside it
   -------------------------------------------------------------------------- */
.tx-habout { background: linear-gradient(180deg, var(--tx-h-ivory), #f3e9da); overflow: hidden; }
.tx-habout::before {
    content: ""; position: absolute; width: 700px; height: 700px; right: -240px; top: -200px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(201, 154, 79, .22), rgba(201, 154, 79, 0) 65%);
}
.tx-habout__grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 1000px) { .tx-habout__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; } }

.tx-habout__story { padding: 44px 42px; border-radius: 30px; }
.tx-habout__story .tx-eyebrow { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--tx-h-gold); }
.tx-habout__story h2 {
    margin: 12px 0 0; font-family: var(--tx-font-brand); font-weight: 600;
    font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; color: var(--tx-wine-dark);
}
.tx-habout__text { font-size: 15.5px; line-height: 1.8; color: var(--tx-body); }
.tx-habout__text p:last-child { margin-bottom: 0; }

.tx-hstats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 30px 0 32px; }
@media (min-width: 640px) { .tx-hstats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tx-hstats > div {
    padding: 16px 14px; border-radius: 18px; text-align: center;
    background: rgba(255, 255, 255, .6); border: 1px solid rgba(184, 135, 58, .25);
}
.tx-hstats dd {
    margin: 0; order: -1; font-family: var(--tx-font-brand); font-weight: 700; font-size: 34px; line-height: 1;
    color: var(--tx-wine); font-variant-numeric: tabular-nums;
}
.tx-hstats dt { margin-top: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--tx-muted); }
.tx-hstats > div { display: flex; flex-direction: column; }

.tx-habout__best { position: relative; }
.tx-habout__tag {
    position: absolute; top: -14px; left: 50%; z-index: 4; transform: translateX(-50%);
    padding: 7px 18px; border-radius: 999px; white-space: nowrap;
    font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
    color: #2a0910; background: var(--tx-h-gold-grad); box-shadow: 0 10px 24px rgba(184, 135, 58, .35);
}
.tx-habout__cards { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* A little stagger so the four read as a collage, not a table. Margin, not
   transform, so the cards keep their own tilt and lift. */
@media (min-width: 1000px) {
    .tx-habout__cards { align-items: start; }
    .tx-habout__cards > :nth-child(2n) { margin-top: 28px; }
}

/* --------------------------------------------------------------------------
   Reviews - the silk section keeps its design; the cards turn to glass
   -------------------------------------------------------------------------- */
.tx-home .tx-testimonial {
    background: rgba(255, 253, 248, .86);
    -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .55); border-top: 3px solid #c99a4f;
}

/* --------------------------------------------------------------------------
   Contact - glass card over drifting light
   -------------------------------------------------------------------------- */
.tx-hcontact { overflow: hidden; background: linear-gradient(180deg, #f3e9da, var(--tx-h-ivory)); }
.tx-hcontact__card { max-width: 820px; margin: 0 auto; padding: 56px 40px; border-radius: 32px; text-align: center; }
.tx-hcontact__card .tx-eyebrow { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--tx-h-gold); }
.tx-hcontact__card h2 {
    margin: 12px 0 0; font-family: var(--tx-font-brand); font-weight: 600;
    font-size: clamp(30px, 3.8vw, 46px); line-height: 1.1; color: var(--tx-wine-dark);
}
.tx-hcontact__where { display: inline-flex; align-items: flex-start; gap: 8px; margin: 0 0 28px; color: var(--tx-body); font-size: 15px; text-align: left; }
.tx-hcontact__where svg { flex: 0 0 auto; margin-top: 3px; color: var(--tx-h-gold); }
.tx-hcontact__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* --------------------------------------------------------------------------
   Phones - most visitors are here, so this is a design of its own, not a
   squeezed desktop. Long stacked lists become swipeable rails: the next card
   peeks in from the edge, cards snap into place, and a thin gold line under
   each rail shows how far along you are (Scripts/modules/home.js).
   -------------------------------------------------------------------------- */
@media (max-width: 759px) {
    .tx-home { --tx-h-gutter: 16px; }

    .tx-hsection, .tx-hoffers { padding: 60px 0; }
    .tx-hhead { margin-bottom: 28px; }
    .tx-hhead h2 { font-size: 34px; }
    .tx-hhead p { font-size: 14px; }
    .tx-ornament { margin: 14px 0; }
    .tx-hmore { margin-top: 26px; }
    .tx-hmore .tx-hbtn { width: 100%; }

    /* ---- Rails ---------------------------------------------------------- */
    .tx-home .tx-hrail {
        display: grid; grid-template-columns: none; grid-auto-flow: column;
        grid-auto-columns: var(--tx-rail-w, 64%); gap: 14px;
        overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory; scroll-padding-inline: var(--tx-h-gutter);
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
        /* Bleed to the screen edges so a card can peek in from the right. */
        margin-inline: calc(-1 * var(--tx-h-gutter));
        padding: 6px var(--tx-h-gutter) 26px;
    }
    .tx-home .tx-hrail::-webkit-scrollbar { display: none; }
    .tx-home .tx-hrail > * { scroll-snap-align: start; min-width: 0; }
    .tx-hrail--cats     { --tx-rail-w: 58%; }
    .tx-hrail--products { --tx-rail-w: 62%; }
    .tx-hrail--reviews  { --tx-rail-w: 86%; }
    .tx-hrail--trust    { --tx-rail-w: 78%; }

    /* Where you are along a rail: a gold thumb on a hairline track. */
    .tx-hrail__bar {
        position: relative; height: 2px; width: 96px; margin: -8px auto 0; border-radius: 2px; overflow: hidden;
        background: rgba(123, 31, 43, .14);
    }
    .tx-hrail__bar i {
        position: absolute; top: 0; bottom: 0; left: 0; width: var(--tx-rail-thumb, 30%);
        border-radius: 2px; background: var(--tx-h-gold);
        transform: translateX(var(--tx-rail-pos, 0%)); transition: transform .12s linear;
    }
    .tx-testimonials .tx-hrail__bar { background: rgba(255, 255, 255, .2); }
    .tx-testimonials .tx-hrail__bar i { background: var(--tx-h-gold-lite); }

    /* ---- Hero: full-bleed picture, words low on a slim glass panel --------- */
    .tx-home .tx-hero__track { height: clamp(560px, 88svh, 720px); }
    .tx-home .tx-hero__veil {
        background: linear-gradient(0deg, rgba(20, 6, 10, .88) 0%, rgba(20, 6, 10, .45) 45%, rgba(20, 6, 10, .08) 75%);
    }
    .tx-home .tx-hero__body { align-items: flex-end; padding-bottom: 84px; }
    .tx-home .tx-hero__copy {
        padding: 22px 20px 20px; border-radius: 24px;
        background: rgba(20, 6, 10, .32);
    }
    .tx-home .tx-hero__copy .tx-eyebrow { font-size: 10px; letter-spacing: .22em; gap: 10px; }
    .tx-home .tx-hero__copy .tx-eyebrow::before { width: 22px; flex: 0 0 auto; }
    .tx-home .tx-hero__copy h1 { margin: 12px 0 10px; font-size: clamp(34px, 10vw, 44px); }
    .tx-home .tx-hero__copy p { font-size: 14.5px; line-height: 1.55; margin-bottom: 18px; }
    .tx-hero__actions { gap: 10px; }
    .tx-hero__actions .tx-hbtn--gold { flex: 1 1 100%; padding: 16px 20px; font-size: 12.5px; }
    .tx-hero__actions .tx-hbtn--glass { flex: 1 1 100%; padding: 12px 18px; font-size: 11px; letter-spacing: .18em; }
    .tx-hero__count { display: none; }
    .tx-home .tx-hero__dots { bottom: 58px; }

    /* ---- Trust: a swipeable row of white pill cards ----------------------- */
    .tx-htrust-wrap.is-over-hero { margin-top: -38px; }
    .tx-home .tx-htrust {
        background: none; border: 0; box-shadow: none; border-radius: 0;
        -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    .tx-home .tx-htrust.tx-hrail { padding-top: 0; padding-bottom: 20px; gap: 10px; }
    .tx-htrust__item {
        padding: 14px 16px; gap: 12px; border-radius: 18px;
        background: rgba(255, 255, 255, .96); border: 1px solid rgba(184, 135, 58, .22);
        box-shadow: 0 12px 28px rgba(61, 15, 24, .12);
    }
    .tx-htrust__item + .tx-htrust__item { border-left: 1px solid rgba(184, 135, 58, .22); border-radius: 18px; }
    .tx-htrust__icon { width: 42px; height: 42px; }
    .tx-htrust__icon svg { width: 19px; height: 19px; }
    .tx-htrust__item strong { font-size: 13.5px; }
    .tx-htrust__item span span { font-size: 12px; }
    .tx-htrust-wrap .tx-hrail__bar { display: none; }

    /* ---- Categories ------------------------------------------------------- */
    .tx-hcat { box-shadow: 0 14px 30px rgba(61, 15, 24, .18); }
    .tx-hcat__label { left: 10px; right: 10px; bottom: 10px; padding: 12px 12px 12px 14px; border-radius: 16px; }
    .tx-hcat__label strong { font-size: 19px; }
    .tx-hcat__go { width: 32px; height: 32px; }

    /* ---- Product cards: the quick button is always there on touch ---------- */
    .tx-home .tx-card { padding: 7px; border-radius: 20px; box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 14px 30px rgba(61, 15, 24, .12); }
    .tx-home .tx-card__media { border-radius: 14px; }
    .tx-home .tx-card__body { padding: 12px 8px 8px; }
    .tx-home .tx-card__name { font-size: 17px; }
    .tx-home .tx-card__quick { left: 14px; right: 14px; }

    /* ---- Offers: tickets sized for a thumb ------------------------------- */
    .tx-hoffers__grid { gap: 16px; }
    .tx-ticket { --tx-stub: 96px; }
    .tx-ticket__value { padding: 18px 6px; }
    .tx-ticket__value strong { font-size: 28px; }
    .tx-ticket__value span { font-size: 10px; letter-spacing: .24em; }
    .tx-ticket__body { padding: 18px 16px 18px 18px; }
    .tx-ticket__body h3 { font-size: 22px; }
    .tx-ticket__body p { font-size: 13px; }
    /* Code on the left, icon + "Copy" together on the right. */
    .tx-ticket__code { width: 100%; justify-content: flex-start; gap: 6px; margin-top: 14px; }
    .tx-ticket__code svg { margin-left: auto; }

    /* ---- About ------------------------------------------------------------ */
    .tx-habout__grid { gap: 40px; }
    .tx-habout__story { padding: 30px 20px; border-radius: 24px; }
    .tx-habout__story h2 { font-size: 32px; }
    .tx-habout__text { font-size: 14.5px; line-height: 1.75; }
    .tx-hstats { gap: 10px; margin: 24px 0 26px; }
    .tx-hstats dd { font-size: 30px; }
    .tx-habout__story .tx-hbtn { width: 100%; }
    .tx-habout__tag { top: -12px; }

    /* ---- Reviews ---------------------------------------------------------- */
    .tx-home .tx-testimonials { padding: 84px 0 92px; }
    .tx-home .tx-testimonials__head { margin-bottom: 26px; }
    .tx-home .tx-testimonial { padding: 26px 20px 20px; }
    .tx-home .tx-testimonial__title { font-size: 20px; }
    .tx-home .tx-testimonial__text { font-size: 14.5px; }

    /* ---- Contact ---------------------------------------------------------- */
    .tx-hcontact__card { padding: 34px 20px; border-radius: 24px; }
    .tx-hcontact__card h2 { font-size: 30px; }
    .tx-hcontact__where { font-size: 14px; }
    .tx-hcontact__actions .tx-hbtn { flex: 1 1 100%; padding: 16px 20px; }
}

/* Rails only exist on phones; the progress line has nothing to show elsewhere. */
@media (min-width: 760px) { .tx-hrail__bar { display: none; } }

/* --------------------------------------------------------------------------
   Asked for less motion: everything holds still
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .tx-aura i, .tx-hoffers__shine { animation: none; }
    .tx-home .tx-card, .tx-hcat, .tx-ticket { transform: none !important; }
    .tx-home .tx-card:hover .tx-card__media::after { animation: none; }
}