/* Shared Zarcon storefront system: clear card surfaces, forest green accents, and touch-friendly controls. */
:root {
  --shop-ink: #17251f;
  --shop-muted: #68766d;
  --shop-paper: #f3f5ef;
  --shop-white: #fff;
  --shop-green: #075b45;
  --shop-green-deep: #123d2d;
  --shop-line: #dfe7df;
  --shop-clay: #985538;
}

body.service-page,
body.live-gallery-page,
body.checkout-page,
body.bank-transfer-page,
body.design-app {
  color: var(--shop-ink);
  background: var(--shop-paper);
  color-scheme: light;
}

body.service-page,
body.checkout-page,
body.bank-transfer-page {
  --main: var(--shop-green);
  --main-deep: var(--shop-ink);
  --main-soft: var(--shop-muted);
  --cyan: var(--shop-green);
  --accent: var(--shop-green);
  --accent-soft: #dcebe2;
  --ink: var(--shop-ink);
  --muted: var(--shop-muted);
  --bg: var(--shop-paper);
  --panel: var(--shop-white);
  --line: var(--shop-line);
  color-scheme: light;
}

body.service-page .site-header,
body.service-page .site-header:not(.home-header) {
  position: sticky;
  inset: 0 0 auto;
  z-index: 80;
  border-bottom: 1px solid var(--shop-line);
  background: rgba(250, 251, 247, .94);
  color: var(--shop-ink);
  backdrop-filter: blur(16px);
}

