/* 100 Rose BD — Single Product (Modern UI) */

.hrsp{ --hrsp-red:var(--red,#D32F2F); --hrsp-rose:var(--rose-gold,#B76E79); --hrsp-char:var(--charcoal,#212121); --hrsp-soft:var(--soft,#F2F2F2); --hrsp-white:var(--white,#fff); --hrsp-stroke:#E6E8EE; --hrsp-shadow:0 10px 30px rgba(0,0,0,.06); --hrsp-r:20px; }

.hrsp{ font-family:var(--font-body, "Open Sans", system-ui); }
.hrsp-wrap{ max-width:1200px; margin:0 auto; padding:16px; }

.hrsp-grid{ display:grid; grid-template-columns: minmax(0,1fr) 420px; gap:16px; align-items:start; }
@media (max-width: 980px){ .hrsp-grid{ grid-template-columns:1fr; } }

.hrsp-card{ background:var(--hrsp-white); border:1px solid var(--hrsp-stroke); border-radius:var(--hrsp-r); box-shadow:var(--hrsp-shadow); }

/* Gallery */
.hrsp-gallery{ padding:14px; position:relative; }
.hrsp-gallery-top{ position:absolute; top:14px; left:14px; display:flex; gap:8px; z-index:3;
  padding:6px; border-radius:999px; background:rgba(255,255,255,.85); border:1px solid rgba(0,0,0,.06); backdrop-filter:saturate(120%) blur(6px);
}
.hrsp-badge{ display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.2px; border:1px solid rgba(0,0,0,.08); background:#fff; }
.hrsp-badge--sale{ background:var(--hrsp-red); color:#fff; border-color:rgba(211,47,47,.35); box-shadow:0 10px 24px rgba(211,47,47,.18); }


/* Custom gallery (predictable) */
.hrsp-gallery-media{ border-radius:calc(var(--hrsp-r) - 8px); overflow:hidden; }

/* Stack: main image on top, thumbs under (requested) */
.hrsp-g--stack{ display:flex; flex-direction:column; gap:12px; }
.hrsp-thumbs{ display:flex; gap:10px; overflow:auto; padding-bottom:4px; }

.hrsp-thumb{ appearance:none; border:0; padding:0; background:none; cursor:pointer; border-radius:14px; overflow:hidden; width:76px; flex:0 0 76px; }
.hrsp-thumb img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; border-radius:14px; border:1px solid var(--hrsp-stroke); opacity:.88; transition:.15s ease; }
.hrsp-thumb:hover img{ opacity:1; transform:translateY(-1px); }
.hrsp-thumb.is-active img{ opacity:1; border-color:rgba(211,47,47,.35); box-shadow:0 6px 18px rgba(211,47,47,.10); }

.hrsp-main{ border-radius:calc(var(--hrsp-r) - 8px); overflow:hidden; aspect-ratio:1/1; background:#f3f4f6; }
.hrsp-main img{ width:100%; height:100%; object-fit:cover; display:block; transition:opacity .18s ease, transform .18s ease; }
.hrsp-main.is-switching img{ opacity:.75; transform:scale(0.992); }

/* Remove any default Woo gallery layout influence inside our custom block */
.hrsp-gallery .woocommerce-product-gallery,
.hrsp-gallery .flex-control-thumbs,
.hrsp-gallery .woocommerce-product-gallery__wrapper{ all:unset; }

.hrsp-gallery-note{ margin-top:12px; padding:12px; background:linear-gradient(180deg, rgba(242,242,242,.7), rgba(242,242,242,.35)); border:1px solid var(--hrsp-stroke); border-radius:16px; }
.hrsp-note-row{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:rgba(0,0,0,.70); line-height:1.5; }
.hrsp-note-row + .hrsp-note-row{ margin-top:8px; }
.hrsp-dot{ width:8px; height:8px; margin-top:6px; border-radius:99px; background:var(--hrsp-rose); flex:0 0 8px; }

/* Summary */
.hrsp-summary{ padding:16px; position:sticky; top:14px; }
@media (max-width: 980px){ .hrsp-summary{ position:static; } }

.hrsp-title{ margin:0 0 10px; font-family:var(--font-heading, "Montserrat", system-ui); font-size:24px; line-height:1.2; color:var(--hrsp-char); }
.hrsp-title-divider{ height:1px; background:rgba(0,0,0,.10); margin:10px 0 12px; }
@media (max-width:520px){ .hrsp-title{ font-size:22px; } }

.hrsp-subrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
/* Stock pill removed by design */

.hrsp-price{ margin:8px 0 10px; }
.hrsp-price .price{ font-family:var(--font-heading, "Montserrat", system-ui); font-weight:800; font-size:20px; color:var(--hrsp-char); }
.hrsp-price del{ opacity:.55; }
.hrsp-short{ color:rgba(0,0,0,.70); font-size:13px; line-height:1.6; }

/* Trust */
.hrsp-trust{ margin:14px 0 12px; padding:12px; border:1px solid var(--hrsp-stroke); border-radius:16px; background:#fff; }
.hrsp-trust-title{ font-weight:800; font-family:var(--font-heading, "Montserrat", system-ui); font-size:14px; margin-bottom:10px; }
.hrsp-trust-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:520px){ .hrsp-trust-grid{ grid-template-columns:1fr; } }
.hrsp-trust-item{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:rgba(0,0,0,.72); }
.hrsp-ico{ width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:rgba(183,110,121,.12); color:var(--hrsp-rose); font-weight:900; flex:0 0 22px; }

/* Cart box */
.hrsp-cart{ margin-top:12px; padding:12px; border:1px solid var(--hrsp-stroke); border-radius:16px; background:linear-gradient(180deg, rgba(242,242,242,.55), rgba(255,255,255,1)); }

/* Our custom options injected into Woo form */
.hrsp-opt{ margin:10px 0; }
.hrsp-opt-label{ font-size:13px; font-weight:800; margin-bottom:7px; color:var(--hrsp-char); }
.hrsp-input{ width:100%; border:1px solid var(--hrsp-stroke); border-radius:14px; padding:12px 12px; font-size:14px; outline:none; background:#fff; }
.hrsp-input:focus{ border-color:rgba(211,47,47,.35); box-shadow:0 0 0 4px rgba(211,47,47,.10); }

.hrsp-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.hrsp-chip{ border:1px solid var(--hrsp-stroke); background:#fff; padding:10px 12px; border-radius:999px; font-weight:800; font-size:13px; cursor:pointer; transition:.15s ease; }
.hrsp-chip:hover{ transform:translateY(-1px); }
.hrsp-chip.is-active{ border-color:rgba(211,47,47,.35); background:rgba(211,47,47,.06); color:var(--hrsp-red); }

/* Hide Woo default single add-to-cart button; we use Add Now + Buy Now */
.single-product form.cart .single_add_to_cart_button{ display:none !important; }
.single-product .stock,
.single-product .woocommerce-variation-availability{ display:none !important; }

/* Hide the default variations table UI (we keep the selects for submission, but render chips) */
.single-product form.variations_form table.variations{ display:none !important; }
.single-product form.variations_form .reset_variations{ display:none !important; }

/* Hide native variation row for wrapping (we replace with chips) */
.single-product tr.hrsp-hide{ display:none !important; }
.single-product form.cart .quantity{ margin:8px 0 0; }
.single-product form.cart .quantity input.qty{ border-radius:14px; border:1px solid var(--hrsp-stroke); padding:10px 12px; width:120px; }

.hrsp-actions{ display:flex; gap:10px; margin-top:12px; }
.hrsp-btn{ flex:1; border-radius:16px; padding:14px 14px; font-weight:900; font-family:var(--font-heading, "Montserrat", system-ui); letter-spacing:.2px; cursor:pointer; border:1px solid transparent; transition:.15s ease; }
.hrsp-btn--primary{ background:var(--hrsp-red); color:#fff; box-shadow:0 10px 24px rgba(211,47,47,.20); }
.hrsp-btn--primary:hover{ transform:translateY(-1px); }
.hrsp-btn--ghost{ background:#fff; border-color:rgba(0,0,0,.10); color:var(--hrsp-char); }
.hrsp-btn--ghost:hover{ border-color:rgba(211,47,47,.30); color:var(--hrsp-red); }

.hrsp-mini{ display:flex; gap:8px; align-items:center; justify-content:center; margin-top:10px; font-size:12px; color:rgba(0,0,0,.62); }
.hrsp-mini-link{ background:none; border:none; color:var(--hrsp-red); font-weight:800; cursor:pointer; padding:0; text-decoration:underline; }
.hrsp-mini-sep{ opacity:.6; }
.hrsp-meta{ margin-top:14px; font-size:13px; color:rgba(0,0,0,.65); }
.hrsp-meta a{ color:inherit; }
.hrsp-meta a:hover{ color:var(--hrsp-red); }

/* Tabs */
.hrsp-tabs{ margin-top:16px; }
.hrsp-tabs.hrsp-card{ padding:16px; }
.hrsp-tabs-nav{ display:flex; gap:10px; flex-wrap:wrap; }
.hrsp-tab{ border:1px solid var(--hrsp-stroke); background:#fff; border-radius:999px; padding:9px 12px; font-weight:900; font-family:var(--font-heading, "Montserrat", system-ui); font-size:12.25px; cursor:pointer; }
.hrsp-tab.is-active{ background:rgba(183,110,121,.10); border-color:rgba(183,110,121,.25); color:var(--hrsp-rose); }
.hrsp-panels{ margin-top:12px; }
.hrsp-panel{ display:none; padding:10px 2px 2px; border:none; border-radius:0; background:transparent; box-shadow:none; }
.hrsp-panel.is-active{ display:block; }
.hrsp-rich{ font-size:12.5px; line-height:1.7; color:rgba(0,0,0,.75); }
.hrsp-muted{ font-size:12.5px; color:rgba(0,0,0,.60); }

/* Related grid */
.hrsp-related{ margin:18px 0 8px; padding:16px; }
.hrsp-related-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.hrsp-related-title{ margin:0; font-family:var(--font-heading, "Montserrat", system-ui); font-size:16px; }
.hrsp-related-more{ font-size:13px; font-weight:800; color:rgba(0,0,0,.65); text-decoration:none; }
.hrsp-related-more:hover{ color:var(--hrsp-red); }
.hrsp-related-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
@media (max-width: 980px){ .hrsp-related-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width: 640px){ .hrsp-related-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 360px){ .hrsp-related-grid{ grid-template-columns:1fr; } }
.hrsp-rcard{ border:1px solid var(--hrsp-stroke); border-radius:18px; background:#fff; box-shadow:var(--hrsp-shadow); overflow:hidden; transition:.15s ease; }
.hrsp-rcard:hover{ transform:translateY(-2px); }
.hrsp-rlink{ display:block; text-decoration:none; color:inherit; }
.hrsp-rmedia img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.hrsp-rbody{ padding:12px; }
.hrsp-rname{ font-weight:900; font-family:var(--font-heading, "Montserrat", system-ui); font-size:12.5px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hrsp-rprice{ margin-top:6px; font-weight:800; color:rgba(0,0,0,.75); font-size:12.5px; }
.hrsp-rprice del{ opacity:.55; }

/* Small feedback animation */
.hrsp-shake{ animation:hrspShake .45s ease; }
@keyframes hrspShake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-4px); }
  40%{ transform:translateX(4px); }
  60%{ transform:translateX(-3px); }
  80%{ transform:translateX(3px); }
}