/* =========================================================
   PRODUCT DETAILS PAGE
   Scoped under .product-banner / .pdp-wrap so nothing here
   collides with the homepage's own classes of the same name.
   ========================================================= */

.product-banner{
  width:100%;padding:44px 0 42px;margin-bottom:60px;
  background:linear-gradient(115deg,var(--brown-dark),var(--brown) 58%,#8b5a36);color:#fff;
}
.product-banner .container{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;}
.product-banner .eyebrow{color:#f1e6da;margin-bottom:12px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;}
.product-banner h1{font-size:clamp(34px,4vw,58px);line-height:1.02;color:#fff;margin:0;}
.product-banner .banner-crumbs{display:flex;align-items:center;gap:10px;color:#f5e8dc;font-size:11px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
.product-banner .banner-crumbs i{font-size:9px;opacity:.7;}

.pdp-wrap{background:linear-gradient(#fff 65%,#fbf7f3);}
.pdp{padding-bottom:86px;}

.product-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:82px;align-items:start;}

.gallery{display:grid;grid-template-columns:92px 1fr;gap:17px;}
@media (min-width: 1081px){
  .gallery{
    position:sticky;
    top:calc(var(--header-h, 112px) + 24px);
  }
}
.thumbs{display:grid;gap:12px;align-content:start;}
.thumb{height:104px;overflow:hidden;padding:0;background:var(--brown-tint);border:1px solid var(--line);border-radius:6px;}
.thumb.active,.thumb:hover{border-color:var(--brown);box-shadow:0 0 0 2px rgba(111,66,35,.15);}
.thumb img{width:100%;height:100%;object-fit:cover;}
.main-image{height:620px;position:relative;overflow:hidden;background:var(--brown-tint);border-radius:8px;}
.main-image>img{width:100%;height:100%;object-fit:cover;transition:.35s;}
.main-image:hover>img{transform:scale(1.025);}
.image-note{position:absolute;left:20px;bottom:18px;padding:9px 13px;background:rgba(255,255,255,.78);font-size:10px;text-transform:uppercase;letter-spacing:.1em;border-radius:3px;}
.wish{position:absolute;right:18px;top:18px;width:42px;height:42px;border-radius:50%;background:#fff;color:var(--brown);font-size:19px;display:flex;align-items:center;justify-content:center;}
.wish.saved{background:var(--brown);color:#fff;}

.product-info{padding-top:12px;}
.product-info .eyebrow{color:var(--brown);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px;}
.product-info h1{font-size:clamp(34px,4.2vw,54px);line-height:.98;max-width:520px;margin-bottom:17px;color:var(--ink);}
.product-info .subtitle{max-width:480px;color:var(--ink-soft);font-size:15px;line-height:1.65;margin-bottom:20px;}

.product-info .rating,
.rating{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 0 24px 0 !important;
  padding:0 0 24px 0 !important;
  border-bottom:1px solid var(--line);
  font-size:13px;
  line-height:1 !important;
  color:var(--ink-soft);
  cursor:pointer;
  width:fit-content;
  white-space:nowrap !important;
  flex-wrap:nowrap !important;
}
.product-info .rating strong,
.rating strong{
  color:var(--ink);
  font-size:13px;
  font-weight:700;
  line-height:1 !important;
  margin:0 !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  vertical-align:middle;
}
.product-info .rating .stars,
.rating .stars{
  display:inline-flex !important;
  align-items:center !important;
  gap:3px !important;
  color:var(--brown) !important;
  height:14px !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
  vertical-align:middle;
}
.product-info .rating .stars i,
.rating .stars i{
  font-size:13px !important;
  width:13px !important;
  height:13px !important;
  line-height:13px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  padding:0 !important;
  vertical-align:middle;
}
.product-info .rating span:not(.stars),
.rating span:not(.stars){
  color:var(--ink-soft);
  font-size:13px;
  line-height:1 !important;
  margin:0 !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  vertical-align:middle;
}

.product-info .price-row{display:flex;align-items:center;justify-content:flex-start;gap:12px;margin:24px 0 8px;flex-wrap:wrap;}
.product-info .price-row .price{font:500 30px var(--serif);color:var(--ink);}
.product-info .price-row .old{text-decoration:line-through;color:#C0392B;font-size:14px;}
.product-info .price-row .save{padding:5px 8px;background:#e9efe5;color:#5a6c4d;font-size:10px;font-weight:700;border-radius:3px;}
.tax{font-size:11px;color:var(--ink-soft);margin-bottom:26px;}

.option-title{display:flex;justify-content:space-between;font-size:12px;font-weight:700;margin-bottom:11px;color:var(--ink);}
.option-title span{font-weight:400;color:var(--ink-soft);}
.sizes{display:flex;gap:9px;margin-bottom:24px;flex-wrap:wrap;}
.size{min-width:78px;padding:12px 15px;background:#fff;color:var(--ink-soft);border:1px solid var(--line);font-size:12px;border-radius:6px;text-align:center;}
.size.active,.size:hover{border-color:var(--brown);background:var(--brown-tint);color:var(--brown-dark);}
.size:disabled{opacity:.4;cursor:not-allowed;}
.size small{font-weight:600;}

.purchase{display:grid;grid-template-columns:112px 1fr;gap:11px;margin-bottom:16px;}
.quantity{display:flex;align-items:center;justify-content:space-around;border:1px solid var(--line);border-radius:6px;}
.quantity button{width:32px;background:none;color:var(--brown);font-size:15px;display:flex;align-items:center;justify-content:center;}
.qty-display{font-size:14px;color:var(--ink);}
.add{
  background:var(--brown);color:#fff;padding:17px;text-transform:uppercase;letter-spacing:.11em;
  font-size:12px;font-weight:700;border-radius:2px;display:flex;align-items:center;justify-content:center;gap:10px;
  transition:background .3s ease;
}
.add:hover{background:var(--brown-dark);}
.add.disabled,.add:disabled{opacity:.55;cursor:not-allowed;}

.delivery{padding:14px 0 25px;border-bottom:1px solid var(--line);color:var(--ink-soft);font-size:12px;}

.accordions{margin-top:4px;}
.accordion{border-bottom:1px solid var(--line);}
.accordion button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:18px 0;background:none;text-align:left;color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.accordion button span{color:var(--brown);font-size:14px;font-weight:400;line-height:1;}
.accordion .accordion-body{display:none;padding:0 30px 18px 0;color:var(--ink-soft);font-size:13px;line-height:1.7;}
.accordion.open .accordion-body{display:block;}
.accordion .accordion-body p{margin-bottom:12px;}
.accordion .accordion-body p:last-child{margin-bottom:0;}

.accordion table.woocommerce-product-attributes{
  width:100%;border-collapse:collapse;margin-top:2px;
}
.accordion table.woocommerce-product-attributes th,
.accordion table.woocommerce-product-attributes td{
  padding:12px 16px;border:1px solid var(--line);font-size:13px;text-align:left;color:var(--ink-soft);
}
.accordion table.woocommerce-product-attributes th{
  background:var(--off-white);font-weight:600;color:var(--ink);width:200px;
}

/* ---- reviews ----
   The store runs the "Customer Reviews for WooCommerce" plugin, which
   replaces WordPress's default review markup with its own (prefixed
   `cr-`/`ivole-`) template and ships fairly high-specificity CSS of its
   own (some rules are ID-qualified with #reviews). Every selector below is
   written to match that plugin's actual output, and #reviews is included
   in each override to guarantee it wins the cascade. */
.reviews-section{
  background:linear-gradient(180deg, #f7f1ec 0%, #fdf7f2 100%);
}
#reviews.cr-reviews-ajax-reviews{max-width:1180px;margin:0 auto;}
#reviews .woocommerce-Reviews-title{
  font-family:var(--serif) !important;font-weight:500 !important;font-size:clamp(28px,3vw,40px) !important;
  color:var(--ink) !important;text-align:center;margin-bottom:28px;line-height:1.2;
}
#reviews .woocommerce-Reviews-title span{color:var(--brown-dark) !important;}
#reviews .woocommerce-noreviews{
  text-align:center;color:var(--ink-soft);font-size:14.5px;margin:20px 0 36px;
}
#reviews #comments{margin-bottom:44px;}

/* rating summary box (average score, stars, "Add a review") */
#reviews .cr-summaryBox-wrap{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
  padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid rgba(111,66,35,0.14);
}
#reviews .cr-overall-rating-wrap{display:flex;align-items:center;gap:14px;}
#reviews .cr-average-rating span{
  font-family:var(--serif) !important;font-size:28px !important;color:var(--ink) !important;font-weight:500;
}
#reviews .cr-average-rating-stars{display:flex;align-items:center;}
/* The plugin sets fill/stroke directly (not currentColor), so `color` alone
   has no effect here — override the actual paint properties. */
#reviews .cr-rating-icon-frnt .cr-rating-icon{fill:var(--brown) !important;}
#reviews .cr-rating-icon-base .cr-rating-icon-bg{stroke:var(--line) !important;}
#reviews .cr-total-rating-count{color:var(--ink-soft) !important;font-size:13px;}
#reviews .cr-ajax-reviews-add-review{
  background:var(--brown) !important;color:#fff !important;border:none !important;
  padding:13px 24px !important;font-size:12px !important;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;border-radius:2px !important;transition:background .3s ease;
}
#reviews .cr-ajax-reviews-add-review:hover{background:var(--brown-dark) !important;}
#reviews .ivole-summaryBox{margin-bottom:8px;}
#reviews .ivole-meter{background:var(--off-white) !important;}
#reviews .ivole-meter-bar{background:var(--brown) !important;}
#reviews .ivole-histogramCell1,
#reviews .ivole-histogramCell3{color:var(--ink-soft) !important;font-size:12px;}

/* The compact "star + rating + Add a review" bar the plugin actually shows
   by default (`.cr-ajax-reviews-nosummary`) is a DIFFERENT element from the
   full histogram summary box above — style that one too, since it's the one
   that's visible here. */
#reviews .cr-ajax-reviews-nosummary{
  padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid rgba(111,66,35,0.14);
}
#reviews .cr-nosummary-rating-cnt svg > path{fill:var(--brown) !important;stroke:var(--brown-dark) !important;}
#reviews .cr-nosummary-rating-val{
  font-family:var(--serif) !important;font-size:26px !important;color:var(--ink) !important;font-weight:500 !important;
}
#reviews .cr-nosummary-rating-lbl{
  font-family:var(--sans) !important;font-size:14px !important;color:var(--ink-soft) !important;font-weight:400 !important;
}
#reviews .cr-nosummary-add{
  background:var(--brown) !important;color:#fff !important;border:none !important;
  padding:13px 24px !important;font-size:12px !important;font-weight:700 !important;letter-spacing:.06em;
  text-transform:uppercase;border-radius:2px !important;
}
#reviews .cr-nosummary-add:hover{background:var(--brown-dark) !important;}

/* search + sort row */
#reviews .cr-ajax-search{margin-bottom:20px;}
#reviews .cr-ajax-search > div{
  display:flex;align-items:center;gap:10px;padding:13px 16px;background:#fff !important;
  border:1px solid var(--line) !important;border-radius:10px;
}
#reviews .cr-input-text{
  border:none !important;font-family:var(--sans);font-size:14px;color:var(--ink);flex:1;background:transparent !important;
}
#reviews .cr-input-text:focus{outline:none;}
#reviews .cr-count-row{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding:14px 18px;background:var(--off-white) !important;border-radius:10px;margin-bottom:20px;
}
#reviews .cr-count-row-count{font-size:12.5px;color:var(--ink-soft);}
#reviews .cr-ajax-reviews-sort{
  border:1px solid var(--line) !important;border-radius:8px;padding:8px 12px;font-family:var(--sans);
  font-size:13px;color:var(--ink);background:#fff !important;
}

