/* ==========================================================================
   Troys Squad - product page
   Loads only on opted-in products (body.ts-pdp). Overrides Woodmart rather
   than replacing it, so variations, addons and add-to-cart keep working.
   ========================================================================== */


/* heart shapes, inlined so nothing is fetched */
body.ts-pdp{
  --ts-heart:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.8 5.6a5 5 0 0 0-7.1 0L12 7.3l-1.7-1.7a5 5 0 1 0-7.1 7.1l1.7 1.7L12 21.2l7.1-6.8 1.7-1.7a5 5 0 0 0 0-7.1z"/></svg>');
  --ts-heart-full:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M20.8 5.6a5 5 0 0 0-7.1 0L12 7.3l-1.7-1.7a5 5 0 1 0-7.1 7.1l1.7 1.7L12 21.2l7.1-6.8 1.7-1.7a5 5 0 0 0 0-7.1z"/></svg>');
}

/* ---------- shell ---------- */
body.ts-pdp .single-product-page,
body.ts-pdp .product-image-summary,
body.ts-pdp .woocommerce-tabs,
body.ts-pdp .related.products,
body.ts-pdp .upsells.products{background:transparent}
body.ts-pdp .product-image-summary-inner{gap:44px}

/* ---------- title, price ---------- */
body.ts-pdp .product_title{
  font-family:var(--ts-display) !important;font-weight:700 !important;
  font-size:clamp(26px,3.4vw,40px) !important;line-height:1.06 !important;
  color:#fff !important;text-transform:none !important;margin-bottom:12px !important}
body.ts-pdp .summary .price,
body.ts-pdp .summary .price .amount,
body.ts-pdp .summary .price bdi{
  font-family:var(--ts-display) !important;font-weight:700 !important;
  color:var(--ts-red-ink) !important;font-size:30px !important;
  font-variant-numeric:tabular-nums}
/* Was-price: white, bold, and given room. It is the number that makes the
   saving land, so it should not look like a footnote. */
body.ts-pdp .summary .price{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  margin:6px 0 18px !important}
body.ts-pdp .summary del,
body.ts-pdp .summary del bdi,
body.ts-pdp .summary del .amount{
  color:#fff !important;opacity:.72;
  font-family:var(--ts-display) !important;font-weight:700 !important;
  font-size:23px !important;
  text-decoration:line-through !important;
  text-decoration-thickness:2px !important;
  text-decoration-color:rgba(255,59,74,.85) !important}
body.ts-pdp .summary ins,
body.ts-pdp .summary ins bdi{text-decoration:none !important}
body.ts-pdp .summary .stock{display:none}

/* the theme's own delivery snippet - our panel replaces it */
body.ts-pdp .delivery-estimate{display:none !important}
body.ts-pdp .woocommerce-product-details__short-description{display:none !important}

/* ---------- buy now / wishlist / compare ---------- */
/* Compare is gone: nobody compares two football shirts on a spec sheet, and
   it was a third button fighting the one that matters. Wishlist becomes an
   icon beside Add to cart. Buy now drops to a secondary, full width. */
body.ts-pdp .wd-compare-btn,
body.ts-pdp .woodmart-compare-btn,
body.ts-pdp .compare-btn{display:none !important}

body.ts-pdp .wd-buy-now-btn,
body.ts-pdp .wd-buy-now,
body.ts-pdp .buy-now-btn{
  width:100% !important;margin-top:10px !important;
  font-family:var(--ts-display) !important;font-weight:600 !important;
  font-size:15px !important;letter-spacing:.08em !important;text-transform:uppercase !important;
  color:#fff !important;
  background:linear-gradient(165deg,rgba(255,255,255,.09),rgba(255,255,255,.055)) !important;
  border:1px solid var(--ts-edge) !important;border-radius:var(--ts-r-pill) !important;
  padding:14px 26px !important;box-shadow:none !important;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
body.ts-pdp .wd-buy-now-btn:hover,
body.ts-pdp .wd-buy-now:hover{
  border-color:rgba(255,59,74,.5) !important;background:rgba(162,4,3,.22) !important;color:#fff !important}

/* wishlist as an icon button sitting next to Add to cart */
body.ts-pdp form.cart{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
body.ts-pdp form.cart .quantity{order:1;margin:0 !important}
body.ts-pdp form.cart .single_add_to_cart_button{order:2;flex:1 1 190px;margin:0 !important}
body.ts-pdp .ts-wish{order:3;flex:0 0 auto;display:block}
body.ts-pdp .ts-wish .wd-wishlist-btn,
body.ts-pdp .ts-wish .wd-action-btn{margin:0 !important}
/* Woodmart renders this as a text link in some header styles, so rather than
   depend on whatever glyph the theme happens to ship, the heart is drawn here
   as a mask. Guaranteed to show, and it fills in when the item is saved. */
body.ts-pdp .ts-wish a{
  position:relative !important;
  width:56px !important;height:56px !important;padding:0 !important;
  display:block !important;overflow:hidden !important;
  border:1px solid var(--ts-edge) !important;border-radius:var(--ts-r-md) !important;
  background:rgba(255,255,255,.055) !important;
  font-size:0 !important;line-height:0 !important;text-indent:-9999px !important;
  transition:border-color .22s ease, background .22s ease}
body.ts-pdp .ts-wish a *{display:none !important}
body.ts-pdp .ts-wish a::after{
  content:"" !important;display:block !important;position:absolute !important;
  inset:0 !important;margin:auto !important;width:23px !important;height:23px !important;
  background-color:#fff !important;
  -webkit-mask:var(--ts-heart) center/contain no-repeat;
          mask:var(--ts-heart) center/contain no-repeat;
  transition:background-color .22s ease}
body.ts-pdp .ts-wish a:hover{
  border-color:rgba(255,59,74,.6) !important;background:rgba(162,4,3,.28) !important}
body.ts-pdp .ts-wish a:hover::after{background-color:var(--ts-red-ink) !important}
body.ts-pdp .ts-wish a:focus-visible{outline:2px solid var(--ts-red-ink);outline-offset:3px}
/* saved state - Woodmart adds .added or .wd-added */
body.ts-pdp .ts-wish a.added::after,
body.ts-pdp .ts-wish a.wd-added::after,
body.ts-pdp .ts-wish .added a::after{
  background-color:var(--ts-red-ink) !important;
  -webkit-mask-image:var(--ts-heart-full);mask-image:var(--ts-heart-full)}
body.ts-pdp .ts-wish a.added,
body.ts-pdp .ts-wish a.wd-added{border-color:rgba(255,59,74,.6) !important;
  background:rgba(162,4,3,.22) !important}
/* the theme also prints these below the form - hide those copies */
body.ts-pdp .summary>.wd-wishlist-btn,
body.ts-pdp .summary>.wd-compare-btn,
body.ts-pdp .summary>.wd-action-btn.wd-wishlist-btn,
body.ts-pdp .summary>.wd-action-btn.wd-compare-btn{display:none !important}

/* ---------- white kit warning ----------
   Sits above the price, not buried in a panel. If someone is going to be
   told they cannot exchange this shirt, they should read it before they
   choose a size, not after the parcel arrives. */
.ts-white-flag{display:flex;align-items:flex-start;gap:11px;
  margin:0 0 16px;padding:13px 15px;border-radius:var(--ts-r-sm);
  border:1px solid rgba(255,200,80,.42);
  background:linear-gradient(160deg,rgba(255,200,80,.14),rgba(255,200,80,.05));
  color:#FFE1A6;font-size:14.5px;line-height:1.5}
.ts-white-flag svg{width:20px;height:20px;flex:0 0 auto;margin-top:1px;color:#FFC850}
.ts-white-flag b{color:#FFC850}

.ts-panel-stop{border-color:rgba(255,200,80,.42) !important}
.ts-panel-stop .ts-panel-ico{color:#FFC850}
.ts-panel-stop[open]{border-color:rgba(255,200,80,.6) !important}
.ts-panel-stop .ts-chev{border-color:#FFC850}
.ts-stop{margin:14px 0 0;padding:13px 15px;border-radius:var(--ts-r-sm);
  background:rgba(255,200,80,.1);border:1px solid rgba(255,200,80,.3);
  color:#FFE1A6;font-size:14.5px;line-height:1.6}
.ts-stop b{color:#FFC850}
.ts-stop-sub{margin:10px 0 0;font-size:14px;line-height:1.6;color:var(--ts-mute)}

/* ---------- patches & printing panel ---------- */
.ts-addon-panel{margin:18px 0}
.ts-addon-body{padding-top:4px}
.ts-addon-body .prad-wrapper,
.ts-addon-body .prad-addons-wrapper{
  margin:0 !important;padding:0 !important;border:0 !important;background:transparent !important}

/* ---------- badges ---------- */
.ts-pdp-badges{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}

/* ---------- gallery ---------- */
body.ts-pdp .woocommerce-product-gallery{border-radius:var(--ts-r-lg);overflow:hidden}
body.ts-pdp .woocommerce-product-gallery__image img{border-radius:var(--ts-r-lg)}
body.ts-pdp .wd-gallery-thumb img,
body.ts-pdp .thumbnails img{border-radius:10px;border:1px solid var(--ts-edge)}

/* ---------- variations / swatches ---------- */
body.ts-pdp .variations label,
body.ts-pdp .variations .label{
  font-family:var(--ts-display) !important;font-weight:600 !important;
  font-size:13px !important;letter-spacing:.14em !important;text-transform:uppercase !important;
  color:var(--ts-mute) !important}
body.ts-pdp .wd-swatch,
body.ts-pdp .wd-swatches-single .wd-swatch{
  background:rgba(255,255,255,.06) !important;border:1px solid var(--ts-edge) !important;
  color:#fff !important;border-radius:10px !important;
  font-family:var(--ts-display);font-weight:600;
  transition:border-color .2s ease, background .2s ease}
body.ts-pdp .wd-swatch:hover{border-color:rgba(255,59,74,.55) !important;background:rgba(162,4,3,.2) !important}
body.ts-pdp .wd-swatch.wd-active,
body.ts-pdp .wd-swatch.selected{
  border-color:var(--ts-red-ink) !important;
  background:linear-gradient(165deg,var(--ts-red-fill-lit),var(--ts-red-fill)) !important;
  color:#fff !important;box-shadow:0 6px 20px rgba(162,4,3,.5) !important}
body.ts-pdp .wd-swatch.wd-disabled{opacity:.3 !important}
body.ts-pdp .reset_variations{color:var(--ts-mute) !important;font-size:13px}

/* ---------- add to cart ---------- */
body.ts-pdp .single_add_to_cart_button,
body.ts-pdp button.single_add_to_cart_button{
  font-family:var(--ts-display) !important;font-weight:700 !important;
  font-size:17px !important;letter-spacing:.08em !important;text-transform:uppercase !important;
  color:#fff !important;border:1px solid rgba(255,59,74,.62) !important;
  border-radius:var(--ts-r-pill) !important;padding:17px 34px !important;
  background:linear-gradient(165deg,var(--ts-red-fill-lit),var(--ts-red-fill)) !important;
  box-shadow:0 10px 32px rgba(162,4,3,.62), inset 0 1px 0 rgba(255,255,255,.32) !important;
  transition:transform .22s cubic-bezier(.32,.72,0,1), box-shadow .22s ease !important}
body.ts-pdp .single_add_to_cart_button:hover{
  transform:translateY(-2px);
  background:linear-gradient(165deg,#E01523,var(--ts-red-fill-lit)) !important;
  box-shadow:0 16px 42px rgba(162,4,3,.78) !important}
body.ts-pdp .quantity input,
body.ts-pdp .quantity .qty{
  background:rgba(0,0,0,.36) !important;border:1px solid var(--ts-edge) !important;
  color:#fff !important;border-radius:10px !important}
body.ts-pdp .quantity .wd-btn-number{color:#fff !important}

/* ---------- product addons: patches, name & number ---------- */
body.ts-pdp .prad-wrapper,
body.ts-pdp .prad-addons-wrapper{
  margin:20px 0 !important;padding:18px !important;
  border:1px solid var(--ts-edge) !important;border-radius:var(--ts-r-md) !important;
  background:var(--ts-ground-2) !important}
body.ts-pdp .prad-label,
body.ts-pdp .prad-block-title,
body.ts-pdp .prad-field-label{
  font-family:var(--ts-display) !important;font-weight:600 !important;
  font-size:13px !important;letter-spacing:.12em !important;text-transform:uppercase !important;
  color:var(--ts-mute) !important}
body.ts-pdp .prad-wrapper input[type="text"],
body.ts-pdp .prad-wrapper input[type="number"],
body.ts-pdp .prad-wrapper select,
body.ts-pdp .prad-wrapper textarea{
  background:rgba(0,0,0,.36) !important;border:1px solid var(--ts-edge) !important;
  color:#fff !important;border-radius:10px !important}
body.ts-pdp .prad-img-switch label,
body.ts-pdp .prad-image-swatch{
  border:1px solid var(--ts-edge) !important;border-radius:10px !important;
  background:rgba(255,255,255,.05) !important}
body.ts-pdp .prad-img-switch input:checked+label,
body.ts-pdp .prad-image-swatch.selected{
  border-color:var(--ts-red-ink) !important;box-shadow:0 0 0 2px rgba(255,59,74,.3) !important}
body.ts-pdp .prad-price,
body.ts-pdp .prad-total{color:var(--ts-red-ink) !important;font-weight:700}

/* ---------- trust strip ---------- */
.ts-pdp-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:18px 0 4px;
  background:var(--ts-edge);border:1px solid var(--ts-edge);border-radius:var(--ts-r-md);overflow:hidden}
.ts-pdp-trust>div{background:var(--ts-ground-2);padding:14px 12px;text-align:center}
.ts-pdp-trust span{display:block;color:var(--ts-red-ink);margin-bottom:7px}
.ts-pdp-trust svg{width:20px;height:20px;display:inline-block}
.ts-pdp-trust b{display:block;font-family:var(--ts-display);font-weight:600;font-size:13px;
  text-transform:uppercase;letter-spacing:.04em;color:#fff}
.ts-pdp-trust i{display:block;font-style:normal;font-size:12px;color:var(--ts-mute);margin-top:2px}

/* ---------- panels ---------- */
.ts-panels{margin:22px 0 0;display:flex;flex-direction:column;gap:8px}
.ts-panel{border:1px solid var(--ts-edge);border-radius:var(--ts-r-md);
  background:var(--ts-ground-2);overflow:hidden;
  transition:border-color .22s cubic-bezier(.32,.72,0,1)}
.ts-panel[open]{border-color:rgba(255,59,74,.45)}
.ts-panel summary{display:flex;align-items:center;gap:12px;padding:15px 18px;
  cursor:pointer;list-style:none}
.ts-panel summary::-webkit-details-marker{display:none}
.ts-panel-ico{flex:0 0 auto;color:var(--ts-red-ink);display:grid;place-items:center}
.ts-panel-ico svg{width:20px;height:20px}
.ts-panel-title{font-family:var(--ts-display);font-weight:600;font-size:15.5px;
  letter-spacing:.04em;color:#fff}
.ts-panel-hint{margin-left:auto;font-size:12.5px;color:var(--ts-mute-2);white-space:nowrap}
.ts-chev{flex:0 0 auto;width:8px;height:8px;margin-left:10px;
  border-right:2px solid var(--ts-mute);border-bottom:2px solid var(--ts-mute);
  transform:rotate(45deg);transition:transform .22s cubic-bezier(.32,.72,0,1)}
.ts-panel[open] .ts-chev{transform:rotate(-135deg);border-color:var(--ts-red-ink)}
.ts-panel-hint+.ts-chev{margin-left:12px}
.ts-panel-body{padding:0 18px 18px;border-top:1px solid var(--ts-edge);margin-top:2px}

.ts-rows{list-style:none;margin:14px 0 0;padding:0}
.ts-rows li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.07);font-size:14.5px}
.ts-rows li:last-child{border-bottom:0}
.ts-rows b{font-family:var(--ts-display);font-weight:600;font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ts-mute)}
.ts-rows i{font-style:normal;color:#fff;text-align:right}

.ts-bullets{margin:14px 0 0;padding-left:18px;color:var(--ts-mute);font-size:14.5px;line-height:1.6}
.ts-bullets li{margin-bottom:7px}
.ts-bullets b{color:#fff}
.ts-note{margin:14px 0 0;font-size:13px;color:var(--ts-mute-2)}
.ts-note a,.ts-sg-open{color:var(--ts-red-ink);text-decoration:none;background:none;
  border:0;padding:0;font:inherit;cursor:pointer}
.ts-note a:hover,.ts-sg-open:hover{text-decoration:underline}

/* ---------- pincode ---------- */
.ts-pin{display:flex;gap:9px;margin:14px 0 0;flex-wrap:wrap}
.ts-pin .ts-field{flex:1 1 170px;max-width:230px;padding:11px 15px;font-size:15px}
.ts-pin-result{margin:10px 0 0;font-size:14px;min-height:1.2em;color:var(--ts-mute)}
.ts-pin-result.is-ok{color:var(--ts-ok)}
.ts-pin-result.is-ok b{color:#fff}
.ts-pin-result.is-err{color:var(--ts-bad)}

/* ---------- tabs & description ---------- */
body.ts-pdp .wc-tabs li a,
body.ts-pdp .wd-nav-tabs li a{
  font-family:var(--ts-display) !important;font-weight:600 !important;
  color:var(--ts-mute) !important;letter-spacing:.06em}
body.ts-pdp .wc-tabs li.active a,
body.ts-pdp .wd-nav-tabs li.active a{color:#fff !important;border-color:var(--ts-red-ink) !important}
body.ts-pdp .woocommerce-Tabs-panel{color:var(--ts-mute);font-size:16px;line-height:1.7}
body.ts-pdp .woocommerce-Tabs-panel h2,
body.ts-pdp .woocommerce-Tabs-panel h3{color:#fff;font-family:var(--ts-display)}
body.ts-pdp .shop_attributes th{color:var(--ts-mute) !important}
body.ts-pdp .shop_attributes td{color:#fff !important}

/* ---------- related ---------- */
body.ts-pdp .related.products>h2,
body.ts-pdp .upsells.products>h2{
  font-family:var(--ts-display) !important;font-weight:700 !important;
  text-transform:uppercase !important;color:#fff !important;letter-spacing:.04em}
body.ts-pdp .product-grid-item .wd-entities-title a{color:#fff !important}
body.ts-pdp .product-grid-item .price,
body.ts-pdp .product-grid-item .price bdi{color:var(--ts-red-ink) !important}
body.ts-pdp .product-grid-item{background:var(--ts-ground-2);border:1px solid var(--ts-edge);
  border-radius:var(--ts-r-md);overflow:hidden;padding-bottom:12px}

/* ---------- breadcrumb ---------- */
body.ts-pdp .woocommerce-breadcrumb,
body.ts-pdp .woocommerce-breadcrumb a{color:var(--ts-mute-2) !important;font-size:13px}
body.ts-pdp .woocommerce-breadcrumb a:hover{color:#fff !important}

/* ==========================================================
   The 3pm dispatch counter
   Green because it is the one number on the page that is
   counting down on the customer. Tabular figures so the pill
   does not twitch as the digits change every second.
   ========================================================== */
#tsCut{
  display:inline-block;margin:0 2px;padding:2px 9px;
  border-radius:var(--ts-r-pill);
  background:rgba(57,217,138,.16);
  border:1px solid rgba(57,217,138,.45);
  color:#39D98A;
  font-family:var(--ts-display);font-weight:700;font-size:13.5px;
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1}
.ts-panel-body .ts-note:first-of-type{color:var(--ts-mute)}

/* ==========================================================
   Mobile
   The desktop sizes were carrying straight through to a 390px
   screen, so everything read one size too large and the trust
   strip stacked into three tall rows. Scale the buy box down
   and put that strip back across.
   ========================================================== */
@media(max-width:768px){

  /* ---- title, price ---- */
  body.ts-pdp .product_title{font-size:22px !important;line-height:1.14 !important;
    margin-bottom:8px !important}
  body.ts-pdp .summary .price,
  body.ts-pdp .summary .price .amount,
  body.ts-pdp .summary .price bdi{font-size:24px !important}
  body.ts-pdp .summary del,
  body.ts-pdp .summary del bdi,
  body.ts-pdp .summary del .amount{font-size:16px !important}

  /* ---- badges & white-kit flag ---- */
  .ts-pdp-badges{gap:6px;margin:0 0 12px}
  .ts-white-flag{padding:11px 12px;gap:9px;font-size:13px;margin:0 0 12px}
  .ts-white-flag svg{width:18px;height:18px}

  /* ---- size swatches ---- */
  body.ts-pdp .variations label,
  body.ts-pdp .variations .label{font-size:12px !important}
  body.ts-pdp .wd-swatch,
  body.ts-pdp .wd-swatches-single .wd-swatch{
    min-width:44px !important;min-height:40px !important;
    padding:0 10px !important;font-size:13.5px !important;border-radius:9px !important}

  /* ---- buy box: quantity + add to cart + heart on one line ---- */
  body.ts-pdp form.cart{gap:8px}
  body.ts-pdp form.cart .quantity{flex:0 0 92px;order:1}
  body.ts-pdp .quantity input,
  body.ts-pdp .quantity .qty{height:48px !important;font-size:15px !important}
  body.ts-pdp form.cart .single_add_to_cart_button{
    order:2;flex:1 1 0;min-width:0;
    min-height:48px !important;padding:0 16px !important;
    font-size:14px !important;letter-spacing:.06em !important}
  body.ts-pdp .ts-wish{order:3;flex:0 0 48px}
  body.ts-pdp .ts-wish a{width:48px !important;height:48px !important}
  body.ts-pdp .wd-buy-now-btn,
  body.ts-pdp .wd-buy-now,
  body.ts-pdp .buy-now-btn{
    padding:13px 20px !important;font-size:14px !important;margin-top:8px !important}

  /* ---- every dropdown and field in the buy column ---- */
  body.ts-pdp .summary select,
  body.ts-pdp .variations select,
  body.ts-pdp .summary input[type="text"],
  body.ts-pdp .summary input[type="number"],
  body.ts-pdp .summary input[type="email"],
  body.ts-pdp .prad-wrapper input[type="text"],
  body.ts-pdp .prad-wrapper input[type="number"],
  body.ts-pdp .prad-wrapper select,
  body.ts-pdp .prad-wrapper textarea{
    min-height:46px !important;height:auto !important;
    font-size:15px !important;padding:0 12px !important;
    max-width:100% !important;box-sizing:border-box !important}
  body.ts-pdp .summary textarea,
  body.ts-pdp .prad-wrapper textarea{padding:12px !important;line-height:1.45 !important}
  /* 16px stops iOS Safari zooming the page when a field is focused */
  body.ts-pdp .summary select:focus,
  body.ts-pdp .summary input:focus,
  body.ts-pdp .summary textarea:focus{font-size:16px !important}
  body.ts-pdp .ts-btn,
  body.ts-pdp .ts-sg-open{min-height:44px}
  body.ts-pdp .prad-label,
  body.ts-pdp .prad-block-title,
  body.ts-pdp .prad-field-label{font-size:12.5px !important}

  /* ---- trust strip: three across, not three stacked ---- */
  .ts-pdp-trust{grid-template-columns:repeat(3,1fr);margin:14px 0 4px}
  .ts-pdp-trust>div{padding:10px 5px}
  .ts-pdp-trust span{margin-bottom:5px}
  .ts-pdp-trust svg{width:17px;height:17px}
  .ts-pdp-trust b{font-size:10.5px;letter-spacing:.02em;line-height:1.22;
    text-transform:uppercase;hyphens:auto}
  .ts-pdp-trust i{font-size:9.5px;line-height:1.25;margin-top:1px}

  /* ---- panels ---- */
  .ts-panels{margin:18px 0 0;gap:7px}
  .ts-panel summary{padding:13px 14px;gap:10px}
  .ts-panel-title{font-size:14.5px}
  .ts-panel-ico svg{width:18px;height:18px}
  .ts-panel-hint{display:none}
  .ts-panel-body{padding:0 14px 16px}
  .ts-rows li{font-size:13.5px;padding:8px 0;gap:12px}
  .ts-rows b{font-size:11.5px;letter-spacing:.09em}
  .ts-bullets li{font-size:13.5px}
  .ts-note{font-size:12.5px;line-height:1.5}
  #tsCut{font-size:12.5px;padding:2px 8px}

  /* ---- pincode ---- */
  .ts-pin .ts-field{min-height:46px;font-size:15px}
  .ts-pin .ts-btn{min-height:46px}
}

/* Narrow phones: the trust labels are the first thing to break. */
@media(max-width:400px){
  body.ts-pdp .product_title{font-size:20px !important}
  .ts-pdp-trust>div{padding:9px 3px}
  .ts-pdp-trust b{font-size:9.5px}
  .ts-pdp-trust i{font-size:9px}
  body.ts-pdp form.cart .quantity{flex:0 0 82px}
  body.ts-pdp form.cart .single_add_to_cart_button{font-size:13px !important;
    padding:0 10px !important}
}

/* ==========================================================
   THE CLIPPING BUG
   Woodmart puts the buy column in a CSS grid cell
   (.summary.wd-grid-col). A grid item's default min-width is
   auto, which means it can never be narrower than its widest
   child - and one child is a <table class="variations">, whose
   min-content width on a five-size product is wider than a
   phone. So the whole column stretched past the screen edge
   and took Add to cart, the trust strip and the size note with
   it. min-width:0 lets the column obey the grid track.
   ========================================================== */
body.ts-pdp .product-image-summary,
body.ts-pdp .product-image-summary-inner,
body.ts-pdp .summary,
body.ts-pdp .summary.wd-grid-col,
body.ts-pdp .summary-inner,
body.ts-pdp form.cart,
body.ts-pdp form.cart > *,
body.ts-pdp .single_variation_wrap,
body.ts-pdp .ts-panels,
body.ts-pdp .ts-panel,
body.ts-pdp .ts-pdp-trust{min-width:0;max-width:100%}
body.ts-pdp .ts-pdp-trust > div{min-width:0;overflow-wrap:anywhere}
body.ts-pdp table.variations{width:100%;max-width:100%;table-layout:fixed}
body.ts-pdp .ts-size-note,
body.ts-pdp .ts-note,
body.ts-pdp .ts-bullets li{max-width:100%;overflow-wrap:anywhere}

@media(max-width:768px){

  /* The variations table stops being a table: label on its own
     line, swatches wrapping underneath. Nothing can force width. */
  body.ts-pdp table.variations,
  body.ts-pdp table.variations tbody,
  body.ts-pdp table.variations tr,
  body.ts-pdp table.variations th,
  body.ts-pdp table.variations td{
    display:block !important;width:auto !important;max-width:100% !important;
    padding:0 !important;border:0 !important}
  body.ts-pdp table.variations tr + tr{margin-top:14px}
  body.ts-pdp table.variations th.label{margin-bottom:8px}
  body.ts-pdp .wd-swatches-product{display:flex !important;flex-wrap:wrap;gap:8px}
  body.ts-pdp .wd-reset-var{margin-top:8px}

  /* The photo was eating the whole screen before a single word
     of the product could be read. Cap it and let it letterbox. */
  body.ts-pdp .woocommerce-product-gallery{margin-bottom:12px !important}
  body.ts-pdp .woocommerce-product-gallery__image,
  body.ts-pdp .wd-carousel-item{max-height:56vh}
  body.ts-pdp .woocommerce-product-gallery__image img,
  body.ts-pdp .wd-carousel-item img{
    max-height:56vh !important;object-fit:contain !important}
  body.ts-pdp .wd-gallery-thumb img,
  body.ts-pdp .thumbnails img{max-height:64px !important}

  /* breathing room, since the column is no longer overflowing */
  body.ts-pdp .summary-inner{padding:0 !important}
}
/* the overflow reporter, only with ?tsdiag=1 */
#ts-diag{position:fixed;left:0;right:0;bottom:0;z-index:2147483647;
  max-height:52vh;overflow:auto;padding:10px 12px;
  background:rgba(0,0,0,.94);border-top:2px solid #39D98A;
  color:#fff;font:11px/1.45 ui-monospace,Menlo,monospace}
#ts-diag b{color:#39D98A}
#ts-diag div{padding:3px 0;border-bottom:1px solid rgba(255,255,255,.12);
  overflow-wrap:anywhere}

/* ==========================================================
   Mobile pass 3 - WIDTH only.

   Heights stay as they were. The bug was never vertical: the
   buy column and the gallery were wider than the phone, so
   Add to cart, the trust strip and the size note ran off the
   right edge and the photo sat pinned to the right.

   Woodmart lays the gallery and the summary out as two CSS
   grid cells. On a phone that grid is dropped entirely and the
   two become plain full-width blocks, which no child can
   stretch. Everything in the chain is pinned to 100% and told
   to wrap rather than widen.
   ========================================================== */

/* The theme's own size guide button - ours lives inside Size & fit,
   and two of them on one page is one too many. */
body.ts-pdp .wd-sizeguide-btn,
body.ts-pdp .wd-size-guide-btn,
body.ts-pdp .size-guide-btn{display:none !important}

@media(max-width:768px){

  /* ---- nothing may exceed the screen ---- */
  html,body.ts-pdp{overflow-x:hidden;max-width:100%}
  body.ts-pdp .container,
  body.ts-pdp .product-image-summary,
  body.ts-pdp .product-image-summary-inner,
  body.ts-pdp .product-images,
  body.ts-pdp .summary,
  body.ts-pdp .summary-inner,
  body.ts-pdp .woocommerce-product-gallery,
  body.ts-pdp .wd-single-gallery,
  body.ts-pdp .wd-gallery-images,
  body.ts-pdp .wd-gallery-thumb,
  body.ts-pdp .wd-carousel,
  body.ts-pdp .wd-carousel-inner,
  body.ts-pdp .wd-carousel-item,
  body.ts-pdp form.cart,
  body.ts-pdp form.cart > *,
  body.ts-pdp table.variations,
  body.ts-pdp .ts-panels,
  body.ts-pdp .ts-panel,
  body.ts-pdp .ts-addon-panel,
  body.ts-pdp .ts-pdp-trust,
  body.ts-pdp .ts-pdp-badges,
  body.ts-pdp .prad-wrapper,
  body.ts-pdp .prad-addons-wrapper{
    max-width:100% !important;min-width:0 !important;
    box-sizing:border-box !important}

  /* ---- drop the two-column grid: plain stacked blocks ---- */
  body.ts-pdp .product-image-summary-inner{
    display:block !important;width:100% !important}
  body.ts-pdp .product-image-summary-inner > .wd-grid-col{
    display:block !important;width:100% !important;max-width:100% !important;
    margin:0 0 18px !important;padding:0 !important}

  /* ---- the photo comes back to the left edge ---- */
  body.ts-pdp .woocommerce-product-gallery{
    margin-inline:0 !important;padding-inline:0 !important;
    justify-content:flex-start !important}
  body.ts-pdp .thumbs-position-left{flex-wrap:wrap !important}
  body.ts-pdp .thumbs-position-left.wd-has-thumb .wd-gallery-images{
    flex:1 1 100% !important;max-width:100% !important;align-self:auto !important}
  body.ts-pdp .thumbs-position-left .wd-gallery-thumb{
    order:1 !important;flex:1 1 100% !important;max-width:100% !important;
    height:auto !important;position:static !important}
  body.ts-pdp .thumbs-position-left .wd-gallery-thumb .wd-carousel-inner{
    position:static !important;inset:auto !important}
  body.ts-pdp .thumbs-position-left .wd-gallery-thumb .wd-carousel-wrap{
    flex-direction:row !important}
  body.ts-pdp .thumbs-position-left .wd-gallery-thumb .wd-carousel-item{
    height:auto !important;width:auto !important}
  body.ts-pdp .woocommerce-product-gallery__image img,
  body.ts-pdp .wd-carousel-item img{
    width:100% !important;max-width:100% !important;margin:0 !important}

  /* ---- text wraps, it never widens ---- */
  body.ts-pdp .summary p,
  body.ts-pdp .summary li,
  body.ts-pdp .summary h1,
  body.ts-pdp .ts-size-note,
  body.ts-pdp .ts-note,
  body.ts-pdp .ts-stop,
  body.ts-pdp .ts-stop-sub,
  body.ts-pdp .ts-white-flag{
    max-width:100% !important;overflow-wrap:anywhere;word-break:normal}
  body.ts-pdp .ts-rows li{flex-wrap:wrap}
  body.ts-pdp .ts-rows i{text-align:left}
  body.ts-pdp .ts-pdp-trust > div{min-width:0;overflow:hidden}

  /* the add-to-cart row: quantity fixed, button takes the rest, heart last */
  body.ts-pdp form.cart{flex-wrap:wrap !important}
  body.ts-pdp form.cart .single_add_to_cart_button{
    flex:1 1 120px !important;min-width:0 !important;width:auto !important}
}