/* ============================================
   TEEZZY — Page-specific styles
   ============================================ */

/* Prevent wide inner content (tables, long text) from stretching these
   grid layouts past the viewport on mobile — grid/flex items default to
   a min-width based on their content's intrinsic size, which a nested
   nowrap table can blow past the screen edge unless reset to 0 here. */
.account-layout > *,
.catalogue-layout > *,
.product-detail > *,
.checkout-layout > *,
.contact-layout > *{ min-width:0; }

/* ---------- Imagery (real photos with graceful placeholder fallback) ---------- */
.ph-img{
  background: linear-gradient(135deg, var(--color-bg-alt), var(--color-bg-elevated));
  display:flex; align-items:center; justify-content:center;
  color: var(--color-text-faint);
  font-family: var(--font-heading);
  font-size: .95rem;
  letter-spacing:.08em;
  text-align:center;
  overflow:hidden;
}
.ph-img img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- Home: feature strip ---------- */
.feature-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media (max-width:800px){ .feature-strip{ grid-template-columns:1fr; } }
.feature-strip .card h3{ font-size:1.6rem; margin-bottom:.6rem; }

/* ---------- Home: split promo ---------- */
.split-promo{ display:grid; grid-template-columns:1fr 1fr; min-height:60vh; }
.split-promo__panel{ display:flex; flex-direction:column; justify-content:center; padding: 3.5rem; }
.split-promo__panel.dark{ background: var(--color-bg-alt); }
@media (max-width: 800px){ .split-promo{ grid-template-columns:1fr; } }

/* ---------- Catalogue ---------- */
.catalogue-layout{ display:grid; grid-template-columns: 260px 1fr; gap: 2.5rem; align-items:start; }
@media (max-width: 900px){ .catalogue-layout{ grid-template-columns:1fr; } }
.filter-group{ margin-bottom: 2rem; }
.filter-group h4{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1rem; }
.filter-option{ display:flex; align-items:center; gap:.6rem; font-size:.88rem; color: var(--color-text-muted); margin-bottom:.65rem; }
.filter-option input{ width:auto; }
.swatch{ width:20px; height:20px; border-radius:50%; border:1px solid var(--color-border-strong); display:inline-block; cursor:pointer; }
.toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.75rem; flex-wrap:wrap; gap:1rem; }
.mobile-filter-toggle{ display:none; }
@media (max-width:900px){ .mobile-filter-toggle{ display:inline-flex; } .filter-sidebar{ display:none; } .filter-sidebar.is-open{ display:block; } }
.catalogue-search{
  background: var(--input-bg); border:1px solid var(--color-border); color: var(--color-text);
  padding:.6rem 1rem; font-size:.82rem; border-radius: var(--radius-sm); flex:1; min-width:160px; max-width:260px;
}
.catalogue-search:focus{ outline:none; border-color: var(--color-accent); }
.search-notice a{ color: var(--color-accent); text-decoration:underline; }

/* ---------- Product Detail ---------- */
.product-detail{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 3.5rem; }
@media (max-width: 900px){ .product-detail{ grid-template-columns:1fr; } }
.gallery-main{ aspect-ratio:4/5; margin-bottom:1rem; }
.gallery-thumbs{ display:grid; grid-template-columns:repeat(5,1fr); gap:.6rem; }
.gallery-thumbs .ph-img{ aspect-ratio:3/4; cursor:pointer; border:1px solid transparent; font-size:.65rem; }
.gallery-thumbs .ph-img.is-active{ border-color: var(--color-accent); }
@media (max-width:480px){ .gallery-thumbs{ grid-template-columns:repeat(4,1fr); gap:.4rem; } }
@media (max-width:360px){ .gallery-thumbs{ grid-template-columns:repeat(3,1fr); } }
.size-grid{ display:flex; flex-wrap:wrap; gap:.6rem; }
.size-opt{ width:48px; height:48px; border:1px solid var(--color-border-strong); display:flex; align-items:center; justify-content:center; font-size:.82rem; background:none; color:var(--color-text); }
.size-opt.is-active{ border-color: var(--color-accent); color: var(--color-accent); }
.size-opt:disabled{ opacity:.3; text-decoration:line-through; cursor:not-allowed; }