body.home-shop .site-header { position: absolute; }
body.service-page .nav { height: 76px; }
body.service-page .logo,
body.service-page .nav-links a,
body.service-page .design-nav-trigger { color: var(--shop-ink); }
body.service-page .logo > span { display: grid; background: var(--shop-green); color: #fff; }
body.service-page .logo b { font-size: 18px; letter-spacing: .08em; }
body.service-page .nav-links a:hover,
body.service-page .nav-links a.active,
body.service-page .design-nav-trigger.active { color: var(--shop-green); }
body.service-page .nav-cta { border-color: var(--shop-green); background: var(--shop-green); color: #fff; }
body.service-page .menu-button { border-radius: 50%; background: #edf2eb; }
body.service-page .menu-button i { background: var(--shop-ink); }
body.service-page .design-nav-menu,
body.service-page .mobile-menu {
  border-color: var(--shop-line);
  background: #fff;
  color: var(--shop-ink);
}
body.service-page .design-nav-menu a,
body.service-page .mobile-menu a { color: var(--shop-ink); }
body.service-page .mobile-menu { box-shadow: -24px 0 80px rgba(20, 50, 36, .14); }
body.service-page .menu-close { color: var(--shop-ink); }
body.service-page .mobile-menu > p { color: var(--shop-muted); }

body.american-page {
  --main: var(--shop-green); --main-deep: var(--shop-ink); --main-soft: var(--shop-muted);
  --cyan: var(--shop-green); --accent: var(--shop-green); --accent-soft: #dcebe2;
  --ink: var(--shop-ink); --muted: var(--shop-muted); --bg: var(--shop-paper); --panel: #fff; --line: var(--shop-line);
  color: var(--shop-ink); background: var(--shop-paper); color-scheme: light;
}
body.american-page .site-header { position: sticky; inset: 0 0 auto; z-index: 80; border-bottom: 1px solid var(--shop-line); background: rgba(250,251,247,.94); color: var(--shop-ink); backdrop-filter: blur(16px); }
body.american-page .nav { height: 76px; }
body.american-page .logo, body.american-page .nav-links a, body.american-page .design-nav-trigger { color: var(--shop-ink); }
body.american-page .logo > span { display: grid; background: var(--shop-green); color: white; }
body.american-page .nav-cta, body.american-page .shop-card-action { border-color: var(--shop-green); background: var(--shop-green); color: white; }
body.american-page .menu-button i { background: var(--shop-ink); }
body.american-page .design-nav-menu, body.american-page .mobile-menu { background: #fff; color: var(--shop-ink); }
body.american-page .american-hero { color: var(--shop-ink); background: radial-gradient(ellipse at 78% 48%, rgba(134,177,129,.2), transparent 40%), linear-gradient(120deg,#f8f9f5,#e9f0e8); }
body.american-page .american-hero h1, body.american-page .shop-card-title { color: var(--shop-ink); }
body.american-page .american-hero p, body.american-page .shop-card-note { color: var(--shop-muted); }
body.american-page .shop-grid { gap: 16px; }
body.american-page .shop-card,
body.cylon-page .shop-card { overflow: hidden; border: 1px solid var(--shop-line); border-radius: 20px; background: #fff; color: var(--shop-ink); box-shadow: 0 12px 34px rgba(24,48,33,.055); }
body.american-page .shop-card-image,
body.cylon-page .shop-card-image { background: #e9ede7; }
body.american-page .shop-card-body,
body.cylon-page .shop-card-body { padding: 18px; }
body.american-page :is(.shop-card-title,.shop-card-number),
body.cylon-page :is(.shop-card-title,.shop-card-number) { color: var(--shop-ink); }
body.american-page .shop-card-note,
body.cylon-page .shop-card-note { color: var(--shop-muted); }
body.american-page .shop-card-actions a, body.american-page .shop-card-actions button,
body.cylon-page .shop-card-actions a, body.cylon-page .shop-card-actions button { min-height: 42px; border-radius: 999px; font-size: 12px; }
body.american-page .american-order-panel { border: 1px solid var(--shop-line); border-radius: 22px; background: var(--shop-paper); color: var(--shop-ink); }
body.american-page .american-order-form input, body.american-page .american-order-form textarea, body.american-page .american-order-form select { border-color: var(--shop-line); border-radius: 12px; background: #fff; color: var(--shop-ink); }
body.cylon-page { --main: var(--shop-green); --main-deep: var(--shop-ink); --main-soft: var(--shop-muted); --cyan: var(--shop-green); --accent: var(--shop-green); --ink: var(--shop-ink); --muted: var(--shop-muted); --bg: var(--shop-paper); --panel: #fff; --line: var(--shop-line); color: var(--shop-ink); background: var(--shop-paper); color-scheme: light; }
body.cylon-page .site-header { position: sticky; inset: 0 0 auto; z-index: 80; border-bottom: 1px solid var(--shop-line); background: rgba(250,251,247,.94); color: var(--shop-ink); backdrop-filter: blur(16px); }
body.cylon-page .nav { height: 76px; }
body.cylon-page .logo, body.cylon-page .nav-links a, body.cylon-page .design-nav-trigger { color: var(--shop-ink); }
body.cylon-page .logo > span { display: grid; background: var(--shop-green); color: white; }
body.cylon-page .nav-cta, body.cylon-page .cylon-buy-button { border-color: var(--shop-green); background: var(--shop-green); color: white; }
body.cylon-page .menu-button i { background: var(--shop-ink); }
body.cylon-page .cylon-catalog { min-height: calc(100vh - 76px); padding: 36px 0 80px; background: radial-gradient(ellipse at 80% 0%,rgba(134,177,129,.16),transparent 36%),var(--shop-paper); }
body.cylon-page :is(.cylon-order-panel,.cylon-order-head h2) { color: var(--shop-ink); }
body.cylon-page .cylon-order-panel { border-color: var(--shop-line); border-radius: 22px; background: #fff; }
body.cylon-page .cylon-order-form input, body.cylon-page .cylon-order-form textarea, body.cylon-page .cylon-order-form select { border-color: var(--shop-line); border-radius: 12px; background: #f8faf7; color: var(--shop-ink); }
body.cylon-page .design-nav-menu, body.cylon-page .mobile-menu { background: #fff; color: var(--shop-ink); }

body.service-page main,
body.live-gallery-page main,
body.bank-transfer-page main { background: var(--shop-paper); }
body.service-page main > section { border-color: var(--shop-line); }
body.live-gallery-page { --main: var(--shop-green); --main-deep: var(--shop-ink); --main-soft: var(--shop-muted); --cyan: var(--shop-green); --accent: var(--shop-green); --ink: var(--shop-ink); --muted: var(--shop-muted); --bg: var(--shop-paper); --panel: #fff; --line: var(--shop-line); color-scheme: light; }
body.live-gallery-page .site-header { position: sticky; border-bottom: 1px solid var(--shop-line); background: rgba(250,251,247,.94); color: var(--shop-ink); }
body.live-gallery-page .logo, body.live-gallery-page .nav-links a, body.live-gallery-page .design-nav-trigger { color: var(--shop-ink); }
body.live-gallery-page .logo > span { display: grid; background: var(--shop-green); color: white; }
body.live-gallery-page .nav-cta { background: var(--shop-green); color: white; }
body.live-gallery-page .menu-button i { background: var(--shop-ink); }
body.live-gallery-page .live-hero { color: var(--shop-ink); background: linear-gradient(120deg,#f8f9f5,#e9f0e8); }
body.live-gallery-page .live-hero h1, body.live-gallery-page .live-heading h2, body.live-gallery-page .live-cta h2 { color: var(--shop-ink); }
body.live-gallery-page :is(.live-hero-copy>p,.live-heading>p,.live-strip span,.live-photo span,.live-cta p) { color: var(--shop-muted); }
body.live-gallery-page :is(.live-strip,.live-gallery-section) { border-color: var(--shop-line); background: var(--shop-paper); color: var(--shop-ink); }
body.live-gallery-page .live-photo { border-color: var(--shop-line); border-radius: 18px; background-color: #e9ede7; box-shadow: 0 12px 34px rgba(24,48,33,.06); }
body.live-gallery-page .live-photo span { border-color: var(--shop-line); background: rgba(255,255,255,.9); }
body.live-gallery-page .live-toolbar { border-color: var(--shop-line); border-radius: 16px; background: rgba(255,255,255,.94); }
body.live-gallery-page .live-toolbar button { border-color: var(--shop-line); background: #f8faf7; color: var(--shop-ink); }
body.live-gallery-page .live-toolbar button.active { background: var(--shop-green); color: white; }
body.live-gallery-page .live-cta { border-color: var(--shop-line); border-radius: 22px; background: #e8f0e7; }
body.live-gallery-page .live-lightbox-panel { border-color: var(--shop-line); border-radius: 22px; background: #fff; color: var(--shop-ink); }

body.design-app { --main: var(--shop-green); --main-deep: var(--shop-ink); --cyan: var(--shop-green); --accent: var(--shop-green); --ink: var(--shop-ink); --muted: var(--shop-muted); --bg: var(--shop-paper); --panel: #fff; --line: var(--shop-line); color-scheme: light; }
body.design-app :is(.editor-topbar,.editor-stage,.editor-inspector,.editor-toolrail,.editor-library,.editor-order,.card-type-panel,.editor-products) { border-color: var(--shop-line); background-color: #fff; color: var(--shop-ink); }
body.design-app :is(.editor-topbar,.editor-stage,.editor-inspector,.editor-toolrail,.editor-library,.editor-order,.card-type-panel) :is(h1,h2,h3,p,label,span,b,strong,small) { color: var(--shop-ink); }
body.design-app :is(.editor-topbar,.editor-stage,.editor-inspector,.editor-toolrail,.editor-library,.editor-order,.card-type-panel) :is(button,a) { color: var(--shop-ink); }
body.design-app :is(.editor-topbar button,.editor-toolrail button,.editor-actions button,.editor-order button,.editor-products) { border-color: var(--shop-line); background: #f7faf6; }
body.design-app :is(.editor-topbar .editor-brand,.editor-order .button-primary,.editor-actions .button-primary) { background: var(--shop-green); color: #fff; }
body.design-app :is(.editor-inspector input,.editor-inspector select,.editor-inspector textarea,.editor-library input) { border-color: var(--shop-line); background: #f8faf7; color: var(--shop-ink); }
body.design-app :is(.editor-stage,.editor-inspector,.editor-toolrail,.card-type-panel) { box-shadow: 0 12px 36px rgba(24,48,33,.06); }
body.design-app .editor-stage { background-image: radial-gradient(#dce4dc 1px, transparent 1px); background-size: 18px 18px; }
body.design-app .custom-card-canvas { box-shadow: 0 24px 60px rgba(23,44,31,.24); }
body.service-page .service-hero,
body.service-page .metal-hero,
body.service-page .sticker-hero,
body.service-page .american-hero,
body.service-page .bitcoin-hero,
body.service-page .metal-single-hero {
  color: var(--shop-ink);
  background: radial-gradient(ellipse at 78% 48%, rgba(134, 177, 129, .2), transparent 40%), linear-gradient(120deg, #f8f9f5, #e9f0e8);
}
body.service-page .service-orb { opacity: .22; }
body.service-page .breadcrumbs,
body.service-page .breadcrumbs a,
body.service-page .service-lede,
body.service-page .metal-hero-copy > p,
body.service-page .kicker { color: var(--shop-muted); }
body.service-page .kicker i { background: var(--shop-green); box-shadow: none; }
body.service-page h1,
body.service-page h2,
body.service-page h3,
body.service-page .metal-single-copy h1 { color: var(--shop-ink); }
body.service-page h1 { max-width: 900px; font-size: clamp(38px, 5.8vw, 68px); line-height: .98; letter-spacing: -.055em; }
body.service-page .button,
body.checkout-page .button { min-height: 48px; border-radius: 999px; font-size: 13px; letter-spacing: 0; text-transform: none; }
body.service-page .button-primary,
body.checkout-page .button-primary { border-color: var(--shop-green); background: var(--shop-green); color: #fff; }
body.service-page .button-primary:hover,
body.checkout-page .button-primary:hover { background: var(--shop-green-deep); color: #fff; }
body.service-page .button-secondary { border-color: #b9c9bd; background: #fff; color: var(--shop-green); }

body.service-page .service-content-section,
body.service-page .contact-options-section,
body.service-page .service-links-section,
body.service-page .policy-summary,
body.service-page .metal-products-section,
body.service-page .metal-single-navigation,
body.service-page .sticker-products-section,
body.service-page .american-products-section,
body.service-page .bitcoin-products-section { background: var(--shop-paper); color: var(--shop-ink); }
body.service-page .service-muted { background: #e9efe8; }
body.service-page .service-prose,
body.service-page .policy-content,
body.service-page .service-copy-grid { color: var(--shop-ink); }
body.service-page .service-prose p,
body.service-page .policy-content p,
body.service-page .service-copy-grid p { color: #56645b; line-height: 1.75; }

body.service-page :is(.metal-finish-card,.sticker-product-card,.american-product-card,.contact-option-grid article,.policy-card-grid article,.service-link-grid a,.metal-single-visual,.metal-single-price,.policy-toc,.policy-block,.contact-form,.service-card,.feature-card) {
  border: 1px solid var(--shop-line);
  border-radius: 20px;
  background: #fff;
  color: var(--shop-ink);
  box-shadow: 0 12px 34px rgba(24, 48, 33, .055);
}
body.service-page :is(.metal-finish-image,.sticker-product-image,.american-product-image,.metal-single-visual figure) { background: #e9ede7; }
body.service-page :is(.metal-finish-image,.sticker-product-image,.american-product-image) img,
body.service-page .metal-single-visual img { mix-blend-mode: multiply; }
body.service-page :is(.metal-finish-copy,.metal-single-copy,.contact-option-grid article,.policy-card-grid article) h2 { color: var(--shop-ink); }
body.service-page :is(.metal-finish-copy,.metal-card-price,.metal-single-specs,.metal-single-price) { color: var(--shop-ink); }
body.service-page .metal-card-price b,
body.service-page .metal-single-price strong,
body.service-page .service-link-grid a span { color: var(--shop-green); }
body.service-page .metal-single-visual { padding: clamp(12px, 2vw, 24px); }
body.service-page .metal-single-visual figure { overflow: hidden; border-radius: 18px; }
body.service-page .service-link-grid a:hover { border-color: #9ab9a2; background: #f5faf5; color: var(--shop-green); }

body.service-page .footer,
body.service-page footer { border-color: var(--shop-line); color: var(--shop-muted); }
body.service-page .footer .logo,
body.service-page footer .logo { color: var(--shop-ink); }
body.service-page .footer nav a,
body.service-page footer nav a { color: #536258; }
body.service-page .footer nav a:hover,
body.service-page footer nav a:hover { color: var(--shop-green); }

body.checkout-page .checkout-header { border-bottom: 1px solid var(--shop-line); background: rgba(250, 251, 247, .96); }
body.checkout-page .checkout-header .logo,
body.checkout-page .checkout-secure-label { color: var(--shop-ink); }
body.checkout-page .checkout-intro h1 { color: var(--shop-ink); font-size: clamp(38px, 5vw, 62px); }
body.checkout-page .checkout-intro h1 span,
body.checkout-page .checkout-intro p { color: var(--shop-muted); }
body.checkout-page .checkout-form,
body.checkout-page .checkout-design-section,
body.checkout-page .checkout-preview-frame,
body.checkout-page .checkout-product-summary,
body.checkout-page .checkout-totals { border-color: var(--shop-line); background: #fff; color: var(--shop-ink); }
body.checkout-page .checkout-preview-frame { background: #e8eee8; }
body.checkout-page .checkout-fields input,
body.checkout-page .checkout-fields textarea,
body.checkout-page .checkout-fields select { border-color: #dce4dc; background: #f8faf7; color: var(--shop-ink); }
body.checkout-page .checkout-form label > span,
body.checkout-page .checkout-form h2,
body.checkout-page .checkout-totals b { color: var(--shop-ink); }
body.checkout-page .checkout-payment-options { display: grid; gap: 10px; margin: 20px 0; padding: 0; border: 0; }
body.checkout-page .checkout-payment-options legend { margin-bottom: 10px; color: var(--shop-ink); font-size: 16px; font-weight: 750; }
body.checkout-page .checkout-payment-option { display: grid; grid-template-columns: 20px 42px 1fr; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--shop-line); border-radius: 15px; background: #fff; cursor: pointer; }
body.checkout-page .checkout-payment-option:has(input:checked) { border-color: var(--shop-green); background: #f0f7f0; box-shadow: 0 0 0 2px rgba(7, 91, 69, .08); }
body.checkout-page .checkout-payment-option input { width: 18px; height: 18px; accent-color: var(--shop-green); }
body.checkout-page .checkout-payment-icon { background: #e6f0e8; color: var(--shop-green); }
body.checkout-page .checkout-payment-option strong,
body.checkout-page .checkout-payment-option small { display: block; }
body.checkout-page .checkout-payment-option strong { color: var(--shop-ink); font-size: 14px; }
body.checkout-page .checkout-payment-option small { margin-top: 4px; color: var(--shop-muted); font-size: 12px; line-height: 1.45; }
body.checkout-page .checkout-note,
body.checkout-page .checkout-footer { color: var(--shop-muted); }

body.bank-transfer-page :is(.bank-transfer-card,.bank-transfer-summary,.bank-transfer-form) { border-color: var(--shop-line); background: #fff; color: var(--shop-ink); }
body.bank-transfer-page .bank-transfer-visual { color: var(--shop-ink); }
body.bank-transfer-page .bank-transfer-visual :is(h1,p,strong,span) { color: var(--shop-ink); }
body.bank-transfer-page .bank-transfer-visual figure { overflow: hidden; border-radius: 22px; background: #e8eee8; }
body.bank-transfer-page .bank-transfer-visual figure img { mix-blend-mode: multiply; }
body.bank-transfer-page .bank-transfer-mini { border-color: var(--shop-line); background: #eef4ed; }
body.bank-transfer-page .bank-transfer-form :is(input,select,textarea) { border-color: var(--shop-line); background: #f8faf7; color: var(--shop-ink); }
body.bank-transfer-page .bank-transfer-form :is(label,legend,span) { color: var(--shop-ink); }

body.order-status-page .order-status-lookup { border-color: var(--shop-line); background: radial-gradient(ellipse at 78% 48%,rgba(134,177,129,.2),transparent 40%),linear-gradient(120deg,#f8f9f5,#e9f0e8); }
body.order-status-page .order-status-copy :is(h1,p,small) { color: var(--shop-ink); }
body.order-status-page :is(.order-status-form,.order-status-card,.order-status-empty,.order-slip-panel) { border-color: var(--shop-line); background: #fff; color: var(--shop-ink); box-shadow: 0 12px 34px rgba(24,48,33,.055); }
body.order-status-page .order-status-form :is(input,button) { border-color: var(--shop-line); background: #f8faf7; color: var(--shop-ink); }
body.order-status-page .order-status-form button { border-color: var(--shop-green); background: var(--shop-green); color: #fff; }
body.order-status-page .order-status-grid { background: var(--shop-line); }
body.order-status-page .order-status-grid article { background: #f8faf7; color: var(--shop-ink); }
body.bank-transfer-page input,
body.bank-transfer-page select,
body.bank-transfer-page textarea { border-color: var(--shop-line); background: #f8faf7; color: var(--shop-ink); }

body.service-page .metal-order-dialog { border: 1px solid var(--shop-line); border-radius: 24px; background: var(--shop-paper); color: var(--shop-ink); }
body.service-page .metal-order-panel,
body.service-page .metal-order-summary { color: var(--shop-ink); }
body.service-page .metal-order-form input,
body.service-page .metal-order-form select,
body.service-page .metal-order-form textarea { border-color: var(--shop-line); border-radius: 12px; background: #fff; color: var(--shop-ink); }
body.service-page .metal-order-note { color: var(--shop-muted); }
body.service-page .metal-order-error.success { border-color: #b4d4bf; background: #e8f4eb; color: var(--shop-green); }
body.service-page .offer-form { border-color: var(--shop-line); border-radius: 22px; background: #fff; color: var(--shop-ink); box-shadow: 0 16px 44px rgba(24,48,33,.07); }
body.service-page .offer-fields input,
body.service-page .offer-fields select,
body.service-page .offer-fields textarea { border-color: var(--shop-line); border-radius: 12px; background: #f8faf7; color: var(--shop-ink); }

body.service-page :is(a,button,input,select,textarea):focus-visible,
body.checkout-page :is(a,button,input,select,textarea):focus-visible { outline: 3px solid #3f9672; outline-offset: 3px; }
@media (max-width: 767px) {
  body.service-page .nav { height: 68px; }
  body.american-page .nav { height: 68px; }
  body.cylon-page .nav { height: 68px; }
  body.service-page h1 { font-size: clamp(36px, 11vw, 50px); }
  body.service-page .service-hero,
  body.service-page .metal-hero,
  body.service-page .metal-single-hero { padding-top: 18px; }
  body.service-page :is(.metal-finish-card,.sticker-product-card,.american-product-card) { border-radius: 17px; }
  body.checkout-page .checkout-payment-option { grid-template-columns: 20px 36px 1fr; gap: 9px; padding: 12px; }
}
