/* ============================================================
   REPLICA SABERS — SINGLE PRODUCT PAGE STYLES
   Paste this into:  Appearance → Customise → Additional CSS
   (or into the theme's assets/css/components.css file)

   Uses the theme's existing design tokens (--bg, --panel,
   --green, --amber, --line, --display font, etc.) which are
   already defined in style.css. The comparison table, .eyebrow
   and .sec-head styles already exist in style.css, so they are
   NOT redefined here.
   ============================================================ */

/* ---------- Page shell ---------- */
.rs-product{
  max-width:1280px;
  margin:0 auto;
  padding:0 28px 80px;
}
.rs-product .woocommerce-breadcrumb{
  font-family:var(--display);
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--green);
  padding:22px 0 18px;
  opacity:.85;
}
.rs-product .woocommerce-breadcrumb a{color:#fff;opacity:.7;transition:opacity .2s}
.rs-product .woocommerce-breadcrumb a:hover{opacity:1;color:var(--green)}

/* ---------- Top: gallery + buy box ---------- */
.product-top{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:48px;
  align-items:start;
  margin-bottom:56px;
}
@media(max-width:880px){
  .product-top{grid-template-columns:1fr;gap:32px}
}

/* Gallery */
.pgallery{position:sticky;top:96px}
.pgallery .woocommerce-product-gallery{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
  box-shadow:0 24px 50px rgba(0,0,0,.45);
}
.pgallery img{border-radius:10px;display:block;width:100%;height:auto}
.pgallery .flex-control-thumbs{
  display:flex;gap:10px;margin-top:14px;padding:0;list-style:none;flex-wrap:wrap
}
.pgallery .flex-control-thumbs li{width:72px}
.pgallery .flex-control-thumbs img{
  border:1px solid var(--line);border-radius:8px;cursor:pointer;opacity:.6;transition:opacity .2s,border-color .2s
}
.pgallery .flex-control-thumbs img:hover,
.pgallery .flex-control-thumbs img.flex-active{opacity:1;border-color:var(--green)}

/* Buy box */
.pbuy{display:flex;flex-direction:column;gap:18px}
.pbuy .product_title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(28px,3.4vw,44px);
  line-height:1.08;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:#fff;
}
.pbuy .psub{color:#cfcfd8;font-size:16px;line-height:1.6;border-left:2px solid var(--green-dim);padding-left:14px}
.pbuy .pprice,
.pbuy .price{
  font-family:var(--display);
  font-weight:700;
  font-size:34px;
  color:var(--green);
  margin:2px 0 4px;
}
.pbuy del{color:#7d7d8a;font-weight:500;font-size:24px;margin-right:10px}
.pbuy ins{text-decoration:none}

/* Quantity + add to cart */
.pbuy form.cart{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0}
.pbuy .quantity input.qty{
  width:64px;height:52px;text-align:center;
  background:var(--panel-2);border:1px solid var(--line);border-radius:10px;
  color:#fff;font-family:var(--display);font-weight:700;font-size:17px;
}
.pbuy .single_add_to_cart_button,
.pbuy button.button.alt{
  flex:1;min-width:200px;height:52px;
  background:linear-gradient(135deg,var(--green),var(--green-dim));
  border:none;border-radius:10px;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.06em;
  text-transform:uppercase;color:#04140d;
  box-shadow:0 0 22px rgba(56,211,159,.4);
  transition:transform .15s var(--ease),box-shadow .25s;
}
.pbuy .single_add_to_cart_button:hover{transform:translateY(-2px);box-shadow:0 0 32px rgba(56,211,159,.6)}

/* Variations (board / blade length) */
.pbuy .variations{width:100%;border:none;margin:6px 0}
.pbuy .variations td,.pbuy .variations th{display:block;padding:0 0 8px;text-align:left}
.pbuy .variations label{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:14px;color:var(--green)}
.pbuy .variations select{
  width:100%;height:48px;padding:0 14px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:10px;color:#fff;
  font-family:var(--body);font-size:15px;
}

/* Dispatch / workshop / trust strips */
.pdispatch{font-size:15px;color:#cfcfd8;padding:4px 0}
.pworkshop{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;font-size:14.5px;line-height:1.5;color:#cfcfd8;transition:border-color .2s
}
.pworkshop:hover{border-color:var(--green-dim)}
.pworkshop strong{color:#fff}
.pworkshop .pw-flag{font-size:22px;line-height:1}
.pworkshop .pw-link{color:var(--green);font-weight:600}
.ptrust{
  display:flex;flex-wrap:wrap;gap:10px 18px;
  font-family:var(--display);font-weight:600;font-size:13.5px;
  letter-spacing:.03em;color:#aeaeba;padding-top:2px
}
.ptrust span{display:inline-flex;align-items:center;gap:5px}

/* ---------- Product video ---------- */
.pvideo-wrap{margin:0 0 56px}
.pvideo{
  position:relative;width:100%;aspect-ratio:16/9;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#000;
  box-shadow:0 24px 50px rgba(0,0,0,.45)
}
.pvideo video,.pvideo iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}

/* ---------- Generic content section wrapper ---------- */
.psection{margin:0 0 56px}
.psection > h2,
.plore h2,
.learn-use h2{
  font-family:var(--display);font-weight:700;font-size:clamp(22px,2.6vw,32px);
  text-transform:uppercase;letter-spacing:.02em;color:#fff;margin-bottom:20px;
  padding-bottom:14px;border-bottom:1px solid var(--line)
}

/* ---------- Description / specs / FAQ (from the_content) ---------- */
.rs-description{color:#cfcfd8;font-size:16px;line-height:1.75}
.rs-description h2,.rs-description h3,.rs-description h4{
  font-family:var(--display);color:#fff;text-transform:uppercase;letter-spacing:.02em;
  margin:28px 0 12px
}
.rs-description h3{font-size:21px;color:var(--green)}
.rs-description h4{font-size:17px}
.rs-description p{margin:0 0 14px}
.rs-description ul,.rs-description ol{margin:0 0 16px 22px}
.rs-description li{margin:0 0 8px}
.rs-description strong{color:#fff}
.rs-description a{color:var(--green);text-decoration:underline}

/* Spec rows (if rendered as a table or definition list) */
.rs-description table{
  width:100%;border-collapse:collapse;margin:14px 0 24px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden
}
.rs-description table th,
.rs-description table td{
  padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:15px;vertical-align:top
}
.rs-description table th{
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--green);width:34%;background:var(--panel-2)
}
.rs-description table tr:last-child th,
.rs-description table tr:last-child td{border-bottom:none}

/* FAQ — works whether marked up as <details> or h-tag + p */
.rs-description details{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:0;margin:0 0 10px;overflow:hidden
}
.rs-description details > summary{
  cursor:pointer;list-style:none;padding:16px 18px;
  font-family:var(--display);font-weight:700;color:#fff;font-size:16px;
  display:flex;justify-content:space-between;align-items:center
}
.rs-description details > summary::after{content:'+';color:var(--green);font-size:22px;line-height:1}
.rs-description details[open] > summary::after{content:'–'}
.rs-description details > summary::-webkit-details-marker{display:none}
.rs-description details > p{padding:0 18px 16px;margin:0;color:#cfcfd8}

/* ---------- Lore block ---------- */
.plore{
  background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--line);border-radius:16px;
  padding:clamp(28px,4vw,52px);margin:0 0 56px
}
.plore .inner{max-width:880px;margin:0 auto}
.plore .lore-byline{
  font-family:var(--display);font-size:13px;letter-spacing:.05em;
  color:var(--amber);margin:4px 0 18px;text-transform:uppercase
}
.plore p{color:#d6d6df;font-size:16.5px;line-height:1.8;margin:0 0 16px}
.plore h3{
  font-family:var(--display);font-weight:700;font-size:20px;
  text-transform:uppercase;letter-spacing:.03em;color:var(--green);
  margin:30px 0 12px
}
.plore .battles{display:flex;flex-direction:column;gap:6px}
.plore .battles h4,
.plore .battles strong:first-child{color:#fff;font-family:var(--display);font-size:16px;letter-spacing:.02em}

/* ---------- Learn to use ---------- */
.learn-use{
  display:grid;grid-template-columns:1fr 1.3fr;gap:40px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:clamp(24px,3vw,44px);margin:0 0 24px
}
@media(max-width:880px){.learn-use{grid-template-columns:1fr;gap:24px}}
.learn-use .lu-img{
  min-height:240px;border-radius:12px;
  background:linear-gradient(135deg,#1a1a26,#101019);border:1px solid var(--line)
}
.learn-use p{color:#cfcfd8;font-size:16px;line-height:1.75;margin:0 0 20px}
.lu-btn{
  display:inline-block;padding:13px 26px;border-radius:10px;
  background:linear-gradient(135deg,var(--amber),#b9822a);color:#1a1205;
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:15px;
  box-shadow:0 0 20px rgba(224,169,59,.35);transition:transform .15s var(--ease)
}
.lu-btn:hover{transform:translateY(-2px)}

/* ---------- WooCommerce notices / star rating tidy-up ---------- */
.rs-product .star-rating{color:var(--amber);margin:2px 0}
.rs-product .woocommerce-message,
.rs-product .woocommerce-info{
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--green);
  color:#fff;border-radius:8px;padding:14px 16px
}