.color-grid{ display:flex; flex-wrap:wrap; gap:.75rem; }
.color-swatch{
  width:34px; height:34px; border-radius:50%;
  border:2px solid transparent; padding:0; cursor:pointer;
  box-shadow: 0 0 0 1px var(--color-border-strong);
  transition: transform .15s ease, box-shadow .15s ease;
}
.color-swatch:hover{ transform: scale(1.08); }
.color-swatch.is-active{
  border-color: var(--color-bg);
  box-shadow: 0 0 0 2px var(--color-accent);
}
.product-price{ font-size:1.5rem; color: var(--color-accent); font-family: var(--font-heading); margin: .5rem 0 1.25rem; }
.measurement-toggle{ border:1px dashed var(--color-border-strong); padding:1rem 1.25rem; font-size:.85rem; color:var(--color-text-muted); margin-top:1.5rem; }

/* ---------- Cart ---------- */
.cart-item{ display:grid; grid-template-columns: 90px 1fr auto auto auto; gap:1.25rem; align-items:center; }
.cart-item__img{ width:90px; aspect-ratio:3/4; }
@media (max-width:700px){
  .cart-item{
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "img info"
      "qty qty"
      "price remove";
    row-gap:.75rem; column-gap:1rem;
    padding-bottom:1.25rem;
    border-bottom:1px solid var(--color-border);
  }
  .cart-item__img{ grid-area:img; width:64px; }
  .cart-item > div:nth-child(2){ grid-area:info; }
  .cart-item > .qty-stepper{ grid-area:qty; justify-self:start; }
  .cart-item > div.text-muted{ grid-area:price; align-self:center; }
  .cart-item > .btn-ghost{ grid-area:remove; justify-self:end; align-self:center; }
}
.cart-summary{ position:sticky; top:6.5rem; }
.summary-row{ display:flex; justify-content:space-between; font-size:.9rem; padding:.6rem 0; color: var(--color-text-muted); }
.summary-row.total{ color: var(--color-text); font-size:1.1rem; border-top:1px solid var(--color-border); margin-top:.5rem; padding-top:1.1rem; }

/* ---------- Checkout ---------- */
.checkout-layout{ display:grid; grid-template-columns: 1.3fr .9fr; gap: 3rem; align-items:start; }
.checkout-summary-items{
  display:flex; flex-direction:column; gap:1rem;
  margin-bottom:1.25rem; padding-bottom:1.25rem;
  border-bottom:1px solid var(--color-border);
  max-height: 320px; overflow-y:auto;
}
.checkout-summary-item{ display:grid; grid-template-columns:48px 1fr auto; gap:.85rem; align-items:center; }
.checkout-summary-item__img{ width:48px; aspect-ratio:3/4; font-size:.5rem; }
.checkout-summary-item__name{ font-size:.85rem; margin:0 0 .15rem; }
.checkout-summary-item__price{ font-size:.85rem; color: var(--color-text-muted); white-space:nowrap; }
@media (max-width:900px){ .checkout-layout{ grid-template-columns:1fr; } }
.payment-option{ border:1px solid var(--color-border); padding:1rem 1.25rem; display:flex; align-items:center; gap:.85rem; margin-bottom:.75rem; cursor:pointer; }
.payment-option.is-selected{ border-color: var(--color-accent); }
.payment-option img, .payment-option .pm-icon{ height:20px; }

/* ---------- Auth ---------- */
.auth-wrap{ min-height: 80vh; display:flex; align-items:center; justify-content:center; padding: 3rem 1rem; }
.auth-card{ max-width: 440px; width:100%; }
.auth-card .eyebrow{ display:block; text-align:center; margin-bottom:.5rem; }
.auth-card h1{ text-align:center; font-size:2.25rem; margin-bottom:2rem; }
.auth-divider{ display:flex; align-items:center; gap:1rem; color: var(--color-text-faint); font-size:.75rem; text-transform:uppercase; margin: 1.5rem 0; }
.auth-divider::before, .auth-divider::after{ content:""; flex:1; height:1px; background: var(--color-border); }

