/*
Theme Name: OPTCG Accessories
Theme URI: https://optcgaccessories.com
Description: Dark storefront child theme for OPTCG Accessories. Layout inspired by premium TCG accessory stores, themed for the One Piece Card Game.
Author: OPTCG Accessories
Template: twentytwentyfive
Version: 0.1.5
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: optcg-accessories
*/

:root {
  --op-bg: #141516;
  --op-surface: #1c1e20;
  --op-surface-2: #232628;
  --op-text: #e8e6e3;
  --op-muted: #a7a39d;
  --op-gold: #f2b705;
  --op-red: #d22630;
  --op-border: #2c2f32;
  --op-diag: 4vw;
}

html, body { background: var(--op-bg); color: var(--op-text); }
body { font-family: "Ubuntu", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .wp-block-heading { font-family: "Jost", "Ubuntu", sans-serif; letter-spacing: .01em; }

/* ---------- Announcement bar ---------- */
.op-announce { background: #000; color: var(--op-gold); font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-align: center; padding: .4rem 1rem; }
.op-announce p { margin: 0; }

/* ---------- Header ---------- */
.op-header { background: var(--op-bg); border-bottom: 1px solid var(--op-border); position: sticky; top: 0; z-index: 50; }
.op-header .wp-block-group { align-items: center; }
.op-logo { font-family: "Jost", sans-serif; font-weight: 700; font-size: 1.7rem; letter-spacing: -.02em; text-decoration: none; color: var(--op-text); line-height: 1; }
.op-logo span { color: var(--op-gold); }
.op-header .wp-block-navigation a { font-size: .95rem; font-weight: 500; color: var(--op-text); }
.op-header .wp-block-navigation a:hover { color: var(--op-gold); }
.op-header .wp-block-search__button { background: transparent; border: 0; color: var(--op-text); padding: .3rem; }
.op-header .wp-block-search__inside-wrapper { border: 0; }
.op-header .wc-block-mini-cart__button, .op-header .wc-block-customer-account__account-icon { color: var(--op-text); }
.op-header .wc-block-mini-cart__badge { background: var(--op-gold); color: #000; }

/* ---------- Diagonal sections ---------- */
.op-diag { clip-path: polygon(0 0, 100% var(--op-diag), 100% 100%, 0 calc(100% - var(--op-diag))); margin-top: calc(var(--op-diag) * -1); padding-top: calc(var(--op-diag) + 3rem) !important; padding-bottom: calc(var(--op-diag) + 3rem) !important; }
.op-diag-rev { clip-path: polygon(0 var(--op-diag), 100% 0, 100% calc(100% - var(--op-diag)), 0 100%); margin-top: calc(var(--op-diag) * -1); padding-top: calc(var(--op-diag) + 3rem) !important; padding-bottom: calc(var(--op-diag) + 3rem) !important; }
.op-light { background: #efefef; color: #141516; }
.op-light h2, .op-light h3 { color: #141516; }

/* ---------- Vertical section label ---------- */
.op-section { position: relative; }
.op-vlabel { position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; font-family: "Jost", sans-serif; font-weight: 500; font-size: 2rem; letter-spacing: .25em; text-transform: uppercase; color: var(--op-text); opacity: .9; pointer-events: none; }
.op-light .op-vlabel { color: #141516; }
@media (max-width: 900px) { .op-vlabel { display: none; } }

/* ---------- Hero ---------- */
.op-hero { min-height: 72vh; background: radial-gradient(1200px 600px at 70% 30%, #2a2416 0%, #141516 55%), var(--op-bg); border-bottom: 1px solid var(--op-border); }
.op-hero .op-kicker { color: var(--op-gold); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; }
.op-hero h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.02; margin: .4rem 0 1rem; }
.op-hero p.op-lede { color: var(--op-muted); font-size: 1.1rem; max-width: 34rem; }
.op-hero img { filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); }

/* ---------- Buttons ---------- */
.wp-block-button__link, .wc-block-components-button, .button, button.single_add_to_cart_button, .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button {
  background: var(--op-gold) !important; color: #000 !important; border: 1px solid var(--op-gold) !important; border-radius: 4px !important; font-family: "Ubuntu", sans-serif; font-weight: 600; letter-spacing: .02em; padding: .8rem 1.5rem;
}
.wp-block-button__link:hover, .button:hover { background: #ffd23f !important; }
.is-style-outline .wp-block-button__link, .op-btn-outline .wp-block-button__link { background: transparent !important; color: var(--op-text) !important; border: 1px solid var(--op-text) !important; }
.is-style-outline .wp-block-button__link:hover, .op-btn-outline .wp-block-button__link:hover { border-color: var(--op-gold) !important; color: var(--op-gold) !important; }

/* ---------- Category tiles ---------- */
.op-tiles { background: var(--op-bg); }
.op-tile { text-align: center; text-decoration: none; }
.op-tile img, .op-tile svg { width: 120px; height: 120px; object-fit: contain; margin: 0 auto .8rem; display: block; }
.op-tile h3 { font-size: 1rem; margin: 0; font-weight: 600; }
.op-tile .op-sub { font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--op-muted); margin: .2rem 0 0; }
.op-tile:hover h3 { color: var(--op-gold); }

/* ---------- System circles ---------- */
.op-system-card { background: var(--op-surface); border: 1px solid var(--op-border); padding: 3rem 2rem; color: var(--op-text); }
.op-light .op-system-card h2, .op-light .op-system-card h3, .op-light .op-system-card li, .op-light .op-system-card p, .op-system-card li, .op-system-card p { color: var(--op-text); }
.op-light.op-diag { padding-top: calc(var(--op-diag) + 1.5rem) !important; padding-bottom: calc(var(--op-diag) + 1.5rem) !important; }
.op-circles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; align-items: start; }
.op-circle { aspect-ratio: 1; min-height: 0; border-radius: 50%; background: var(--op-surface-2); border: 1px solid var(--op-border); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1rem .9rem; box-sizing: border-box; }
.op-circle .op-ico { font-size: 1.5rem; color: var(--op-gold); margin-bottom: .2rem; line-height: 1; }
.op-circle h3 { font-size: .95rem; letter-spacing: .15em; text-transform: uppercase; margin: 0 0 .2rem; }
.op-circle p { font-size: .72rem; line-height: 1.35; color: var(--op-muted); margin: 0 0 .5rem; }
.op-circle .wp-block-button__link { padding: .35rem .8rem; font-size: .72rem; }
@media (max-width: 782px) { .op-circle { max-width: 260px; margin: 0 auto; } }
.op-check li { list-style: none; padding-left: 1.6rem; position: relative; margin: .5rem 0; }
.op-check li::before { content: "\2713"; position: absolute; left: 0; color: var(--op-gold); font-weight: 700; }
.op-check { padding-left: 0; }
@media (max-width: 782px) { .op-circles { grid-template-columns: 1fr; } }

/* ---------- Crew list ---------- */
.op-crews { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem 2rem; padding: 0; list-style: none; max-width: 26rem; }
.op-crews li { display: flex; align-items: center; gap: .6rem; font-size: .95rem; }
.op-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #3a3d40; display: inline-block; flex: none; }

/* ---------- Trust bar ---------- */
.op-trust { background: var(--op-surface); border-top: 1px solid var(--op-border); border-bottom: 1px solid var(--op-border); }
.op-trust .wp-block-column { padding: 1.4rem 1rem; border-right: 1px solid var(--op-border); }
.op-trust .wp-block-column:last-child { border-right: 0; }
.op-trust h4 { font-size: 1rem; margin: 0; }
.op-trust p { font-size: .85rem; color: var(--op-muted); margin: .2rem 0 0; }

/* ---------- Footer ---------- */
.op-footer { background: var(--op-bg); border-top: 1px solid var(--op-border); font-size: .9rem; }
.op-footer h4 { font-size: .9rem; font-weight: 600; margin-bottom: .8rem; }
.op-footer a { color: var(--op-muted); text-decoration: none; }
.op-footer a:hover { color: var(--op-gold); }
.op-footer p { margin: .3rem 0; color: var(--op-muted); }
.op-footer .op-copy { font-size: .75rem; color: #6d6a66; border-top: 1px solid var(--op-border); padding-top: 1rem; margin-top: 2rem; }

/* ---------- WooCommerce ---------- */
.wc-block-grid__product, .wc-block-product { background: transparent; }
.wp-block-woocommerce-product-template li, .wc-block-grid__product { border: 1px solid var(--op-border); border-radius: 6px; padding: .8rem; background: var(--op-surface); transition: border-color .15s; }
.wp-block-woocommerce-product-template li:hover { border-color: var(--op-gold); }
.wp-block-post-title a, .wc-block-components-product-name { color: var(--op-text); }
.woocommerce-Price-amount, .wc-block-components-product-price { color: var(--op-gold); font-weight: 600; }
.wc-block-components-notice-banner { background: var(--op-surface); color: var(--op-text); }
.wc-block-components-text-input input, .wc-block-components-select select, input[type="text"], input[type="email"], input[type="search"], textarea { background: var(--op-surface-2); color: var(--op-text); border-color: var(--op-border); }
.wc-block-components-sidebar, .wc-block-components-totals-wrapper { color: var(--op-text); }
.variations select { background: var(--op-surface-2); color: var(--op-text); border: 1px solid var(--op-border); }

/* ---------- 3D product viewer ---------- */
.op-media { width: 100%; }
.op-media-toggle { display: flex; gap: .5rem; margin-bottom: .75rem; }
.op-media-toggle button { background: transparent; border: 1px solid var(--op-border); color: var(--op-muted); font: 600 .8rem/1 "Jost", sans-serif; letter-spacing: .12em; text-transform: uppercase; padding: .55rem 1rem; cursor: pointer; border-radius: 2px; }
.op-media-toggle button.is-active { background: var(--op-gold); border-color: var(--op-gold); color: #000; }
.op-media[data-view="3d"] .wp-block-woocommerce-product-image-gallery, .op-media[data-view="3d"] .woocommerce-product-gallery { display: none; }
.op-media[data-view="photos"] .op-3d { display: none; }
.op-3d { position: relative; }
.op-3d model-viewer { width: 100%; height: auto; aspect-ratio: 1; background: radial-gradient(60% 60% at 50% 45%, #2a2d30 0%, var(--op-surface) 70%); border: 1px solid var(--op-border); border-radius: 4px; --poster-color: transparent; --progress-bar-color: var(--op-gold); }
.op-3d-hint { font-size: .75rem; color: var(--op-muted); text-align: center; margin: .5rem 0 0; letter-spacing: .05em; }
.op-ar-btn { position: absolute; right: .75rem; bottom: .75rem; background: var(--op-gold); color: #000; border: 0; border-radius: 2px; font: 600 .75rem/1 "Jost", sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: .55rem .9rem; cursor: pointer; }

.op-3d-config { display: block; color: var(--op-text); margin-top: .2rem; }