/* Slider nav (built in JS, placed just above the card track) */
.reviews-nav{display:flex;justify-content:flex-end;gap:10px;margin-bottom:18px;}
.reviews-nav button{
  width:40px;height:40px;border-radius:50%;background:#fff;color:var(--brown-dark);
  border:1px solid rgba(111,66,35,0.16);display:flex;align-items:center;justify-content:center;
  font-size:13px;transition:all .25s ease;
}
.reviews-nav button:hover{background:var(--brown);color:#fff;border-color:var(--brown);}

/* Card slider — one full-width review per card */
#reviews .commentlist{
  display:flex !important;flex-wrap:nowrap !important;width:100% !important;
  gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 4px 14px !important;margin:0 !important;list-style:none !important;scrollbar-width:none;
}
#reviews .commentlist::-webkit-scrollbar{display:none;}
/* WooCommerce review comments render as <li class="review ..."> — NOT
   "comment" (that class is only used for plain post comments) — so this
   must target .review, or it silently matches nothing. */
#reviews .commentlist > li{
  scroll-snap-align:start;
  flex:1 0 100% !important;width:100% !important;max-width:100% !important;min-width:100% !important;
  box-sizing:border-box !important;padding:0 !important;margin:0 !important;
}
#reviews .comment_container{
  display:flex;flex-direction:column;gap:16px;width:100%;box-sizing:border-box;padding:44px 48px;
  background:#fff;border:1px solid rgba(111,66,35,0.1);border-radius:18px;
  box-shadow:0 20px 32px -26px rgba(84,48,26,.3);
}
#reviews .comment_container.cr-verified-owner{border-color:rgba(111,66,35,0.22);}
/* No reviewer photo — the plugin's avatar (real or gravatar default) is dropped entirely */
#reviews .comment_container > img{display:none !important;}
#reviews .cr-comment-text{display:flex;flex-direction:column;gap:12px;order:1;}
#reviews .crstar-rating-svg{order:0;padding-top:6px;}
#reviews .cr-comment-text .meta{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;order:1;
}
#reviews .cr-meta-author-title > div{display:flex;align-items:center;gap:6px;}
#reviews .woocommerce-review__author{
  font-family:var(--serif);font-size:15px;color:var(--ink);font-weight:500;
}
#reviews .woocommerce-review__verified.verified{
  font-size:11px;color:var(--brown-dark) !important;text-transform:uppercase;letter-spacing:.03em;
  font-style:normal !important;
}
#reviews .woocommerce-review__published-date{font-size:11px;color:var(--ink-soft);white-space:nowrap;padding-right:26px;}
#reviews .description{order:2;padding-right:25px;}
#reviews .description p{
  font-size:15px;line-height:1.75;color:var(--ink);font-style:italic;margin:0;
  background:var(--off-white);border-radius:12px;padding:18px 22px;
}
#reviews .description p::before{content:'\201C';}
#reviews .description p::after{content:'\201D';}

