/* =====================================================
   RBD FASHION — store.css
   CI4 storefront additions on top of style.css
   Product page · checkout · order page · alerts
   ===================================================== */

/* Buttons */
.btn--wa { border-color: #25D366; color: #25D366; }
.btn--wa::before { background: #25D366; }
.btn--wa:hover { color: #0b1f12; }
.btn--filled.btn--wa { background: #25D366; color: #0b1f12; }
.btn--filled.btn--wa::before { background: #3ee07a; }
.btn--dark { border-color: var(--black); color: var(--black); }
.btn--dark::before { background: var(--black); }
.btn--dark:hover { color: var(--gold); }
.btn--block { display: block; width: 100%; text-align: center; margin-top: 12px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.cart-actions a.btn { display: block; }
.cart-note { font-size: .62rem; letter-spacing: .12em; color: var(--ivory-dim); margin: -6px 0 16px; }

/* Photography slots (hero, collections, about) */
.hero { padding: calc(var(--nav-h) + 48px) 0 110px; box-sizing: border-box; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.hero--image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.72) 60%, rgba(17,17,17,.96) 100%); pointer-events: none; }
.hero--image .hero__content, .hero--image .hero__scroll-indicator { z-index: 2; }
.hero--image .hero__bg-lines { opacity: .5; z-index: 1; }
.cat-card__img, .about-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-img { filter: saturate(.9); }

/* Honeypot */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* Alerts */
.site-alert { padding: 14px 18px; margin: 0 0 28px; font-size: .8rem; letter-spacing: .03em; line-height: 1.6; border: 1px solid; }
.site-alert--success { border-color: rgba(37,211,102,.45); background: rgba(37,211,102,.07); color: #bff0cf; }
.site-alert--error { border-color: rgba(224,92,92,.5); background: rgba(224,92,92,.08); color: #f3c4c4; }

/* Product cards (real images) */
.product-card__img-wrap { display: block; background: #1a1410; }
.product-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.product-card:hover .product-card__img { transform: scale(1.04); }
a.product-card__name { display: block; }
a.product-card__name:hover { color: var(--gold); }
.product-card__was { color: var(--ivory-dim); opacity: .6; margin-left: 6px; font-size: .7rem; }
a.add-to-bag-btn { display: inline-block; }
.add-to-bag-btn.is-disabled { opacity: .45; pointer-events: none; }
.featured-section { padding: 100px var(--pad-x); }

/* Shop sub-controls */
.shop-subcontrols { max-width: var(--max-w); margin: 0 auto; padding: 22px var(--pad-x); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(201,160,112,0.08); }
.shop-cats { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.shop-cat { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ivory-dim); padding-bottom: 3px; border-bottom: 1px solid transparent; }
.shop-cat:hover, .shop-cat.active { color: var(--gold); border-bottom-color: var(--gold); }
.shop-search { display: flex; gap: 16px; align-items: center; }
.shop-search .form-input { width: 200px; padding: 8px 0; font-size: .8rem; }
.shop-search .form-select { width: auto; padding: 8px 0; font-size: .75rem; }
.shop-empty { text-align: center; padding: 100px var(--pad-x); display: flex; flex-direction: column; gap: 16px; align-items: center; }
.shop-pager { max-width: var(--max-w); margin: 0 auto; padding: 40px var(--pad-x); }
.shop-pager ul { display: flex; gap: 6px; justify-content: center; list-style: none; flex-wrap: wrap; }
.shop-pager li a, .shop-pager li span { display: inline-block; min-width: 38px; padding: 8px 12px; text-align: center; border: 1px solid rgba(201,160,112,.25); font-size: .72rem; color: var(--ivory-dim); }
.shop-pager li.active a, .shop-pager li a:hover { border-color: var(--gold); color: var(--gold); }

/* Product detail */
.pdp { max-width: var(--max-w); margin: 0 auto; padding: calc(var(--nav-h) + 40px) var(--pad-x) 100px; }
.pdp__crumbs { font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ivory-dim); margin-bottom: 32px; }
.pdp__crumbs a:hover { color: var(--gold); }
.pdp__crumbs span { color: var(--gold); }
.pdp__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.pdp__main { aspect-ratio: 3/4; background: #1a1410; overflow: hidden; }
.pdp__main img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; }
.pdp__thumb { aspect-ratio: 1; border: 1px solid transparent; padding: 0; background: #1a1410; cursor: pointer; overflow: hidden; }
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumb.active { border-color: var(--gold); }
.pdp__info.product-card, .pdp__info.product-card:hover { background: transparent; }
.pdp__info { position: sticky; top: calc(var(--nav-h) + 24px); }
.pdp__title { font-size: clamp(2rem, 4vw, 3rem); margin: 6px 0 12px; }
.pdp__price { font-size: 1.25rem; color: var(--champagne); letter-spacing: .04em; margin-bottom: 20px; }
.pdp__price s { font-size: .9rem; color: var(--ivory-dim); opacity: .6; margin-left: 10px; }
.pdp__lead { margin-bottom: 28px; }
.pdp__option { margin-bottom: 24px; }
.pdp__chosen { color: var(--ivory); letter-spacing: .1em; margin-left: 8px; }
.option-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.option-pill { min-width: 46px; padding: 10px 14px; border: 1px solid rgba(239,237,235,.2); color: var(--ivory-dim); background: transparent; font-family: var(--font-body); font-size: .7rem; letter-spacing: .08em; cursor: pointer; transition: var(--transition); }
.option-pill:hover { border-color: var(--gold); color: var(--gold); }
.option-pill.active { border-color: var(--gold); background: var(--gold); color: var(--black); }
.pdp__buy { display: flex; gap: 14px; align-items: stretch; margin: 32px 0 12px; }
.pdp__buy .btn { flex: 1; text-align: center; }
.qty-wrap--lg { border: 1px solid rgba(201,160,112,.28); gap: 0; }
.qty-wrap--lg .qty-btn { width: 40px; height: auto; border: 0; font-size: 1.1rem; }
.qty-input { width: 44px; background: transparent; border: 0; color: var(--ivory); text-align: center; font-family: var(--font-body); -moz-appearance: textfield; }
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pdp__error { color: #f3a3a3; font-size: .75rem; margin: 6px 0 12px; }
.pdp__stock { color: var(--gold); font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; }
.pdp__wa { display: block; text-align: center; margin: 18px 0 36px; }
.pdp__desc { border-top: 1px solid rgba(201,160,112,.15); padding-top: 24px; }
.pdp__desc p { margin-bottom: 12px; font-size: .85rem; }

/* Compact hero */
.page-hero--compact { padding: calc(var(--nav-h) + 48px) var(--pad-x) 48px; }

/* Checkout */
.checkout { max-width: var(--max-w); margin: 0 auto; padding: 56px var(--pad-x) 100px; }
.checkout__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
.checkout__grid[hidden] { display: none; }
.checkout__block { margin-bottom: 44px; }
.checkout__h { font-family: var(--font-display); font-size: 1.45rem; color: var(--ivory); margin-bottom: 22px; font-weight: 500; }
.checkout__opt { font-family: var(--font-body); font-size: .62rem; letter-spacing: .1em; color: var(--ivory-dim); }
.checkout__block .form-group { margin-bottom: 26px; }
.checkout__summary { position: sticky; top: calc(var(--nav-h) + 24px); }
.order-summary, .order-box { background: var(--black-mid); border: 1px solid rgba(201,160,112,.14); padding: 28px; margin-bottom: 20px; }
.order-box--highlight { border-color: rgba(201,160,112,.45); }
.summary-items { margin-bottom: 18px; }
.summary-loading { font-size: .78rem; color: var(--ivory-dim); }
.summary-item { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(201,160,112,.08); }
.summary-item__thumb { width: 52px; height: 64px; flex-shrink: 0; background: linear-gradient(145deg, #1a1410, #2c241a); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.summary-item__meta { flex: 1; min-width: 0; }
.summary-item__name { font-family: var(--font-display); color: var(--ivory); font-size: 1rem; }
.summary-item__variant { font-size: .68rem; color: var(--ivory-dim); letter-spacing: .05em; }
.summary-item__price { font-size: .8rem; color: var(--champagne); white-space: nowrap; }
.summary-row { display: flex; justify-content: space-between; font-size: .8rem; padding: 8px 0; color: var(--ivory-dim); gap: 12px; }
.summary-row--total { border-top: 1px solid rgba(201,160,112,.3); margin-top: 8px; padding-top: 16px; font-size: 1rem; color: var(--ivory); }
.summary-row--total span:last-child { color: var(--gold); font-family: var(--font-display); font-size: 1.4rem; }
.checkout__submit { width: 100%; margin-top: 22px; text-align: center; }
.checkout__fine { font-size: .65rem; color: var(--ivory-dim); text-align: center; margin-top: 14px; }
.checkout__fine a, .checkout__help { color: var(--gold); }
.checkout__help { display: block; text-align: center; font-size: .7rem; margin-top: 12px; letter-spacing: .06em; }
.checkout__empty { text-align: center; padding: 60px 0; display: flex; flex-direction: column; gap: 20px; align-items: center; }
.checkout__empty[hidden] { display: none; }
.pay-options { display: flex; flex-direction: column; gap: 10px; }
.pay-option { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid rgba(239,237,235,.14); cursor: pointer; transition: var(--transition); }
.pay-option:hover { border-color: rgba(201,160,112,.5); }
.pay-option:has(input:checked) { border-color: var(--gold); background: rgba(201,160,112,.06); }
.pay-option input { accent-color: var(--gold); margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; }
.pay-option__title { display: block; color: var(--ivory); font-size: .85rem; font-weight: 500; margin-bottom: 4px; }
.pay-option__desc { display: block; font-size: .74rem; color: var(--ivory-dim); line-height: 1.6; }

/* Order page */
.order-page { max-width: var(--max-w); margin: 0 auto; padding: 48px var(--pad-x) 100px; }
.order-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
.order-steps { display: flex; list-style: none; margin: 0 auto 40px; max-width: 760px; padding: 0; }
.order-step { flex: 1; text-align: center; font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ivory-dim); position: relative; padding-top: 26px; }
.order-step span { position: absolute; top: 0; left: 50%; width: 14px; height: 14px; margin-left: -7px; border: 1px solid rgba(201,160,112,.4); border-radius: 50%; background: var(--black); z-index: 1; }
.order-step::before { content: ''; position: absolute; top: 7px; left: -50%; right: 50%; height: 1px; background: rgba(201,160,112,.2); }
.order-step:first-child::before { display: none; }
.order-step.done { color: var(--gold); }
.order-step.done span { background: var(--gold); border-color: var(--gold); }
.order-step.done::before { background: var(--gold); }
.bank-details { display: grid; margin-bottom: 18px; border: 1px solid rgba(201,160,112,.2); }
.bank-details > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(201,160,112,.1); font-size: .8rem; }
.bank-details > div:last-child { border-bottom: 0; }
.bank-details span { color: var(--ivory-dim); }
.bank-details strong { color: var(--ivory); font-weight: 500; text-align: right; }
.copyable { cursor: pointer; border-bottom: 1px dashed rgba(201,160,112,.5); }
.copyable.copied::after { content: ' ✓ copied'; color: var(--gold); font-size: .7rem; }
.order-note { font-size: .78rem; color: var(--ivory-dim); margin: 10px 0; line-height: 1.7; }
.order-note a { color: var(--gold); }
.order-inline-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.order-inline-form .form-input { flex: 1; min-width: 180px; }
.order-dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; font-size: .8rem; margin-bottom: 14px; }
.order-dl dt { color: var(--gold); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; padding-top: 3px; }
.order-dl dd { color: var(--ivory); margin: 0; }

/* CMS pages */
.cms-content h2 { font-size: 1.6rem; margin: 36px 0 14px; }
.cms-content h3 { font-size: 1.25rem; margin: 28px 0 10px; }
.cms-content p, .cms-content li { font-size: .88rem; line-height: 1.9; margin-bottom: 14px; }
.cms-content ul, .cms-content ol { padding-left: 20px; margin-bottom: 16px; }
.cms-content a { color: var(--gold); text-decoration: underline; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }

@media (max-width: 900px) {
  .pdp__grid, .checkout__grid, .order-grid { grid-template-columns: 1fr; }
  .pdp__info, .checkout__summary { position: static; }
  .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .shop-search { width: 100%; }
  .shop-search .form-input { flex: 1; width: auto; }
  .order-step { font-size: .5rem; letter-spacing: .05em; }
  .order-summary, .order-box { padding: 20px; }
}