/*
Theme Name: AS Resin Art
Theme URI: https://asresinart.shop/
Author: ASIT Agency
Author URI: https://asitagency.online/
Description: Luxury black & gold WooCommerce theme for AS Resin Art — handcrafted crystal resin soap dispensers. Single-product landing, WooCommerce shop/cart/checkout styling, built-in SEO (meta, Open Graph, JSON-LD schema).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: asresin-art
*/

/* ============ TOKENS ============ */
:root{
  --bg:#0a0a0c; --bg2:#0f0f13; --card:#14141a; --card2:#1a1a22;
  --gold:#c9a24b; --gold-2:#e8cb7e; --gold-deep:#8a6a2a;
  --cream:#f4edde; --muted:#a89d8a; --line:rgba(201,162,75,.16);
  --serif:'Playfair Display',Georgia,serif; --sans:'Jost',-apple-system,'Segoe UI',sans-serif;
  --rad:18px; --shadow:0 30px 80px rgba(0,0,0,.55);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--cream);font-family:var(--sans);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(900px 500px at 15% 0%,rgba(201,162,75,.07),transparent 60%),
             radial-gradient(800px 500px at 90% 30%,rgba(201,162,75,.05),transparent 60%)}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-2);text-decoration:none}
a:hover{color:var(--gold)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.2;color:var(--cream)}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
section{padding:96px 0;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--gold);text-transform:uppercase;letter-spacing:.28em;font-size:12px;font-weight:500;margin-bottom:18px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold)}
.sec-title{font-size:clamp(30px,4.4vw,50px);margin-bottom:14px}
.sec-sub{color:var(--muted);max-width:640px;font-size:18px}
.gold{color:var(--gold-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 38px;border-radius:100px;
  font-weight:600;letter-spacing:.06em;font-size:15px;text-transform:uppercase;cursor:pointer;border:1px solid transparent;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.btn-gold{background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-deep));color:#191105;box-shadow:0 12px 34px rgba(201,162,75,.28)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(201,162,75,.4);color:#191105}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--cream)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-2)}

/* ============ ANNOUNCE + HEADER ============ */
.announce{background:linear-gradient(90deg,#171208,#241c0c,#171208);color:var(--gold-2);text-align:center;
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;padding:10px 16px;border-bottom:1px solid var(--line)}
.site-header{position:sticky;top:0;z-index:50;background:rgba(10,10,12,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{font-family:var(--serif);font-size:26px;color:var(--cream);letter-spacing:.02em}
.logo span{color:var(--gold-2)}
.nav-links{display:flex;gap:34px;list-style:none}
.nav-links a{color:var(--cream);font-size:14px;letter-spacing:.14em;text-transform:uppercase;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--gold);transition:width .3s}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:18px}
.cart-link{position:relative;color:var(--cream);font-size:22px}
.cart-count{position:absolute;top:-8px;right:-10px;background:var(--gold);color:#191105;font-size:11px;font-weight:700;
  min-width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.burger{display:none;background:none;border:1px solid var(--line);color:var(--cream);font-size:20px;border-radius:10px;padding:8px 12px;cursor:pointer}

/* ============ HERO ============ */
.hero{padding:70px 0 90px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.hero h1{font-size:clamp(40px,5.6vw,68px);margin:10px 0 20px}
.hero h1 em{font-style:italic;color:var(--gold-2)}
.hero p.lead{color:var(--muted);font-size:19px;max-width:520px;margin-bottom:30px}
.hero-price{display:flex;align-items:baseline;gap:14px;margin:26px 0}
.hero-price .now{font-family:var(--serif);font-size:38px;color:var(--gold-2)}
.hero-price .was{color:var(--muted);text-decoration:line-through;font-size:20px}
.hero-price .off{background:rgba(201,162,75,.14);border:1px solid var(--line);color:var(--gold-2);
  font-size:13px;padding:4px 12px;border-radius:100px;letter-spacing:.08em}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.trust{display:flex;gap:26px;flex-wrap:wrap;color:var(--muted);font-size:14px}
.trust span{display:flex;align-items:center;gap:8px}
.trust i{color:var(--gold);font-style:normal}
.hero-media{position:relative}
.hero-media .frame{border:1px solid var(--line);border-radius:26px;overflow:hidden;box-shadow:var(--shadow);position:relative}
.hero-media img{width:100%;object-fit:cover;aspect-ratio:4/5}
.hero-badge{position:absolute;bottom:26px;left:26px;background:rgba(10,10,12,.85);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:16px;padding:14px 20px}
.hero-badge b{color:var(--gold-2);font-family:var(--serif);font-size:20px}
.hero-badge small{display:block;color:var(--muted);font-size:12px;letter-spacing:.1em;text-transform:uppercase}

/* ============ MARQUEE ============ */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;overflow:hidden;background:var(--bg2)}
.marquee-track{display:flex;gap:54px;white-space:nowrap;animation:scroll 26s linear infinite;width:max-content}
.marquee-track span{color:var(--gold);letter-spacing:.3em;font-size:13px;text-transform:uppercase}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ============ VARIANTS ============ */
.variant-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:48px}
.variant{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;transition:transform .3s,border-color .3s}
.variant:hover{transform:translateY(-6px);border-color:rgba(201,162,75,.45)}
.variant .v-img{height:300px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,rgba(201,162,75,.12),transparent 70%)}
.swatch{width:120px;height:120px;border-radius:50%;border:3px solid rgba(201,162,75,.4);box-shadow:0 14px 40px rgba(0,0,0,.5)}
.sw-black{background:radial-gradient(circle at 35% 30%,#3a3a42,#0c0c0f 70%)}
.sw-purple{background:radial-gradient(circle at 35% 30%,#b78ae0,#4a2568 70%)}
.sw-pink{background:radial-gradient(circle at 35% 30%,#ffd9d4,#c98a7e 70%)}
.variant .v-body{padding:26px}
.variant h3{font-size:22px;margin-bottom:6px}
.variant p{color:var(--muted);font-size:15px;margin-bottom:16px}
.variant .v-price{color:var(--gold-2);font-family:var(--serif);font-size:22px;margin-bottom:16px;display:block}

/* ============ CRAFT ============ */
.craft{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.craft-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;align-items:center;margin-top:10px}
.craft img{border-radius:var(--rad);border:1px solid var(--line);box-shadow:var(--shadow)}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px}
.feat-item{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px}
.feat-item b{display:block;font-family:var(--serif);font-size:18px;color:var(--gold-2);margin-bottom:6px}
.feat-item p{color:var(--muted);font-size:14.5px}

/* ============ REVIEWS ============ */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:48px}
.rev{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:30px}
.rev .stars{color:var(--gold-2);letter-spacing:4px;margin-bottom:14px}
.rev p{color:var(--cream);font-size:16px;margin-bottom:18px}
.rev small{color:var(--muted);letter-spacing:.06em}

/* ============ FAQ ============ */
.faq{max-width:820px;margin:40px auto 0}
.faq-item{border:1px solid var(--line);border-radius:14px;margin-bottom:14px;background:var(--card);overflow:hidden}
.faq-q{width:100%;background:none;border:none;color:var(--cream);font-family:var(--serif);font-size:19px;
  padding:22px 26px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;text-align:left}
.faq-q span{color:var(--gold);font-size:26px;line-height:1;transition:transform .3s}
.faq-item.open .faq-q span{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a p{padding:0 26px 24px;color:var(--muted)}

/* ============ CTA + FOOTER ============ */
.final-cta{text-align:center;background:radial-gradient(700px 340px at 50% 100%,rgba(201,162,75,.12),transparent 70%)}
.final-cta h2{font-size:clamp(30px,4.6vw,52px);margin-bottom:16px}
.final-cta p{color:var(--muted);margin-bottom:30px}
.site-footer{border-top:1px solid var(--line);background:#070709;padding:64px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:44px}
.foot-grid h4{font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;font-family:var(--sans)}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:10px}
.foot-grid a,.foot-grid p{color:var(--muted);font-size:15px}
.foot-bottom{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:13.5px}
.to-top{position:fixed;right:24px;bottom:24px;z-index:60;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);
  background:rgba(20,20,26,.9);color:var(--gold-2);font-size:20px;cursor:pointer;display:none;align-items:center;justify-content:center}
.to-top.show{display:flex}

/* ============ WOOCOMMERCE ============ */
.woo-wrap{padding:60px 0 90px}
.woocommerce .button,.woocommerce button.button,.woocommerce a.button,.woocommerce input.button{
  background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-deep))!important;color:#191105!important;
  border-radius:100px!important;padding:15px 34px!important;font-weight:600!important;letter-spacing:.05em;text-transform:uppercase;font-size:14px}
.woocommerce .button:hover{filter:brightness(1.08)}
.woocommerce div.product .product_title{font-size:clamp(30px,4vw,46px)}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--gold-2)!important;font-family:var(--serif);font-size:30px}
.woocommerce div.product p.price del,.woocommerce div.product span.price del{color:var(--muted);font-size:20px}
.woocommerce span.onsale{background:linear-gradient(135deg,var(--gold-2),var(--gold-deep))!important;color:#191105!important;
  font-weight:700;min-height:3.2em;min-width:3.2em}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:var(--card)!important;border-color:var(--line)!important}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{color:var(--cream)!important}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--bg2)!important}
