/* Product detail page. Loaded after style.css and refinements.css, so it
   inherits the site palette, type scale and panel treatment. */

.breadcrumb {
  padding:.9rem .4rem .2rem;
  font-size:.72rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted-warm);
}

.breadcrumb ol {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem;
  list-style:none;
  margin:0;
  padding:0;
}

.breadcrumb li+li:before {
  content:'/';
  margin-right:.6rem;
  color:#c9c0b4;
}

.breadcrumb a:hover {
  color:var(--gold-deep);
}

.breadcrumb [aria-current] {
  color:var(--ink-deep);
  font-weight:600;
}

/* ---------- Layout ---------- */
.product-page {
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:3.2rem;
  padding:2.6rem 3.2%;
  background:var(--ivory);
  border:1px solid var(--hairline);
}

/* ---------- Gallery ---------- */
.gallery-main {
  position:relative;
  border-radius:10px;
  overflow:hidden;
  background:linear-gradient(170deg,#fbf8f4,#efe9e0);
  aspect-ratio:4/3.4;
}

.gallery-main img {
  width:100%;
  height:100%;
  object-fit:contain;
  transition:opacity .25s var(--ease);
}

.product-flag {
  position:absolute;
  left:1rem;
  top:1rem;
  padding:.42rem .85rem;
  border-radius:999px;
  background:var(--ink-deep);
  color:#fff;
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
}

.gallery-thumbs {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.8rem;
  margin-top:.9rem;
}

.thumb {
  border:1px solid var(--hairline);
  border-radius:8px;
  overflow:hidden;
  background:#fff;
  padding:0;
  aspect-ratio:1;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}

.thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.thumb:hover {
  border-color:var(--gold-soft);
}

.thumb.is-active {
  border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold);
}

/* ---------- Buying panel ---------- */
.buy-panel {
  min-width:0;
}

.buy-panel h1 {
  font-family:var(--serif);
  font-size:3.1rem;
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.04em;
  margin:.5rem 0 .7rem;
}

.product-meta {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.9rem;
  margin-bottom:1.2rem;
}

.meta-divider {
  width:1px;
  height:1rem;
  background:var(--hairline);
}

.stock {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:600;
  color:#3f7a4e;
}

.buy-intro {
  font-size:1.02rem;
  line-height:1.55;
  color:#5d554c;
  margin-bottom:1.5rem;
}

.price-row {
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.85rem;
}

.price-row .price {
  font-size:2rem;
  border:0;
  padding:0;
  margin:0;
}

.price-was {
  font-size:1.05rem;
  color:var(--muted-warm);
  text-decoration:line-through;
}

.price-save {
  font-size:.66rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--gold-deep);
  background:#f4ebdd;
  border-radius:999px;
  padding:.35rem .7rem;
}

.price-note {
  font-size:.85rem;
  color:var(--muted-warm);
  margin-top:.5rem;
}

/* ---------- Size options ---------- */
.options {
  border:0;
  padding:0;
  margin:1.8rem 0 1.6rem;
}

.options legend {
  padding:0;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:.8rem;
}

.size-options {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.8rem;
}

.size-option {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:.25rem;
  align-items:flex-start;
  padding:.95rem 1rem 1rem;
  border:1px solid #ddd4c8;
  border-radius:8px;
  background:#fff;
  text-align:left;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}

.size-option:hover {
  border-color:var(--gold-soft);
}

.size-option.is-active {
  border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold);
  background:#fffdf9;
}

.size-name {
  font-size:.95rem;
  font-weight:650;
}

.size-price {
  font-size:.85rem;
  color:var(--muted-warm);
  font-variant-numeric:tabular-nums;
}

.size-tag {
  font-size:.56rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--gold-deep);
}

/* ---------- Actions ---------- */
.buy-actions {
  display:flex;
  gap:.8rem;
  align-items:stretch;
}

.qty-stepper {
  display:flex;
  align-items:center;
  border:1px solid #ddd4c8;
  border-radius:5px;
  background:#fff;
  flex-shrink:0;
}

