/* TDL Store Features — swatches, badges, cart drawer, filters, popup. Uses the theme tokens. */

/* ---- PDP colour swatches (Shopify: COLOR ● ●) ---- */
.tdl-swatches{display:flex;align-items:center;gap:14px;margin:4px 0 20px;flex-wrap:wrap}
.tdl-swatches__label{font-family:var(--tdl-sans,sans-serif);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tdl-mut,#7d7466)}
.tdl-swatches__list{display:flex;gap:10px;flex-wrap:wrap}
.tdl-swatch{width:24px;height:24px;border-radius:50%;display:block;border:1px solid rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px #fff;transition:transform .15s ease}
.tdl-swatch:hover{transform:scale(1.1)}
.tdl-swatch--active{outline:1.5px solid var(--tdl-ink-2,#1c1a17);outline-offset:2px;pointer-events:none}

/* ---- Card badges ---- */
.woocommerce ul.products li.product .onsale{position:absolute;top:10px;left:10px;right:auto;margin:0;min-height:0;min-width:0;line-height:1;padding:5px 8px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;z-index:2}
.tdl-badge{position:absolute;top:10px;right:10px;z-index:2;background:var(--tdl-bg,#FAF7F1);color:var(--tdl-ink,#23201B);font-family:var(--tdl-sans,sans-serif);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding:5px 8px;line-height:1}
.tdl-badge--out{background:var(--tdl-ink,#23201B);color:var(--tdl-cream,#F6F1E8)}
/* related products: no "Select options" buttons (Shopify shows none) */
.single-product .related ul.products li.product .button,
.single-product .upsells ul.products li.product .button,
.single-product .related .screen-reader-text{display:none!important}

/* ---- Cart drawer ---- */
.tdl-drawer{position:fixed;inset:0;z-index:9990;pointer-events:none}
.tdl-drawer__scrim{position:absolute;inset:0;background:rgba(23,11,2,.35);opacity:0;transition:opacity .25s ease}
.tdl-drawer__panel{position:absolute;top:0;right:0;height:100%;width:min(420px,100%);background:var(--tdl-bg,#FAF7F1);box-shadow:-10px 0 40px rgba(0,0,0,.08);transform:translateX(100%);transition:transform .32s cubic-bezier(.22,.61,.36,1);display:flex;flex-direction:column}
.tdl-drawer.is-open{pointer-events:auto}
.tdl-drawer.is-open .tdl-drawer__scrim{opacity:1}
.tdl-drawer.is-open .tdl-drawer__panel{transform:none}
.tdl-drawer__inner{display:flex;flex-direction:column;height:100%;font-family:var(--tdl-sans,sans-serif);color:var(--tdl-ink,#23201B)}
.tdl-drawer__head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--tdl-line,#d8d0c2)}
.tdl-drawer__title{font-family:var(--tdl-serif,serif);font-size:1.35rem}
.tdl-drawer__title em{font-style:normal;font-family:var(--tdl-sans,sans-serif);font-size:.8rem;color:var(--tdl-mut,#7d7466);letter-spacing:.06em}
.tdl-drawer__close{background:none;border:0;font-size:28px;line-height:1;cursor:pointer;color:inherit;padding:0 4px}
.tdl-drawer__items{list-style:none;margin:0;padding:8px 24px;overflow:auto;flex:1}
.tdl-drawer__item{display:grid;grid-template-columns:76px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--tdl-line,#d8d0c2);align-items:start}
.tdl-drawer__img img{width:76px;height:95px;object-fit:cover;background:#efe9df;display:block}
.tdl-drawer__meta{display:flex;flex-direction:column;gap:5px;min-width:0}
.tdl-drawer__name{color:inherit;text-decoration:none;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.tdl-drawer__var,.tdl-drawer__qty{font-size:12.5px;color:var(--tdl-mut,#7d7466)}
.tdl-drawer__qty .amount{color:var(--tdl-ink,#23201B)}
.tdl-drawer__rm{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tdl-mut,#7d7466)!important;text-decoration:underline;background:none!important;width:auto!important;height:auto!important;line-height:1.4!important;border-radius:0!important}
.tdl-drawer__foot{padding:18px 24px 24px;border-top:1px solid var(--tdl-line,#d8d0c2);display:flex;flex-direction:column;gap:12px}
.tdl-drawer__ship{margin:0;font-size:12px;letter-spacing:.04em;color:var(--tdl-mut,#7d7466);text-align:center}
.tdl-drawer__sub{display:flex;justify-content:space-between;font-size:14px;font-weight:500}
.tdl-drawer__btn{display:block;text-align:center;padding:15px 18px;border:1px solid var(--tdl-near-black,#170B02);color:var(--tdl-near-black,#170B02);text-decoration:none;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;border-radius:999px}
.tdl-drawer__btn--dark{background:var(--tdl-near-black,#170B02);color:var(--tdl-cream,#F6F1E8)!important}
.tdl-drawer__link{text-align:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tdl-ink,#23201B)}
.tdl-drawer__empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px}
.tdl-drawer.is-loading .tdl-drawer__panel::after{content:"";position:absolute;inset:0;background:rgba(250,247,241,.6)}
html.tdl-lock{overflow:hidden}
.single-product form.cart .single_add_to_cart_button.is-loading{opacity:.55;pointer-events:none}

/* ---- Shop filters ---- */
.tdl-filters{display:flex;align-items:center;gap:22px;flex-wrap:wrap;float:left;margin:-6px 40px 18px 0;font-family:var(--tdl-sans,sans-serif)}
.tdl-filter{position:relative}
.tdl-filter summary{list-style:none;cursor:pointer;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tdl-ink,#23201B);padding:6px 16px 6px 0;position:relative}
.tdl-filter summary::-webkit-details-marker{display:none}
.tdl-filter summary::after{content:"";position:absolute;right:2px;top:50%;width:6px;height:6px;border-right:1.2px solid currentColor;border-bottom:1.2px solid currentColor;transform:translateY(-70%) rotate(45deg)}
.tdl-filter summary em{font-style:normal;color:var(--tdl-mut,#7d7466)}
.tdl-filter__panel{position:absolute;z-index:20;top:calc(100% + 8px);left:0;min-width:220px;background:var(--tdl-bg,#FAF7F1);border:1px solid var(--tdl-line,#d8d0c2);padding:16px;display:flex;flex-direction:column;gap:10px;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.tdl-filter__panel label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--tdl-ink,#23201B)}
.tdl-filter__panel--price input{width:110px;padding:8px;border:1px solid var(--tdl-line,#d8d0c2);background:#fff;font:inherit}
.tdl-filter__panel button{align-self:flex-start;margin-top:4px;background:var(--tdl-near-black,#170B02);color:var(--tdl-cream,#F6F1E8);border:0;padding:9px 18px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;border-radius:999px}
.tdl-filters__clear{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--tdl-mut,#7d7466)}
@media (max-width:749px){.tdl-filters{float:none;width:100%;gap:16px}.tdl-filter__panel{min-width:200px}}

/* ---- Signup popup ---- */
.tdl-pop{position:fixed;inset:0;z-index:9995;display:flex;align-items:center;justify-content:center;padding:16px;pointer-events:none;opacity:0;transition:opacity .3s ease}
.tdl-pop.is-open{pointer-events:auto;opacity:1}
.tdl-pop__scrim{position:absolute;inset:0;background:rgba(23,11,2,.45)}
.tdl-pop__box{position:relative;width:min(420px,100%);background:var(--tdl-bg,#FAF7F1);padding:40px 32px 28px;text-align:center;font-family:var(--tdl-sans,sans-serif);color:var(--tdl-ink,#23201B)}
.tdl-pop__close{position:absolute;top:10px;right:14px;background:none;border:0;font-size:26px;cursor:pointer;color:inherit}
.tdl-pop h3{font-family:var(--tdl-serif,serif);font-weight:500;font-size:1.9rem;margin:0 0 10px;text-transform:none}
.tdl-pop p{font-size:14px;line-height:1.6;color:var(--tdl-mut,#7d7466);margin:0 0 22px}
.tdl-pop__form{display:flex;flex-direction:column;gap:10px}
.tdl-pop__form input{padding:14px;border:1px solid var(--tdl-line,#d8d0c2);background:#fff;font:inherit;font-size:14px}
.tdl-pop__form button{padding:14px;border:0;background:var(--tdl-near-black,#170B02);color:var(--tdl-cream,#F6F1E8);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;border-radius:999px}
.tdl-pop small{display:block;margin-top:16px;font-size:11px;line-height:1.5;color:var(--tdl-mut,#7d7466)}
.tdl-pop small a{color:inherit}
.tdl-sub-msg{display:block;margin-top:8px;font-size:12px;letter-spacing:.04em;color:inherit;opacity:.85}

/* logged-in admin bar offset */
.admin-bar .tdl-drawer__panel{top:32px;height:calc(100% - 32px)}
@media (max-width:782px){.admin-bar .tdl-drawer__panel{top:46px;height:calc(100% - 46px)}}

/* PDP: no sale badge (Shopify shows only the struck-through price) */
.single-product div.product > .onsale{display:none!important}


/* ---- Checkout fixes (WooCommerce 11.x markup) ------------------------- */
body.woocommerce-checkout .woocommerce-billing-fields select,
body.woocommerce-checkout .woocommerce-shipping-fields select,
body.woocommerce-checkout #billing_country,
body.woocommerce-checkout #billing_state{
  width:100%!important;max-width:100%!important;font-weight:400!important;
  min-height:50px!important;height:50px!important;
}
body.woocommerce-checkout .select2-container{
  width:100%!important;border:0!important;background:none!important;
  padding:0!important;height:auto!important;min-height:0!important;border-radius:0!important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single{
  display:flex!important;align-items:center!important;
  height:50px!important;min-height:50px!important;padding:0 36px 0 14px!important;
  border:1px solid var(--co-line,#8a8a8a)!important;border-radius:12px!important;background:#fff!important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{
  padding:0!important;line-height:1.2!important;color:var(--co-ink,#303030)!important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow{
  height:48px!important;right:10px!important;
}
@media(min-width:900px){
  body.woocommerce-checkout #order_review{padding:8px 0 8px 56px!important;}
}

/* match the country select's text inset to the text inputs */
body.woocommerce-checkout #billing_country{padding:13px 14px 13px 16px!important;} /* country text inset */


/* ---- Mobile fixes (phones are most of the traffic) ------------------- */
@media (max-width:749px){
  /* iOS Safari zooms the page whenever a tapped field is under 16px */
  body.woocommerce-checkout input.input-text,
  body.woocommerce-checkout textarea,
  body.woocommerce-checkout select,
  body.woocommerce-cart input.input-text,
  .tdl-cf input, .tdl-cf textarea,
  .hsearch input[type=search],
  .tdl-pop__form input,
  .tdlx-sub input, .tdlf__sub input{font-size:16px!important;}
  /* header: "BAG (0)" was wrapping onto two lines */
  .tdlh__util a, .tdlx-nav__util a, .tdl-cohead__bag{white-space:nowrap;}
  /* catalog toolbar: result count + sort share one line instead of stacking */
  .woocommerce .woocommerce-result-count{max-width:50%;font-size:10.5px;margin:0 0 6px;line-height:1.3;}
  .woocommerce .woocommerce-ordering{max-width:48%;margin:0 0 6px;}
  .woocommerce .woocommerce-ordering select.orderby{font-size:10.5px;max-width:100%;}
}

/* ---- one product per row on phones (customer request) --------------- */
@media (max-width:749px){
  .woocommerce ul.products,
  .tax-product_cat .tdl-woo-wrap ul.products,
  .post-type-archive-product .tdl-woo-wrap ul.products,
  .single-product .related ul.products,
  .single-product .upsells ul.products{grid-template-columns:1fr!important;gap:30px!important;}
  .woocommerce ul.products li.product img{width:100%;height:auto;}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:12px;}
}

/* ---- Card gallery + quick add --------------------------------------- */
.woocommerce ul.products li.product{position:relative}
/* The original image stays in the flow and keeps the card's height; the
   other shots are layered over it, so the title below never moves. */
.tdl-cardmedia{position:relative}
.tdl-cardmedia .tdl-cardslide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease;pointer-events:none}
.tdl-cardmedia .tdl-cardslide.is-active{opacity:1}
.tdl-carddots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px;z-index:2;pointer-events:none}
.tdl-carddots span{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 2px rgba(0,0,0,.3)}
.tdl-carddots span.is-active{background:#fff}
.tdl-qa{margin:8px 0 0}
.tdl-qa__open{background:none;border:0;padding:0;cursor:pointer;font-family:var(--tdl-sans,sans-serif);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tdl-mut,#7d7466);text-decoration:underline;text-underline-offset:3px}
.tdl-qa__open:hover,.tdl-qa__open.is-open{color:var(--tdl-ink,#23201B)}
.tdl-qa__sizes{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tdl-qa__size{min-width:40px;padding:9px 10px;border:1px solid var(--tdl-line,#d8d0c2);background:#fff;cursor:pointer;font-family:var(--tdl-sans,sans-serif);font-size:11px;letter-spacing:.08em;color:var(--tdl-ink,#23201B);line-height:1}
.tdl-qa__size:hover{border-color:var(--tdl-ink,#23201B)}
.tdl-qa__size.is-out{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.tdl-qa__size.is-busy{opacity:.5}
@media (max-width:749px){
  .tdl-qa__open{font-size:11px}
  .tdl-qa__size{min-width:46px;padding:11px 12px;font-size:12px}
  .tdl-carddots span{width:6px;height:6px}
}

/* quick-add button sits on its own line under the price */
.tdl-qa__open{display:inline-block;margin-top:8px}
.tdl-qa__open.is-busy{opacity:.5;pointer-events:none}

/* ---- Bigger homepage product rows on large screens ------------------ */
/* The grid is already 4 fluid columns; it only looked small because the
   section was capped at 1280px, leaving huge empty margins on wide monitors. */
@media (min-width:1400px){
  .tdlx-sec{max-width:min(1580px,93vw);}      /* homepage rows use the screen */
}
@media (min-width:1800px){
  .tdlx-sec{max-width:min(1720px,92vw);}
}

/* ---- Live stock badge ------------------------------------------------ */
.tdl-stock{position:absolute;top:8px;left:8px;z-index:3;display:inline-block;
  background:rgba(250,247,241,.86);color:var(--tdl-mut,#7d7466);font-family:var(--tdl-sans,sans-serif);
  font-size:7.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:3px 6px;line-height:1;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
/* a display rule beats the hidden attribute, so say it explicitly */
.tdl-stock[hidden],.tdl-stock-line[hidden]{display:none!important}
.tdl-stock--out{background:rgba(35,32,27,.78);color:var(--tdl-cream,#F6F1E8)}
.woocommerce ul.products li.product .onsale{left:auto;right:10px}
.tdl-stock-line{margin:0 0 16px;display:flex;align-items:center;gap:8px;font-family:var(--tdl-sans,sans-serif);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tdl-ink,#23201B);font-weight:500}
.tdl-stock-line::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tdl-ink,#23201B);
  animation:tdlpulse 1.8s ease-in-out infinite}
.tdl-stock-line.tdl-stock--out{color:var(--tdl-ink,#23201B)}
.tdl-stock-line.tdl-stock--out::before{background:var(--tdl-ink,#23201B);animation:none}
@keyframes tdlpulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (max-width:749px){
  .tdl-stock{font-size:8px;padding:3px 6px;top:9px;left:9px}
  .tdl-stock-line{font-size:12px}
}
@media (prefers-reduced-motion:reduce){.tdl-stock-line::before{animation:none}}

/* homepage card badge + quick add sit in the same positions as the listing */
.tdlx-card{position:relative}
.tdlx-card .tdlx-card__img{position:relative}
.tdlx-card .tdl-stock{top:9px;left:9px}
.tdlx-card .tdl-qa__open{display:inline-block;margin-top:6px}