.woocommerce div.product .woocommerce-tabs .panel{background:var(--card);border:1px solid var(--line);border-radius:0 0 14px 14px;padding:30px;color:var(--muted)}
.woocommerce table.shop_table{background:var(--card);border:1px solid var(--line)!important;border-radius:14px;overflow:hidden}
.woocommerce table.shop_table th{background:var(--bg2);color:var(--gold-2)}
.woocommerce table.shop_table td{border-top:1px solid var(--line)!important}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{
  background:#0e0e12!important;border:1px solid var(--line)!important;color:var(--cream)!important;border-radius:10px!important;padding:13px 16px!important}
.woocommerce form .form-row label{color:var(--cream)}
.woocommerce-info,.woocommerce-message,.woocommerce-error{background:var(--card)!important;border:1px solid var(--line)!important;
  border-top:3px solid var(--gold)!important;color:var(--cream)!important;border-radius:10px}
.woocommerce .quantity .qty{background:#0e0e12;border:1px solid var(--line);color:var(--cream);border-radius:10px;padding:10px}
.woocommerce .cart_totals h2,.woocommerce .woocommerce-checkout h3{color:var(--cream)}
#add_payment_method #payment,.woocommerce-cart #payment,.woocommerce-checkout #payment{background:var(--card)!important;border:1px solid var(--line);border-radius:14px}
.woocommerce ul.products li.product{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:18px;text-align:center}
.woocommerce ul.products li.product .woocommerce-loop-product__title{color:var(--cream);font-family:var(--serif);font-size:20px}
.woocommerce ul.products li.product .price{color:var(--gold-2)!important;font-size:19px}
.woocommerce nav.woocommerce-pagination ul{border:1px solid var(--line)}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{color:var(--cream);background:var(--card)}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--gold);color:#191105}

/* ============ RESPONSIVE ============ */
@media(max-width:960px){
  .hero-grid,.craft-grid{grid-template-columns:1fr}
  .variant-grid,.rev-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none;position:absolute;top:76px;left:0;right:0;background:#0c0c10;flex-direction:column;
    padding:20px 24px;gap:18px;border-bottom:1px solid var(--line)}
  .nav-links.open{display:flex}
  .burger{display:block}
  section{padding:64px 0}
}
@media(max-width:600px){.variant-grid,.rev-grid,.feat{grid-template-columns:1fr}.foot-grid{grid-template-columns:1fr}}