/* ---------- Account ---------- */
.account-layout{ display:grid; grid-template-columns: 240px 1fr; gap: 3rem; align-items:start; }
@media (max-width: 850px){ .account-layout{ grid-template-columns:1fr; } }
.account-nav a{ display:block; padding: .75rem 0; font-size:.9rem; color: var(--color-text-muted); border-bottom:1px solid var(--color-border); }
.account-nav a.is-active, .account-nav a:hover{ color: var(--color-accent); }
.measurement-card{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.25rem; }
@media (max-width:600px){ .measurement-card{ grid-template-columns:1fr 1fr; } }
.measurement-card .stat{ text-align:center; padding: 1.25rem .5rem; background: var(--color-bg-alt); }
.measurement-card .stat .val{ font-family: var(--font-heading); font-size:1.6rem; color: var(--color-accent); }
.measurement-card .stat .lbl{ font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color: var(--color-text-faint); margin-top:.25rem; }

/* ---------- Order tracking ---------- */
.order-summary-bar{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding:1.5rem; background: var(--color-bg-alt); margin-bottom:3rem; }

/* ---------- Wishlist ---------- */
.wishlist-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
@media (max-width:900px){ .wishlist-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .wishlist-grid{ grid-template-columns:repeat(2,1fr); gap:.75rem; } }

/* ---------- Journal ---------- */
.journal-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
@media (max-width:900px){ .journal-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .journal-grid{ grid-template-columns:1fr; } }
.journal-card__img{ aspect-ratio: 4/3; margin-bottom:1rem; }
.journal-card .cat{ color: var(--color-accent); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
.journal-card h3{ font-size:1.4rem; margin:.5rem 0; }
.article-hero{ aspect-ratio: 16/7; margin-bottom: 2.5rem; }
.article-body{ max-width: 720px; margin: 0 auto; font-size:1.05rem; color: var(--color-text-muted); }
.article-body p{ margin-bottom:1.5rem; }
.article-body h2{ font-size:1.75rem; color: var(--color-text); margin: 2rem 0 1rem; }

/* ---------- Bespoke / Measurements ---------- */
.bespoke-hero{ text-align:center; padding-top: 5rem; padding-bottom: 3rem; }
.measure-diagram{
  aspect-ratio: 3/4;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
}
.measure-svg{ width:100%; height:100%; }
.measure-svg .figure{ fill: var(--color-bg-elevated); stroke: var(--color-border-strong); stroke-width: 2; stroke-linejoin: round; }
.measure-svg .measure-line{ stroke: var(--color-accent); stroke-width: 1.4; stroke-dasharray: 4 3; fill: none; }
.measure-svg .tick{ stroke: var(--color-accent); stroke-width: 1.4; }
.measure-svg .dot{ fill: var(--color-accent); }
.measure-svg .label{
  fill: var(--color-accent);
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.measure-svg .label-sub{ fill: var(--color-text-faint); font-size: 8.5px; letter-spacing: .04em; }
.measure-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.5rem; }
@media (max-width:560px){ .measure-form-grid{ grid-template-columns:1fr; } }

/* ---------- Contact ---------- */
.contact-layout{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; }
@media (max-width:900px){ .contact-layout{ grid-template-columns:1fr; } }
.contact-method{ display:flex; gap:1rem; align-items:flex-start; padding: 1.25rem 0; border-bottom:1px solid var(--color-border); }
.contact-method .ic{ font-size:1.3rem; color: var(--color-accent); }
.map-embed{ border:1px solid var(--color-border); border-radius: var(--radius-md); overflow:hidden; line-height:0; }
.map-embed iframe{ display:block; filter: grayscale(.15) contrast(1.05); }
.whatsapp-fab{
  position: fixed; bottom: 1.75rem; left: 1.75rem; z-index: 300;
  background: #25D366; color:#fff; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.3); border:none;
}
@media (max-width:480px){
  .whatsapp-fab{ width:48px; height:48px; bottom:1.25rem; left:1.25rem; }
  .whatsapp-fab img{ width:24px; height:24px; }
}

.back-to-top{
  position: fixed; bottom: 1.75rem; right: 1.75rem; z-index: 300;
  background: var(--color-accent); color: var(--color-bg); width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
  border:none; cursor:pointer; box-shadow: 0 10px 25px rgba(0,0,0,.3);
  opacity:0; visibility:hidden; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background .2s ease;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background: var(--color-accent-hover); }
@media (max-width:480px){
  .back-to-top{ width:44px; height:44px; bottom:1.25rem; right:1.25rem; font-size:1.1rem; }
}