/* ==========================================================================
   STONE CARDS — WooCommerce page styling
   Single product, shop archive, cart, checkout, order-received (success).
   Uses the design tokens defined in theme.css.
   ========================================================================== */

/* Reset some default WooCommerce chrome. */
.woocommerce .sc-wc, .sc-wc { color: var(--text); }
.woocommerce-breadcrumb, .sc-breadcrumb { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-3); flex-wrap:wrap; padding-block:6px 2px; }
.sc-breadcrumb a { color:var(--text-2); }
.sc-breadcrumb .sep { display:inline-flex; }
[dir="rtl"] .sc-breadcrumb .sep svg { transform:scaleX(-1); }
.sc-breadcrumb .current { color:var(--text); font-weight:600; }

.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice {
	background:var(--bg-2); border:1px solid var(--line); border-inline-start:3px solid var(--accent);
	border-radius:12px; color:var(--text); padding:14px 16px; list-style:none; margin:0 0 18px;
}
.woocommerce-error { border-inline-start-color:#e5484d; }
.woocommerce-message a, .woocommerce-info a, .woocommerce-error a { color:var(--accent-ink); font-weight:600; }

/* Buttons: make WooCommerce buttons adopt our look. */
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.alt, .woocommerce button.button.alt {
	background:var(--accent); color:var(--on-accent); border:none; border-radius:12px;
	font-weight:700; font-family:inherit; padding:12px 20px; cursor:pointer; box-shadow:var(--glow);
	transition:filter .2s ease, transform .2s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { filter:brightness(1.08); transform:translateY(-1px); color:var(--on-accent); }
.woocommerce .button.wc-backward, .woocommerce a.button.wc-backward { background:var(--bg-3); color:var(--text); border:1px solid var(--line); box-shadow:none; }

/* Form fields. */
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce .select2-container--default .select2-selection--single,
.sc-field input, .sc-field select {
	background:var(--bg-3); border:1.5px solid var(--line); border-radius:12px; color:var(--text);
	font-family:inherit; font-size:15px; padding:12px 14px; width:100%; outline:none;
	transition:border-color .2s ease;
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { border-color:var(--accent); }
.woocommerce form .form-row label, .sc-field label { color:var(--text-2); font-size:13px; font-weight:600; margin-bottom:7px; display:block; }
.woocommerce form .form-row { padding:0 0 14px; }

/* ==========================================================================
   SINGLE PRODUCT — mirrors the Product design
   ========================================================================== */
.sc-pd { display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(20px,3.5vw,44px); align-items:start; padding-block:18px 40px; }
.sc-pd-media { display:flex; flex-direction:column; gap:16px; position:sticky; top:86px; }
.sc-pd-art { position:relative; border-radius:22px; overflow:hidden; aspect-ratio:5/3.4; box-shadow:var(--card-shadow); padding:20px; background-size:cover; background-position:center; }
.sc-pd-art .mono { position:absolute; bottom:-18px; inset-inline-end:2px; font-family:var(--font-d); font-weight:700; font-size:clamp(120px,20vw,190px); color:rgba(255,255,255,.16); line-height:.8; user-select:none; letter-spacing:-.04em; }
.sc-pd-art .region { position:absolute; top:16px; inset-inline-start:16px; background:rgba(0,0,0,.42); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#fff; font-size:12px; font-weight:600; padding:5px 12px; border-radius:20px; }
.sc-pd-art .instant { position:absolute; top:16px; inset-inline-end:16px; display:inline-flex; align-items:center; gap:5px; background:var(--accent); color:var(--on-accent); font-size:12px; font-weight:700; padding:5px 12px; border-radius:20px; }
.sc-pd-art .pname { position:absolute; bottom:16px; inset-inline-start:16px; color:#fff; font-family:var(--font-d); font-weight:700; font-size:clamp(20px,3vw,26px); text-shadow:0 2px 12px rgba(0,0,0,.35); max-width:70%; }
.sc-pd-chips { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.sc-pd-chip { background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:12px 10px; text-align:center; }
.sc-pd-chip svg { margin-bottom:5px; }
.sc-pd-chip .t { font-size:12px; font-weight:700; }

.sc-pd-panel { display:flex; flex-direction:column; gap:20px; background:var(--bg-2); border:1px solid var(--line); border-radius:20px; padding:clamp(18px,2.4vw,28px); box-shadow:var(--card-shadow); }
.sc-pd-cat { display:inline-block; background:var(--accent-soft); color:var(--accent-ink); font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:20px; letter-spacing:.02em; align-self:flex-start; }
.sc-pd-title { font-size:clamp(24px,3.4vw,34px); font-weight:700; margin:12px 0 0; letter-spacing:-.01em; line-height:1.1; }
.sc-pd-meta { display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; font-size:13px; color:var(--text-3); }
.sc-pd-meta .rate { display:inline-flex; align-items:center; gap:3px; color:var(--text); font-weight:700; font-size:14px; }
.sc-pd-meta .dot { width:3px; height:3px; border-radius:50%; background:var(--text-3); }
.sc-pd-meta .best { color:var(--accent-ink); font-weight:600; }
.sc-rule { height:1px; background:var(--line); }

.sc-pd-block .head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px; }
.sc-pd-block .head .lbl { font-weight:700; font-size:15px; }
.sc-pd-block .head .hint { color:var(--text-3); font-size:12.5px; }

.sc-denoms { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.sc-denom { position:relative; text-align:start; cursor:pointer; font-family:inherit; border-radius:14px; padding:14px 15px; border:2px solid var(--line); background:var(--bg-3); transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.sc-denom:hover { transform:translateY(-2px); border-color:var(--accent); }
.sc-denom.is-active { border-color:var(--accent); background:var(--accent-soft); box-shadow:var(--glow); }
.sc-denom .d-label { font-family:var(--font-d); font-weight:700; font-size:18px; color:var(--text); }
.sc-denom .d-pay { font-size:12.5px; color:var(--text-2); margin-top:3px; }
.sc-denom .d-check { position:absolute; top:10px; inset-inline-end:10px; width:20px; height:20px; border-radius:50%; background:var(--accent); color:var(--on-accent); display:inline-flex; align-items:center; justify-content:center; opacity:0; transition:opacity .18s ease; }
.sc-denom.is-active .d-check { opacity:1; }

.sc-regions { display:flex; gap:9px; flex-wrap:wrap; }
.sc-region { display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-family:inherit; font-weight:600; font-size:13.5px; color:var(--text); border-radius:11px; padding:9px 13px; border:2px solid var(--line); background:var(--bg-3); transition:border-color .18s ease, background-color .18s ease; }
.sc-region.is-active { border-color:var(--accent); background:var(--accent-soft); }
.sc-region .flag { border-radius:2px; flex-shrink:0; }

.sc-pd-total { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sc-pd-total .lbl { color:var(--text-2); font-size:14px; font-weight:600; }
.sc-pd-total .amt { font-family:var(--font-d); font-weight:700; font-size:clamp(26px,3.4vw,32px); color:var(--text); }

.sc-pd-buy { width:100%; border-radius:14px; padding:16px; font-weight:700; font-size:16.5px; gap:9px; }
.sc-pd-note { display:flex; align-items:flex-start; gap:9px; background:var(--accent-soft); border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:13px; color:var(--text); line-height:1.5; }
.sc-pd-note svg { flex-shrink:0; margin-top:1px; }
.sc-pd-pay { display:flex; align-items:center; gap:10px; color:var(--text-3); font-size:12.5px; flex-wrap:wrap; }

/* FAQ accordion. */
.sc-faq-wrap { padding-block:8px 48px; }
.sc-faq-wrap h2 { font-size:clamp(20px,2.6vw,26px); font-weight:700; margin:0 0 18px; letter-spacing:-.01em; }
.sc-faqs { display:flex; flex-direction:column; gap:12px; max-width:820px; }
.sc-faq { background:var(--bg-2); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:border-color .2s ease; }
.sc-faq.is-open { border-color:var(--accent-soft); }
.sc-faq-q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; text-align:start; cursor:pointer; font-family:inherit; background:transparent; border:none; padding:16px 18px; color:var(--text); }
.sc-faq-q .q { display:inline-flex; align-items:center; gap:11px; font-weight:700; font-size:15px; }
.sc-faq-q .q .ic { width:28px; height:28px; flex-shrink:0; border-radius:8px; background:var(--accent-soft); color:var(--accent-ink); display:inline-flex; align-items:center; justify-content:center; }
.sc-faq-q .chev { flex-shrink:0; color:var(--text-2); transition:transform .25s ease; }
.sc-faq.is-open .chev { transform:rotate(180deg); }
.sc-faq-a { overflow:hidden; max-height:0; opacity:0; transition:max-height .3s ease, opacity .25s ease; }
.sc-faq.is-open .sc-faq-a { max-height:520px; opacity:1; }
.sc-faq-a .inner { padding:0 18px 18px; }
.sc-faq-a p { margin:0; font-size:14px; color:var(--text-2); line-height:1.6; }
.sc-steps { display:flex; flex-direction:column; gap:12px; }
.sc-step { display:flex; align-items:flex-start; gap:12px; }
.sc-step .n { width:26px; height:26px; flex-shrink:0; border-radius:50%; background:var(--accent); color:var(--on-accent); font-family:var(--font-d); font-weight:700; font-size:13px; display:inline-flex; align-items:center; justify-content:center; }
.sc-step .txt { font-size:14px; color:var(--text-2); line-height:1.55; padding-top:3px; }

/* ==========================================================================
   SHOP ARCHIVE
   ========================================================================== */
.sc-shop-head { margin-block:8px 22px; }
.sc-shop-head h1 { font-size:clamp(24px,3.2vw,32px); font-weight:700; margin:0; letter-spacing:-.01em; }
.sc-shop-head p { margin:.4em 0 0; color:var(--text-2); font-size:15px; }
.woocommerce ul.products, .woocommerce-page ul.products { display:grid!important; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:18px; margin:0 0 24px; padding:0; list-style:none; }
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width:auto!important; margin:0!important; padding:0!important; float:none!important; list-style:none; }
.woocommerce ul.products::before, .woocommerce ul.products::after { content:none!important; display:none!important; }
.woocommerce ul.products li.product .sc-card { height:100%; }
.woocommerce-result-count { color:var(--text-3); font-size:13px; }
.woocommerce-ordering select { background:var(--bg-3); border:1px solid var(--line); border-radius:10px; color:var(--text); padding:8px 12px; font-family:inherit; }
.woocommerce nav.woocommerce-pagination ul { border:none; display:flex; gap:8px; justify-content:center; }
.woocommerce nav.woocommerce-pagination ul li { border:none; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { background:var(--bg-2); border:1px solid var(--line); border-radius:10px; color:var(--text); padding:8px 13px; }
.woocommerce nav.woocommerce-pagination ul li span.current { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }

/* ==========================================================================
   CART
   ========================================================================== */
.sc-cart { padding-block:18px 44px; }
.sc-cart h1 { font-size:clamp(24px,3.2vw,32px); font-weight:700; margin:0 0 22px; }
.woocommerce-cart table.cart, .woocommerce table.shop_table { background:var(--bg-2); border:1px solid var(--line); border-radius:16px; border-collapse:separate; overflow:hidden; }
.woocommerce table.shop_table th { color:var(--text-2); font-size:13px; border-bottom:1px solid var(--line); }
.woocommerce table.shop_table td { border-top:1px solid var(--line); color:var(--text); }
.woocommerce-cart table.cart img { width:64px; border-radius:10px; }
.woocommerce a.remove { color:var(--text-3)!important; border-radius:50%; }
.woocommerce a.remove:hover { background:#e5484d!important; color:#fff!important; }
.cart_totals h2 { font-size:18px; font-weight:700; margin:0 0 14px; }
.cart_totals table { background:var(--bg-2); border:1px solid var(--line); border-radius:16px; }

/* ==========================================================================
   CHECKOUT — mirrors the Checkout design
   ========================================================================== */
.sc-co-top { padding-block:22px 6px; }
.sc-co-back { display:inline-flex; align-items:center; gap:6px; color:var(--text-2); font-size:13.5px; font-weight:600; }
[dir="rtl"] .sc-co-back svg { transform:scaleX(-1); }
.sc-co-title { font-size:clamp(24px,3.4vw,32px); font-weight:700; margin:12px 0 0; letter-spacing:-.01em; }
.sc-co { display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(20px,3vw,36px); align-items:start; padding-block:18px 46px; }
.sc-co-main { display:flex; flex-direction:column; gap:18px; }
.sc-co-card { background:var(--bg-2); border:1px solid var(--line); border-radius:18px; padding:clamp(18px,2.2vw,24px); box-shadow:var(--card-shadow); }
.sc-co-step { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.sc-co-step .n { width:26px; height:26px; border-radius:8px; background:var(--accent); color:var(--on-accent); font-family:var(--font-d); font-weight:700; font-size:13px; display:inline-flex; align-items:center; justify-content:center; }
.sc-co-step h2 { font-size:16px; font-weight:700; margin:0; }
.sc-co-sub { margin:0 0 14px 36px; color:var(--text-3); font-size:13px; line-height:1.5; }
[dir="rtl"] .sc-co-sub { margin:0 36px 14px 0; }
.sc-co-aside { display:flex; flex-direction:column; gap:16px; position:sticky; top:86px; }
.sc-co-summary .sum-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:16px; }
.sc-co-summary .sum-head h2 { font-size:16px; font-weight:700; margin:0; }
.sc-co-summary .pill { background:var(--accent-soft); color:var(--accent-ink); font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; }
.sc-co-line { display:flex; justify-content:space-between; gap:10px; font-size:14px; padding:5px 0; }
.sc-co-line .k { color:var(--text-2); }
.sc-co-line .v { font-weight:600; color:var(--text); }
.sc-co-total { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:6px 0 16px; }
.sc-co-total .lbl { font-weight:700; font-size:15px; }
.sc-co-total .amt { font-family:var(--font-d); font-weight:700; font-size:26px; }
.sc-trust-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sc-trust-mini { display:flex; align-items:center; gap:9px; background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:12px; }
.sc-trust-mini .t { font-size:12px; font-weight:600; line-height:1.3; }

/* Payment box (WooCommerce #payment) restyle. */
#payment, .woocommerce-checkout #payment { background:transparent; border-radius:0; }
#payment ul.payment_methods { border:none; padding:0; margin:0 0 12px; }
#payment ul.payment_methods li { list-style:none; border:2px solid var(--line); background:var(--bg-3); border-radius:13px; padding:12px 15px; margin-bottom:10px; }
#payment ul.payment_methods li.sc-selected, #payment ul.payment_methods li:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); }
#payment ul.payment_methods li label { color:var(--text); font-weight:700; font-size:14.5px; display:inline; }
#payment div.payment_box { background:var(--bg-3); border-radius:10px; color:var(--text-2); font-size:13px; }
#payment div.payment_box::before { display:none; }
#place_order, button#place_order { width:100%; border-radius:14px; padding:16px; font-size:16px; }
.woocommerce-checkout #payment div.form-row { padding:12px 0 0; }

/* ==========================================================================
   ORDER RECEIVED — mirrors the Success design
   ========================================================================== */
@keyframes scPop { 0% { transform:scale(.5); opacity:0; } 60% { transform:scale(1.08); } 100% { transform:scale(1); opacity:1; } }
@keyframes scRing { 0% { transform:scale(.8); opacity:.55; } 100% { transform:scale(2.3); opacity:0; } }
@keyframes scUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }

.sc-success { max-width:660px; margin-inline:auto; padding-block:clamp(28px,5vw,48px) 56px; display:flex; flex-direction:column; align-items:center; }
.sc-success-badge { position:relative; width:96px; height:96px; display:flex; align-items:center; justify-content:center; margin-bottom:22px; }
.sc-success-badge .ring { position:absolute; inset:0; border-radius:50%; border:2px solid var(--accent); animation:scRing 1.8s ease-out infinite; }
.sc-success-badge .ring2 { animation-delay:.5s; }
.sc-success-badge .core { position:relative; width:82px; height:82px; border-radius:50%; background:var(--accent); color:var(--on-accent); display:inline-flex; align-items:center; justify-content:center; box-shadow:var(--glow); animation:scPop .6s cubic-bezier(.2,.9,.3,1.2) both; }
.sc-success h1 { font-size:clamp(26px,4.4vw,38px); font-weight:700; margin:0; text-align:center; letter-spacing:-.02em; animation:scUp .5s ease .1s both; }
.sc-success .sub { margin:12px 0 0; text-align:center; color:var(--text-2); font-size:clamp(14px,1.7vw,16.5px); line-height:1.55; max-width:460px; animation:scUp .5s ease .18s both; }
.sc-success .sent { display:inline-flex; align-items:center; gap:8px; background:var(--accent-soft); border:1px solid var(--line); border-radius:20px; padding:8px 15px; margin-top:16px; font-size:13.5px; color:var(--text); animation:scUp .5s ease .24s both; }
.sc-success-card { width:100%; background:var(--bg-2); border:1px solid var(--line); border-radius:20px; padding:clamp(18px,2.4vw,26px); box-shadow:var(--card-shadow); margin-top:28px; animation:scUp .5s ease .3s both; }
.sc-oc-head { display:flex; align-items:center; gap:13px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.sc-oc-art { position:relative; width:74px; height:50px; flex-shrink:0; border-radius:10px; overflow:hidden; background-size:cover; }
.sc-oc-art .mono { position:absolute; bottom:-5px; inset-inline-end:2px; font-family:var(--font-d); font-weight:700; font-size:34px; color:rgba(255,255,255,.22); line-height:1; }
.sc-oc-head .info { min-width:0; flex:1; }
.sc-oc-head .info .name { font-weight:700; font-size:15.5px; line-height:1.25; }
.sc-oc-head .info .meta { color:var(--text-3); font-size:12.5px; margin-top:3px; }
.sc-oc-head .ono { text-align:end; }
.sc-oc-head .ono .k { color:var(--text-3); font-size:11px; }
.sc-oc-head .ono .v { font-weight:700; font-size:13px; font-family:var(--font-d); }
.sc-code-row { display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; margin-top:10px; }
.sc-code-box { flex:1; min-width:200px; display:flex; align-items:center; justify-content:center; background:var(--bg-3); border:1.5px dashed var(--line); border-radius:14px; padding:16px; font-family:ui-monospace,'Space Grotesk',monospace; font-weight:700; font-size:clamp(17px,3vw,23px); letter-spacing:.14em; color:var(--text); direction:ltr; transition:border-color .2s ease; }
.sc-code-box.is-revealed { border-color:var(--accent); border-style:solid; user-select:all; }
.sc-code-actions { display:flex; gap:10px; }
.sc-code-actions button { min-width:110px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:14px; font-family:inherit; font-weight:700; font-size:14px; cursor:pointer; padding:0 18px; }
.sc-reveal-btn { background:var(--bg-3); border:1.5px solid var(--line); color:var(--text); transition:border-color .2s ease; }
.sc-reveal-btn:hover { border-color:var(--accent); }
.sc-copy-btn { background:var(--accent); color:var(--on-accent); border:none; box-shadow:var(--glow); padding:14px 18px; }
.sc-keepsafe { display:flex; align-items:flex-start; gap:8px; margin-top:14px; color:var(--text-3); font-size:12.5px; line-height:1.5; }
.sc-keepsafe svg { flex-shrink:0; margin-top:1px; }
.sc-success-redeem { width:100%; background:var(--bg-2); border:1px solid var(--line); border-radius:20px; padding:clamp(18px,2.4vw,26px); margin-top:16px; animation:scUp .5s ease .36s both; }
.sc-success-redeem h2 { font-size:16px; font-weight:700; margin:0 0 16px; display:flex; align-items:center; gap:9px; }
.sc-success-redeem h2 .ic { width:26px; height:26px; border-radius:8px; background:var(--accent-soft); color:var(--accent-ink); display:inline-flex; align-items:center; justify-content:center; }
.sc-success-actions { width:100%; display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; animation:scUp .5s ease .42s both; }
.sc-success-actions a { flex:1; min-width:200px; display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:14px; padding:16px; font-weight:700; font-size:15.5px; }
.sc-success-actions .primary { background:var(--accent); color:var(--on-accent); box-shadow:var(--glow); }
.sc-success-actions .ghost { background:transparent; color:var(--text); border:1.5px solid var(--line); }
.sc-success-actions .ghost:hover { border-color:var(--accent); color:var(--text); }
.sc-success-note { margin-top:22px; text-align:center; color:var(--text-3); font-size:12.5px; line-height:1.55; max-width:420px; animation:scUp .5s ease .48s both; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px) {
	.sc-pd { grid-template-columns:1fr; }
	.sc-pd-media { position:static; }
}
@media (max-width:860px) {
	.sc-co { grid-template-columns:1fr; }
	.sc-co-aside { position:static; }
}