.qty-label {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.qty-stepper button {
  width:2.9rem;
  align-self:stretch;
  border:0;
  background:transparent;
  font-size:1.1rem;
  color:var(--ink-deep);
  transition:background .2s var(--ease);
}

.qty-stepper button:hover {
  background:#f4ede3;
}

.qty-stepper input {
  width:2.6rem;
  border:0;
  border-inline:1px solid var(--hairline);
  background:transparent;
  text-align:center;
  font:inherit;
  font-weight:600;
  padding:.85rem 0;
  -moz-appearance:textfield;
  appearance:textfield;
}

.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button {
  -webkit-appearance:none;
  margin:0;
}

.add-to-bag {
  flex:1;
}

.buy-actions-secondary {
  display:flex;
  gap:.8rem;
  align-items:stretch;
  margin-top:.8rem;
}

.buy-now {
  flex:1;
  background:transparent;
  border:1px solid var(--ink-deep);
  color:var(--ink-deep);
  box-shadow:none;
}

.buy-now:hover {
  background:var(--ink-deep);
  border-color:var(--ink-deep);
  color:#fff;
  box-shadow:none;
}

.wishlist-toggle {
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.9rem 1.2rem;
  border:1px solid #ddd4c8;
  border-radius:5px;
  background:#fff;
  font-size:.72rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  font-weight:600;
  white-space:nowrap;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}

.wishlist-toggle .ph {
  font-size:1.15rem;
}

.wishlist-toggle:hover {
  border-color:#e0a8b0;
  color:#b23647;
}

.wishlist-toggle.saved {
  color:#b23647;
  border-color:#e0a8b0;
}

.wishlist-toggle.saved .ph {
  font-family:'Phosphor-Fill'!important;
}

/* ---------- Assurances ---------- */
.assurances {
  list-style:none;
  margin:1.8rem 0 0;
  padding:1.4rem 0 0;
  border-top:1px solid var(--hairline);
  display:grid;
  gap:.85rem;
}

.assurances li {
  display:flex;
  align-items:center;
  gap:.8rem;
  font-size:.9rem;
  color:#5d554c;
}

.assurances .ph {
  font-size:1.25rem;
  color:var(--gold-deep);
  flex-shrink:0;
}

/* ---------- Notes ---------- */
.notes-section,.details-section,.reviews-section,.related-section {
  padding:2.6rem 3.2%;
  background:var(--ivory);
  border:1px solid var(--hairline);
}

.notes-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.2rem;
}

.note-card {
  background:#fff;
  border:1px solid var(--hairline);
  border-radius:10px;
  padding:1.5rem 1.4rem;
}

.note-step {
  display:inline-block;
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--gold-deep);
  padding-bottom:.7rem;
}

.note-card h3 {
  font-size:.78rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--muted-warm);
  margin-bottom:.55rem;
}

.note-card p {
  font-family:var(--serif);
  font-size:1.25rem;
  line-height:1.35;
  letter-spacing:-.015em;
}

.spec-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin:1.6rem 0 0;
  border-top:1px solid var(--hairline);
}

.spec-grid>div {
  padding:1.1rem 1.2rem;
  border-bottom:1px solid var(--hairline);
  border-right:1px solid var(--hairline);
}

.spec-grid>div:nth-child(3n) {
  border-right:0;
}

.spec-grid dt {
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--muted-warm);
  margin-bottom:.35rem;
}

.spec-grid dd {
  margin:0;
  font-size:.98rem;
}

/* ---------- Accordion ---------- */
.accordion {
  border-top:1px solid var(--hairline);
}

.accordion details {
  border-bottom:1px solid var(--hairline);
}

.accordion summary {
  list-style:none;
  cursor:pointer;
  padding:1.15rem 2.4rem 1.15rem 0;
  position:relative;
  font-size:.82rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  font-weight:600;
  transition:color .2s var(--ease);
}

.accordion summary::-webkit-details-marker {
  display:none;
}

.accordion summary:hover {
  color:var(--gold-deep);
}

.accordion summary:after {
  content:'+';
  position:absolute;
  right:.3rem;
  top:50%;
  transform:translateY(-50%);
  font-size:1.3rem;
  font-weight:400;
  color:var(--gold-deep);
}

.accordion details[open] summary:after {
  content:'\2212';
}

.accordion-body {
  padding:0 0 1.5rem;
  max-width:62ch;
}

.accordion-body p+p {
  margin-top:.9rem;
}

.accordion-body ul {
  margin:0;
  padding-left:1.15rem;
  display:grid;
  gap:.55rem;
}

