/*
 * Flash deals on product cards. Ported from the approved design board
 * (round 7 + T1). Own fd- classes, theme tokens with fallbacks, so no leaf
 * Tailwind rebuild is needed. Brand tones per [data-fd-brand].
 */
.fd{--fd-fg:var(--color-fg,#000);--fd-fg2:var(--color-fg-secondary,#696e79);--fd-line:var(--color-border-subtle,#e4e4e7);
  --fd-acc:#000;--fd-acc-fg:#fff;--fd-bar:#000;--fd-urgent:#9b1c1c;--fd-save:var(--color-discount,#000);--fd-sec:#2f211d;--fd-sec-fg:#f4f0e7;--fd-link:var(--fd-fg)}
/* last-hour tone (spec 2 / 17.1): copper #a04b29 on It's Luxury and Options, deep red on Aigner, Apple orange on Gait */
.fd[data-fd-brand="itsluxury"]{--fd-acc:#2f211d;--fd-acc-fg:#f4f0e7;--fd-bar:#2f211d;--fd-urgent:#a04b29;--fd-sec:#2f211d;--fd-sec-fg:#f4f0e7}
.fd[data-fd-brand="options"]{--fd-acc:var(--color-action,#42445d);--fd-acc-fg:#fff;--fd-bar:var(--color-action,#42445d);--fd-urgent:#a04b29;--fd-sec:var(--color-action,#42445d);--fd-sec-fg:#fff}
.fd[data-fd-brand="aigner"]{--fd-acc:#000;--fd-acc-fg:#fff;--fd-bar:#000;--fd-urgent:#9b1c1c;--fd-sec:#d4d4d8;--fd-sec-fg:#000}
.fd[data-fd-brand="gait"]{--fd-fg2:#6e6e73;--fd-line:#e8e8ed;--fd-acc:#1d1d1f;--fd-acc-fg:#fff;--fd-bar:#0071e3;--fd-urgent:#bf4800;--fd-save:#bf4800;--fd-sec:#1d1d1f;--fd-sec-fg:#fff;--fd-link:#0071e3}
.fd[hidden]{display:none!important}
.fd svg{flex:none}

/* ——— the one object on the photo ——— */
.fd-photo{position:absolute;top:8px;inset-inline-start:8px;max-width:calc(100% - 46px);z-index:2;pointer-events:none;display:flex;min-width:0}
.fd-lab{display:inline-flex;align-items:center;gap:5px;max-width:100%;min-width:0;padding:4px 8px;border-radius:6px;background:var(--fd-camp-bg,var(--fd-acc));color:var(--fd-camp-fg,var(--fd-acc-fg));
  font-size:10px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;font-weight:600;white-space:nowrap;overflow:hidden}
/* the ellipsis lives on an inner block (text-overflow does nothing on a flex box); it clips at the END in both directions */
.fd-lab-t,.fd-chip-t{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-lab--camp::before{content:"";width:5px;height:5px;transform:rotate(45deg);background:var(--fd-camp-mark,#c9a45c);flex:none}
.fd[data-fd-brand="gait"] .fd-lab{background:var(--fd-camp-bg,#fff);color:var(--fd-camp-fg,#bf4800);border:1px solid #f2c9a8;letter-spacing:.04em;text-transform:none;font-size:11px}
.fd[data-fd-brand="gait"] .fd-lab--camp{border-color:var(--fd-camp-bg,#f2c9a8)}
.fd[data-fd-urgent="1"] .fd-lab{background:var(--fd-urgent);color:#fff;border-color:var(--fd-urgent)}
/* member: small dark chip with a lock (the member-price language) */
.fd-chip{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border-radius:8px;background:var(--fd-sec);color:var(--fd-sec-fg);font-size:10px;font-weight:500;line-height:1;white-space:nowrap;overflow:hidden;max-width:100%;min-width:0}
.fd[data-fd-brand="gait"] .fd-chip{font-size:11px;border-radius:999px}
.fd-chip svg{width:10px;height:10px}
/* clear: white label with a lock */
.fd-chip--clear{background:#fff;color:var(--fd-fg);border:1px solid var(--fd-line);border-radius:6px;padding:0 8px}
/* vitrine: veil over the whole photo with a medallion */
.fd-photo--vit{inset:0;max-width:none;display:grid;place-items:center;align-content:center;gap:7px;padding:10px;text-align:center;
  background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(6px) saturate(.9);backdrop-filter:blur(6px) saturate(.9);transition:opacity .5s}
.fd-med{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#0b0b0b;color:#f3e6c8;
  box-shadow:0 6px 18px rgba(0,0,0,.16),inset 0 0 0 1px rgba(255,255,255,.18);transition:transform .6s cubic-bezier(.3,1.5,.5,1)}
.fd[data-fd-brand="itsluxury"] .fd-med{background:#2f211d;color:#f4e3c9}
.fd[data-fd-brand="gait"] .fd-med{background:#1d1d1f;color:#fff}
.fd-med svg{width:19px;height:19px;overflow:visible}
.fd-med .fd-shackle{transform-origin:70% 100%;transition:transform .55s cubic-bezier(.3,1.6,.5,1)}
.fd-vt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--fd-fg)}
.fd[data-fd-brand="gait"] .fd-vt{letter-spacing:.04em;text-transform:none;font-size:12px}

/* ——— price rows (fallback classes; listings pass their own lockup classes) ——— */
.fd-price{font-variant-numeric:tabular-nums}
.fd-now{font-size:12px;font-weight:500;line-height:16px;color:var(--fd-fg)}
.fd-was{line-height:14px;white-space:nowrap}
.fd-old{font-size:10px;color:var(--fd-fg2);text-decoration:line-through}
.fd-off{margin-inline-start:2px;font-size:10px;font-weight:500;color:var(--fd-save)}
.fd-hid{display:flex;flex-wrap:nowrap;align-items:baseline;gap:2px 6px;min-width:0;font-size:10px;line-height:14px;color:var(--fd-fg2);white-space:nowrap;overflow:hidden}
.fd-hid svg{width:10px;height:10px;align-self:center}
.fd-pblur{filter:blur(4px);-webkit-user-select:none;user-select:none;color:var(--fd-fg);font-weight:600;font-size:11px}
.fd-mask{display:inline-flex;align-items:center;gap:4px;letter-spacing:.06em;color:var(--fd-fg);font-weight:600;font-variant-numeric:tabular-nums}
.fd-vis{color:var(--fd-fg);font-weight:600}

/* ——— T1 deal line under the price ——— */
.fd-mod{margin-top:8px;display:grid;gap:5px;min-height:27px;align-content:start;container-type:inline-size}
.fd-row1{display:flex;justify-content:space-between;align-items:center;gap:6px;min-width:0;min-height:18px}
.fd-row1>*{min-width:0}
.fd-tm{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--fd-fg);white-space:nowrap;overflow:hidden}
.fd-tm .fd-wd,.fd-muted{color:var(--fd-fg2)}
.fd-tm .fd-t{font-weight:600}
.fd[data-fd-urgent="1"] .fd-tm,.fd[data-fd-urgent="1"] .fd-tm .fd-wd{color:var(--fd-urgent)}
.fd-pc{font-size:11px;color:var(--fd-fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.fd-muted{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-flex;align-items:center;gap:5px}
.fd-muted svg{width:11px;height:11px}
.fd-ring{width:14px;height:14px;transform:rotate(-90deg)}
.fd-ring circle{fill:none;stroke-width:2.2}
.fd-ring .fd-trk{stroke:currentColor;opacity:.25}
.fd-ring .fd-val{stroke:currentColor;stroke-linecap:round;transition:stroke-dashoffset .9s linear}
.fd-bar{position:relative;height:4px;border-radius:2px;background:var(--fd-line);overflow:hidden}
.fd-bar i{position:absolute;inset-block:0;inset-inline-start:0;border-radius:inherit;background:var(--fd-bar);transition:width .8s cubic-bezier(.3,1.35,.5,1)}
.fd[data-fd-urgent="1"] .fd-bar i{background:var(--fd-urgent)}
.fd-bar--done i{background:var(--fd-fg2)}
.fd-bar i.fd-fresh{animation:fd-glint 1.2s ease}
@keyframes fd-glint{0%{filter:brightness(1)}30%{filter:brightness(1.8)}100%{filter:brightness(1)}}
.fd-bar--empty{visibility:hidden}
.fd-mod--blank{visibility:hidden}
.fd-recent{font-size:10.5px;line-height:14px;color:var(--fd-fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@container (max-width:196px){.fd-tm .fd-wd{display:none}}

/* countdown digits: always left to right, only the changed digit moves */
.fd-t{display:inline-block;direction:ltr;unicode-bidi:isolate;white-space:nowrap;font-variant-numeric:tabular-nums}
.fd-t small{display:inline-block;font-size:.62em;font-weight:500;opacity:.7;margin-inline:1px 3px}
.fd-t .fd-d{display:inline-block;min-width:.6em;text-align:center}
.fd-t .fd-d.fd-roll{animation:fd-roll .42s cubic-bezier(.2,.7,.2,1)}
@keyframes fd-roll{from{transform:translateY(-55%);filter:blur(3px);opacity:0}to{transform:none;filter:none;opacity:1}}

/* ——— CTA swap (Notify me, Join the waitlist, Sign in) ——— */
.fd-cta{margin-top:8px;width:100%;height:32px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--fd-fg);border-radius:var(--radius-card,6px);
  background:transparent;color:var(--fd-fg);font-size:12px;letter-spacing:.04em;white-space:nowrap;cursor:pointer}
.fd[data-fd-slot="cta"] svg{width:13px;height:13px;flex:none}
.fd[data-fd-slot="cta"]{gap:6px}
.fd[data-fd-brand="gait"].fd-cta,.fd[data-fd-brand="gait"] .fd-cta{border:0;height:auto;width:auto;justify-content:flex-start;padding:0;color:var(--fd-link);font-size:13px;letter-spacing:0}
.fd-cta:focus-visible{outline:2px solid var(--fd-fg);outline-offset:2px}

/* ——— the unlock moment ——— */
.fd-unlocking .fd-med .fd-shackle{transform:translateY(-3.5px) rotate(-24deg)}
.fd-unlocking .fd-med{transform:scale(1.12)}
.fd-unlocking .fd-photo--vit{opacity:0;transition-delay:.45s}
.fd-unlocked .fd-lab{animation:fd-pop .6s cubic-bezier(.3,1.6,.5,1)}
.fd-unlocked .fd-mod{animation:fd-rise .6s ease}
@keyframes fd-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes fd-rise{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}

@media (prefers-reduced-motion:reduce){
  .fd-t .fd-d.fd-roll,.fd-unlocked .fd-lab,.fd-unlocked .fd-mod,.fd-bar i.fd-fresh{animation:none}
  .fd-bar i,.fd-ring .fd-val,.fd-photo--vit,.fd-med,.fd-med .fd-shackle{transition:none}
}
.fd-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fd-w-0{width:0%}
.fd-w-5{width:5%}
.fd-w-10{width:10%}
.fd-w-15{width:15%}
.fd-w-20{width:20%}
.fd-w-25{width:25%}
.fd-w-30{width:30%}
.fd-w-35{width:35%}
.fd-w-40{width:40%}
.fd-w-45{width:45%}
.fd-w-50{width:50%}
.fd-w-55{width:55%}
.fd-w-60{width:60%}
.fd-w-65{width:65%}
.fd-w-70{width:70%}
.fd-w-75{width:75%}
.fd-w-80{width:80%}
.fd-w-85{width:85%}
.fd-w-90{width:90%}
.fd-w-95{width:95%}
.fd-w-100{width:100%}

/* ——— Gait tile (centred column, white media box, Buy pinned to the bottom) ——— */
.plp-card[data-fd-pid] .plp-card__media{position:relative}
.plp-card>.fd-mod{align-self:center;width:100%;max-width:320px;margin-top:0}
/* a caption alone on the row (Sign in to unlock, Units can return, Deal ended) follows the tile's centred column */
.plp-card>.fd-mod .fd-row1:not(:has(.fd-tm)){justify-content:center}
.plp-card>.fd-hid{justify-content:center;font-size:13px;line-height:18px}
/* deal buttons on a Gait tile: one line at 390 ("Notify me", "Join the waitlist"), never a two-line pill */
.fd.plp-card__buy{padding-inline:24px;white-space:nowrap;gap:6px;max-width:100%}
.fd-price[data-fd-brand="gait"] .fd-was{line-height:18px}
.fd-price[data-fd-brand="gait"] .fd-old,.fd-price[data-fd-brand="gait"] .fd-off{font-size:13px}

/* ——— Gait shop rails (homepage carousel cards: centred column, pill button) ——— */
.gait-carousel__card[data-fd-pid] .gait-carousel__card-media{position:relative}
.gait-carousel__fd-price{align-self:stretch;text-align:center}
.gait-carousel__fd-price .fd-now{font-size:16px;line-height:20px;font-weight:600}
.gait-carousel__fd-hid{align-self:center;justify-content:center;font-size:13px;line-height:18px}
.gait-carousel__card-body>.fd-mod{align-self:stretch}
.fd.gait-carousel__cta{border:0;cursor:pointer;gap:6px}
.fd.gait-carousel__cta svg{width:14px;height:14px;flex:none}
/* aligned rails holding a deal: every price row fits the two-row deal price */
.gait-carousel--aligned.fd-rail .gait-carousel__card-body:not(:has(>.fd-hid:not([hidden])))>.gait-carousel__card-price,
.gait-carousel--aligned.fd-rail .gait-carousel__fd-price{min-height:38px}

/* ——— luxury wishlist sheet: the hidden-price row between the price (y51) and the options (y79) ——— */
.fd-wl-hid{position:absolute;inset-inline-start:140px;top:66px}

/* ——— /deals: each section is the theme's own rail, wrapped into a grid ——— */
.fd-deals{max-width:1200px;margin:0 auto;padding:24px 0 48px}
.fd-deals-title{margin:0 16px 8px;font-family:var(--font-display,inherit);font-size:24px;line-height:32px;font-weight:600;color:var(--color-fg,#000)}
.fd-deals-section+.fd-deals-section{margin-top:32px}
.fd-deals [x-ref="rail"]{flex-wrap:wrap;overflow:visible;row-gap:24px}
.fd-deals .gait-carousel__track{flex-wrap:wrap;justify-content:center;overflow:visible;row-gap:40px}
.fd-deals .gait-carousel__nav,.fd-deals .gait-carousel__dots{display:none!important}
.fd-deals-empty{margin:24px 16px;padding:32px 16px;text-align:center;border:1px solid var(--color-border-subtle,#e4e4e7);border-radius:8px;color:var(--color-fg-secondary,#696e79)}
.fd-deals-empty p{margin:0 0 16px}
.fd-deals-home{display:inline-flex;align-items:center;height:40px;padding:0 20px;border-radius:var(--radius-cta,6px);background:var(--color-action,#000);color:var(--color-action-fg,#fff);text-decoration:none;font-weight:600}
.fd-deals--gait .fd-deals-title{text-align:center;font-size:32px;line-height:40px}
@media (min-width:1024px){.fd-deals-title{margin-inline:0}}

/* ——— product page: chip beside the price, terms, option marks ——— */
.fd-photo.fd-photo--inline{position:static;display:inline-flex;max-width:100%;margin-top:8px}
.fd-terms{display:grid;gap:8px;margin-top:12px;font-size:12px;line-height:18px;color:var(--fd-fg2)}
.fd-final{padding:6px 8px;text-align:center;font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:var(--fd-line);color:var(--fd-fg)}
.fd-note{margin:0;color:var(--fd-fg)}
.fd-tc summary{cursor:pointer;width:max-content;text-decoration:underline;text-underline-offset:2px}
.fd-tc-body{margin-top:6px}
.fd-optmark{position:absolute;top:5px;inset-inline-end:5px;z-index:2;width:7px;height:7px;transform:rotate(45deg);background:var(--color-discount,#9b1c1c);box-shadow:0 0 0 1.5px #fff;pointer-events:none}
/* Gait buy box: struck price above the deal price, like the page's own stack */
.fd-gait-pdp{display:flex;flex-direction:column-reverse;align-items:flex-start}
.fd-gait-pdp .fd-was{display:flex;gap:8px;align-items:baseline}
.fd-gait-pdp .fd-old,.fd-gait-pdp .fd-off{font-size:14px}
.fd-gait-sticky .fd-was{display:none}
.pdp-swatch:has(>.fd-optmark),.pdp-chip:has(>.fd-optmark){position:relative}
/* Gait buy box: the price block is a centred 288px column; deal rows take its full width
   (a container-query line would otherwise shrink to nothing in a centring column) */
.pdp-buy-box__price-block>.fd{align-self:stretch}
.pdp-buy-box__price-block>.fd-photo--inline{align-self:flex-start;margin-top:0}
.fd-mod{width:100%}

/* ——— bag and checkout lines (no claimed bar here) ——— */
.fd-cl{margin-top:6px;display:grid;gap:4px;font-size:12px;line-height:16px}
.fd-cl-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
.fd-cl-tag{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:4px;background:var(--fd-acc);color:var(--fd-acc-fg);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.fd[data-fd-brand="gait"] .fd-cl-tag{background:#fff;color:var(--fd-urgent);border:1px solid #f2c9a8;text-transform:none;letter-spacing:0;font-size:11px}
.fd-cl .fd-tm{font-size:12px}
.fd-cl-left{color:var(--fd-fg2)}
.fd[data-fd-urgent="1"] .fd-cl-left{color:var(--fd-urgent)}
.fd-cl-split{margin:0;color:var(--fd-fg2)}
.fd-cl--compact{margin-top:2px;font-size:11px}
.fd-cl--compact .fd-tm{font-size:11px}
.fd-cl-msg{margin-top:6px;padding:6px 8px;border-radius:6px;background:#fff7ed;color:#7c2d12;font-size:12px;line-height:16px}
.fd[data-fd-brand="gait"].fd-cl-msg{background:#fff4e5;color:#7a3d00}

/* ——— Notify me / waitlist: guest sheet and the answer toast ——— */
.fd-sheet-wrap{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.42)}
.fd-sheet{position:relative;width:100%;max-width:420px;background:#fff;color:var(--fd-fg);border-radius:14px 14px 0 0;padding:20px 18px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:0 -8px 30px rgba(0,0,0,.18)}
@media (min-width:768px){.fd-sheet-wrap{align-items:center}.fd-sheet{border-radius:14px}}
.fd-sheet-t{margin:0 32px 12px 0;font-size:16px;font-weight:600;line-height:1.35}
[dir="rtl"] .fd-sheet-t{margin:0 0 12px 32px}
.fd-sheet-x{position:absolute;top:10px;inset-inline-end:10px;width:32px;height:32px;border:0;border-radius:50%;background:var(--fd-line);color:var(--fd-fg);font-size:20px;line-height:1;cursor:pointer}
.fd-sheet-f{display:grid;gap:6px}
.fd-sheet-l{font-size:12px;color:var(--fd-fg2)}
.fd-sheet-i{height:44px;border:1px solid #d4d4d8;border-radius:8px;padding:0 12px;font-size:16px;color:var(--fd-fg);background:#fff}
[dir="rtl"] .fd-sheet-i{text-align:right}
.fd-sheet-i:focus{outline:2px solid var(--fd-acc);outline-offset:1px}
.fd-sheet-e{min-height:16px;margin:2px 0 0;font-size:12px;color:var(--fd-urgent)}
.fd-sheet-b{height:44px;margin-top:4px;border:0;border-radius:8px;background:var(--fd-acc);color:var(--fd-acc-fg);font-size:14px;font-weight:600;letter-spacing:.04em;cursor:pointer}
.fd-sheet-b[aria-busy="true"]{opacity:.6}
.fd-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:2147483001;max-width:min(92vw,420px);padding:12px 16px;border-radius:10px;background:var(--fd-acc);color:var(--fd-acc-fg);font-size:14px;line-height:1.4;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.fd-toast--err{background:#7c2d12;color:#fff}

/* --- Virtual Bundle cards (Trafalgar_VirtualBundles cards.phtml: category strip, carousel widget, popup) --- */
.vb-cards article[data-fd-bid]>:first-child{position:relative}
.fd-vb-price{display:flex;flex-direction:column;align-items:center;text-align:center;font-variant-numeric:tabular-nums}
.fd-vb-was{display:flex;align-items:baseline;justify-content:center;gap:6px;white-space:nowrap}
.fd-vb-hid{justify-content:center;font-size:13px;line-height:18px}
.vb-cards article>.fd-mod{margin-top:0}
.vb-cards article .fd-row1>.fd-muted:only-child{margin-inline:auto}
/* popup: the bundle's chip, hidden-price row and T1 line under the title */
.fd-vbm{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:10px}
.fd-vbm .fd-photo--inline{margin-top:0}
.fd-vbm>.fd-mod{flex-basis:100%;margin-top:0}
.fd-vbm-hid{font-size:12px;line-height:16px}
/* /deals: the bundle strip's heading (product rails bring their own) */
.fd-deals-sub{margin:0 16px 8px;font-family:var(--font-display,inherit);font-size:18px;line-height:26px;font-weight:600;color:var(--color-fg,#000)}
.fd-deals--gait .fd-deals-sub{text-align:center;font-size:32px;line-height:40px}
@media (min-width:1024px){.fd-deals-sub{margin-inline:0}}