#reviews #review_form_wrapper{
  max-width:640px;margin:12px auto 0;padding:34px 36px;border-radius:20px;
  background:#fff;border:1px solid rgba(111,66,35,0.1);
  box-shadow:0 22px 34px -28px rgba(84,48,26,.3);
}
#reviews #review_form_wrapper #reply-title{
  font-family:var(--serif);font-weight:500;font-size:22px;color:var(--ink);margin-bottom:6px;display:block;
}
#reviews .comment-notes{color:var(--ink-soft);font-size:13px;margin-bottom:20px;}
#reviews .comment-form-rating label,
#reviews .comment-form-comment label,
#reviews .comment-form-author label,
#reviews .comment-form-email label{
  display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin-bottom:8px;
}
#reviews .comment-form-rating{margin-bottom:18px;}
#reviews .comment-form-rating select{
  padding:11px 14px;border:1px solid var(--line);border-radius:10px;font-family:var(--sans);font-size:14px;
  background:#fff;color:var(--ink);
}
#reviews .required{color:#C0392B;}
#reviews .form-submit input{
  background:var(--brown) !important;color:#fff !important;border:none !important;padding:14px 30px !important;
  font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;border-radius:2px !important;cursor:pointer;
}
#reviews .form-submit input:hover{background:var(--brown-dark) !important;}

.related{padding:82px 0;background:linear-gradient(180deg,#fff,#fbf7f3);}
.related-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:30px;flex-wrap:wrap;gap:16px;}
.related-head h2{font-size:clamp(28px,3vw,40px);color:var(--ink);}
.related .view-all{color:var(--brown);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--brown);padding-bottom:5px;}

@media (max-width: 1080px){
  .product-layout{grid-template-columns:1fr;gap:42px;}
  .main-image{height:min(560px,75vw);}
}
@media (max-width: 760px){
  .gallery{display:flex;flex-direction:column-reverse;}
  .thumbs{display:flex;gap:8px;}
  .thumb{height:74px;flex:1;}
  .main-image{height:112vw;max-height:460px;}
  .product-info h1{font-size:38px;}
  .purchase{grid-template-columns:94px 1fr;}
  .related{padding:56px 0;}
  .related-head{align-items:start;flex-direction:column;}
  .product-banner{padding:32px 0;}
  .product-banner .container{display:block;}
  .product-banner h1{font-size:34px;margin-bottom:20px;}
  .product-banner .banner-crumbs{font-size:9px;white-space:normal;flex-wrap:wrap;}
}