.accordion-body li {
  line-height:1.5;
}

.accordion-note {
  color:var(--muted-warm);
  font-size:.9rem;
}

/* ---------- Bag row remove link ---------- */
/* .quantity button pins a 27px square and outranks a lone .bag-remove,
   so match the same specificity to let the text label size itself. */
.quantity .bag-remove {
  width:auto;
  height:auto;
  flex-shrink:0;
}

.bag-remove {
  border:0;
  background:transparent;
  padding:0;
  margin-left:.3rem;
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--muted-warm);
  border-bottom:1px solid #d6cec3;
}

.bag-remove:hover {
  color:#b23647;
  border-color:#b23647;
}

/* ---------- Sticky buy bar (phones) ---------- */
.buy-bar {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:15;
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.8rem 1rem;
  background:#fffffff5;
  backdrop-filter:blur(10px);
  border-top:1px solid var(--hairline);
  box-shadow:0 -6px 24px -12px #1c130a3d;
}

.buy-bar-info strong {
  display:block;
  font-family:var(--serif);
  font-size:1.15rem;
  font-weight:400;
  line-height:1.1;
}

.buy-bar-info span {
  font-size:.78rem;
  color:var(--muted-warm);
  font-variant-numeric:tabular-nums;
}

.buy-bar .button {
  flex-shrink:0;
  padding:.9rem 1.4rem;
}

/* ---------- Responsive ---------- */
@media(max-width:1100px) {
  .product-page {
    gap:2.4rem;
  }
  .buy-panel h1 {
    font-size:2.7rem;
  }
}

@media(max-width:900px) {
  .product-page {
    grid-template-columns:minmax(0,1fr);
    gap:2rem;
  }
  .gallery-main {
    aspect-ratio:4/3;
  }
  .notes-grid {
    grid-template-columns:1fr;
  }
  .spec-grid {
    grid-template-columns:repeat(2,1fr);
  }
  .spec-grid>div:nth-child(3n) {
    border-right:1px solid var(--hairline);
  }
  .spec-grid>div:nth-child(2n) {
    border-right:0;
  }
}

@media(max-width:767px) {
  .breadcrumb {
    padding:14px 4px 0;
    font-size:.62rem;
  }
  .product-page,.notes-section,.details-section,.reviews-section,.related-section {
    padding:24px 18px 28px;
  }
  .buy-panel h1 {
    font-size:2.4rem;
  }
  .price-row .price {
    font-size:1.7rem;
  }
  .size-options {
    grid-template-columns:1fr;
  }
  .size-option {
    flex-direction:row;
    align-items:center;
    gap:.7rem;
    padding:.85rem 1rem;
  }
  .size-tag {
    margin-left:auto;
  }
  .buy-actions-secondary {
    flex-direction:column;
  }
  .wishlist-toggle {
    justify-content:center;
  }
  .gallery-thumbs {
    gap:.55rem;
  }
  .buy-bar {
    display:flex;
  }
  .buy-bar[hidden] {
    display:none;
  }
  /* Room for the sticky bar so it never covers the footer's last line. */
  .site-footer {
    padding-bottom:88px;
  }
  .toast {
    bottom:90px;
  }
}

/* ---------- Product details: tabbed description / specifications ---------- */
.tab-list {
  display:flex;
  gap:2rem;
  border-bottom:1px solid var(--hairline);
  margin-bottom:1.8rem;
}

.tab {
  position:relative;
  padding:0 0 .9rem;
  border:0;
  background:none;
  font-size:.8rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:650;
  color:var(--muted-warm);
  transition:color .2s var(--ease);
}

.tab:after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s var(--ease);
}

.tab:hover {
  color:var(--ink-deep);
}

.tab.is-active {
  color:var(--ink-deep);
}

.tab.is-active:after {
  transform:scaleX(1);
}

.tab-panel[hidden] {
  display:none;
}

.tab-panel h4 {
  font-size:.95rem;
  font-weight:650;
  margin:1.8rem 0 .7rem;
}

.tab-panel h4:first-child {
  margin-top:0;
}

.tab-panel p {
  line-height:1.6;
  color:#5d554c;
  max-width:70ch;
}

.tab-panel p+p {
  margin-top:.9rem;
}

.tab-panel ul {
  margin:0;
  padding-left:1.15rem;
  display:grid;
  gap:.55rem;
  color:#5d554c;
  max-width:70ch;
}

.tab-panel li {
  line-height:1.55;
}

.spec-list {
  margin:0;
  max-width:46rem;
  border-top:1px solid var(--hairline);
}

.spec-list>div {
  display:grid;
  grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);
  gap:1.5rem;
  padding:.9rem 0;
  border-bottom:1px solid var(--hairline);
}

.spec-list dt {
  font-size:.68rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:650;
  color:var(--muted-warm);
  padding-top:.15rem;
}

.spec-list dd {
  margin:0;
  font-size:.95rem;
  line-height:1.5;
}

.spec-note {
  font-size:.85rem;
  color:var(--muted-warm);
  line-height:1.5;
  margin-top:1rem;
  max-width:46rem;
}

/* ---------- Assurances: a continuously moving ticker ----------
   The strip holds two identical lists side by side; sliding both left by
   their own width brings the second copy exactly where the first started,
   so the loop is seamless. The duplicate is added in js/product.js and
   hidden from assistive tech, which reads the original list only. */
.assurance-strip {
  position:relative;
  display:flex;
  min-width:0;
  overflow:hidden;
  margin-top:1.8rem;
  padding-top:1.4rem;
  border-top:1px solid var(--hairline);
  /* fade the text out at both edges instead of cutting it dead */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}

.assurance-strip .assurances {
  display:flex;
  flex:0 0 auto;
  gap:2.6rem;
  margin:0;
  padding:0 1.3rem 0 0;
  border:0;
  background:none;
  list-style:none;
  animation:assurance-marquee 30s linear infinite;
}

.assurance-strip .assurances li {
  flex:0 0 auto;
  align-items:center;
  gap:.65rem;
  white-space:nowrap;
  font-size:.9rem;
  color:#5d554c;
}

.assurance-strip .assurances .ph {
  font-size:1.2rem;
  color:var(--gold-deep);
  flex-shrink:0;
}

.assurance-strip:hover .assurances,
.assurance-strip:focus-within .assurances {
  animation-play-state:paused;
}

@keyframes assurance-marquee {
  from { transform:translateX(0); }
  to { transform:translateX(-100%); }
}

/* Standing still, the four items simply sit in a row. */
@media(prefers-reduced-motion:reduce) {
  .assurance-strip .assurances {
    animation:none;
  }
  .assurance-strip {
    overflow-x:auto;
  }
}

/* ---------- Related products carousel ---------- */
.carousel-controls {
  display:flex;
  align-items:center;
  gap:.7rem;
}

.carousel-arrow {
  display:grid;
  place-items:center;
  width:2.4rem;
  height:2.4rem;
  border:1px solid #ddd4c8;
  border-radius:50%;
  background:#fff;
  font-size:1.05rem;
  color:var(--ink-deep);
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease),opacity .2s var(--ease);
}

.carousel-arrow:hover:not(:disabled) {
  border-color:var(--gold);
  background:var(--gold);
  color:#fff;
}

.carousel-arrow:disabled {
  opacity:.35;
  cursor:default;
}

.carousel-controls .text-link {
  margin-left:.5rem;
}

.carousel-track {
  display:flex;
  gap:1.6rem;
  overflow-x:auto;
  scrollbar-width:none;
  /* room for the card hover lift and shadow */
  padding:.5rem .3rem 1rem;
  margin:-.5rem -.3rem -1rem;
}

.carousel-track::-webkit-scrollbar {
  display:none;
}

.carousel-track .product-card {
  flex:0 0 calc((100% - 4.8rem)/4.35);
}

@media(max-width:1100px) {
  .carousel-track .product-card {
    flex-basis:calc((100% - 3.2rem)/3.3);
  }
}

@media(max-width:767px) {
  .tab-list {
    gap:1.4rem;
  }
  .tab {
    font-size:.72rem;
    letter-spacing:.12em;
  }
  .spec-list>div {
    grid-template-columns:1fr;
    gap:.3rem;
  }
  .assurances {
    grid-template-columns:1fr;
    padding:1.1rem 1.2rem;
  }
  .carousel-track {
    gap:1rem;
  }
  .carousel-track .product-card {
    flex-basis:calc((100% - 1rem)/2.2);
  }
  .carousel-controls .text-link {
    display:none;
  }
}