/*
Theme Name: SHAFAR EXCLUSIVE
Theme URI: https://shafarexc.com
Author: Shafar Exclusive
Description: Elegant emerald & gold WooCommerce theme. Regular store (Jewelry, Women's Shoes, Lingerie) kept completely separate from the 18+ section. Hot products slider with 3D motion, Deal of the Day countdown, admin settings dashboard.
Version: 10.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: shafar-exclusive
*/

/* ============ Palette ============
Emerald  #0F6B4C  Gold #C9A227  Deep gold #D4AF37
Teal     #0E7C6B  Cream #F5F1E8  Pearl #FDFDFB  Charcoal #4A4A4A
================================== */

:root {
  --emerald: #0F6B4C;
  --gold: #C9A227;
  --gold-deep: #D4AF37;
  --teal: #0E7C6B;
  --cream: #F5F1E8;
  --pearl: #FDFDFB;
  --charcoal: #4A4A4A;
  --radius: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--cream);
  background-image:
    radial-gradient(60rem 40rem at 12% -10%, rgba(201,162,39,.14), transparent 60%),
    radial-gradient(50rem 34rem at 95% 8%, rgba(15,107,76,.12), transparent 60%);
  background-attachment: fixed;
  color: var(--charcoal);
  font-family: "Work Sans", ui-sans-serif, system-ui, sans-serif;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; }
a { color: var(--emerald); text-decoration: none; }
a:hover { color: var(--gold-deep); }

h1, h2, h3, h4, h5, h6 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  color: var(--emerald);
  letter-spacing: .01em;
  line-height: 1.15;
}

.label-gold {
  font-family: "Work Sans", sans-serif;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.divider-gold {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
  opacity: .55;
  margin: 3rem auto;
  max-width: 1200px;
}

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ============ Header ============ */
.site-header {
  background: var(--pearl);
  border-bottom: 1px solid rgba(201,162,39,.35);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 14px rgba(15,107,76,.06);
}
.brand-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 20px; max-width: 1200px; margin: 0 auto;
}
.brand-logo { display: flex; align-items: center; gap: 12px; }
.brand-logo img { height: 52px; width: 52px; object-fit: cover; border-radius: 50%; border: 2px solid var(--gold); }
.brand-name {
  font-family: "Playfair Display", serif;
  font-size: 1.3rem; font-weight: 700; color: var(--emerald);
  letter-spacing: .04em;
}
.brand-name small {
  display: block; font-family: "Work Sans", sans-serif;
  font-size: .6rem; letter-spacing: .3em; color: var(--gold); text-transform: uppercase;
}
.menu-toggle {
  display: none; border: 2px solid var(--gold); background: var(--pearl);
  color: var(--emerald); border-radius: 8px; padding: 8px 12px;
  font-size: 1.1rem; cursor: pointer;
}
.main-nav { border-top: 1px solid rgba(201,162,39,.2); }
.main-nav ul {
  list-style: none; margin: 0 auto; padding: 0 20px; max-width: 1200px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
}
.main-nav a {
  display: block; padding: 12px 16px; font-weight: 600; font-size: .92rem;
  color: var(--charcoal); border-radius: 8px; transition: color .2s, background .2s;
}
.main-nav a:hover { color: var(--emerald); background: rgba(201,162,39,.12); }
.main-nav .nav-18plus { margin-left: auto; border-left: 1px solid rgba(201,162,39,.4); padding-left: 12px; }
.main-nav .nav-18plus a { color: var(--gold); font-size: .8rem; letter-spacing: .1em; }
.main-nav .sub-menu { display: none; }

@media (max-width: 820px) {
  .menu-toggle { display: block; }
  .main-nav { display: none; }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; align-items: stretch; padding-bottom: 10px; }
  .main-nav .nav-18plus { margin-left: 0; border-left: 0; border-top: 1px solid rgba(201,162,39,.4); }
}

/* ============ Hero ============ */
.hero { position: relative; overflow: hidden; padding: 76px 20px; }
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(58px); pointer-events: none; }
.hero::before { width: 380px; height: 380px; right: -90px; top: -110px; background: rgba(201,162,39,.16); }
.hero::after { width: 290px; height: 290px; left: -100px; bottom: -80px; background: rgba(15,107,76,.10); }
.hero-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr) minmax(380px,1fr); gap: 64px; align-items: center; }
.hero-copy { min-width: 0; }
.hero-kicker { display: inline-block; margin-bottom: 22px; border: 2px solid var(--gold); border-radius: 999px; background: var(--pearl); color: var(--gold); padding: 5px 13px; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hero-logo-stage { position: relative; isolation: isolate; perspective: 1400px; display: flex; align-items: center; justify-content: center; }
.hero-logo-stage::before {
  content: ""; position: absolute; inset: 9% 11%; z-index: -1;
  border: 1px solid rgba(201,162,39,.38); border-radius: 50%;
  box-shadow: 0 18px 44px rgba(15,107,76,.16);
  transform: rotateX(68deg) rotateZ(-8deg);
  animation: hero-halo-orbit 14s linear infinite; pointer-events: none;
}
.hero-logo {
  width: 100%; max-width: 450px; border-radius: 24px;
  opacity: 1; transform-style: preserve-3d; will-change: transform;
  filter: drop-shadow(0 16px 22px rgba(15,107,76,.18));
  animation: hero-logo-in 1.15s cubic-bezier(.16,1,.3,1) both,
             hero-logo-orbit 7s ease-in-out 1.15s infinite;
  transition: transform .6s cubic-bezier(.16,1,.3,1), filter .5s ease;
}
.hero-logo-stage:hover .hero-logo {
  animation-play-state: paused;
  transform: rotateY(6deg) rotateX(-3deg) translateY(-5px) translateZ(38px) scale(1.025);
  filter: drop-shadow(-10px 22px 30px rgba(201,162,39,.36));
}
@keyframes hero-logo-in {
  0%   { opacity: .35; filter: blur(5px); transform: translateY(18px) scale(.93); }
  70%  { opacity: 1; filter: blur(0); transform: translateY(-3px) scale(1.015); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}
@keyframes hero-logo-orbit {
  0%, 100% { opacity: 1; transform: rotateY(-3deg) rotateX(1deg) translateY(0) translateZ(0); }
  50%      { opacity: 1; transform: rotateY(3deg) rotateX(-1deg) translateY(-8px) translateZ(18px); }
}
@keyframes hero-halo-orbit { to { transform: rotateX(68deg) rotateZ(352deg); } }
.hero h1 { font-size: clamp(3.25rem, 5.2vw, 4.75rem); margin: 0; line-height: .98; }
.hero-exclusive { display: table; margin-top: -2px; background: var(--gold); color: #dff2eb; padding: 2px 8px 7px; }
.hero .tagline { color: var(--gold-deep); font-style: italic; opacity: .9; max-width: 540px; margin: 20px 0 0; font-size: 1.05rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.shimmer-text {
  background: linear-gradient(90deg, var(--emerald) 0%, var(--gold) 50%, var(--emerald) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 3.5s linear infinite;
}
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.btn {
  display: inline-block; border-radius: 999px; padding: 13px 28px;
  font-weight: 700; font-size: .92rem; cursor: pointer; border: 2px solid var(--gold);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn-gold { background: var(--gold); color: #10382a; box-shadow: 0 8px 22px rgba(201,162,39,.3); }
.btn-gold:hover { background: var(--gold-deep); color: #10382a; transform: scale(1.05); }
.btn-outline { background: var(--pearl); color: var(--emerald); }
.btn-outline:hover { background: rgba(201,162,39,.12); color: var(--emerald); transform: scale(1.05); }

/* ============ Sections ============ */
.section { padding: 48px 0; }
.section-title { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 6px 0 24px; }

.cat-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cat-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--pearl); border: 1px solid rgba(201,162,39,.35);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  animation: rise-in .6s ease-out both;
}
.cat-card:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(15,107,76,.14); border-color: var(--gold); }
.cat-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .5s ease; }
.cat-card:hover img { transform: scale(1.07); }
.cat-card .cat-label {
  position: absolute; inset-inline: 0; bottom: 0; padding: 14px 16px;
  background: linear-gradient(to top, rgba(15,107,76,.92), transparent);
  color: var(--pearl);
}
.cat-card .cat-label strong { font-family: "Playfair Display", serif; font-size: 1.15rem; }
.cat-card .cat-label span { display: block; font-size: .75rem; color: var(--gold-deep); font-weight: 600; }

/* ============ Product cards ============ */
.product-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.product-card {
  background: var(--pearl); border: 1px solid rgba(201,162,39,.3);
  border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.product-card:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 12px 30px rgba(15,107,76,.12); }
.product-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.product-card .p-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-card .p-name { font-weight: 600; color: var(--charcoal); font-size: .95rem; }
.product-card .p-price { color: var(--emerald); font-weight: 700; }
.product-card .p-price del { color: #999; font-weight: 400; margin-right: 6px; }
.product-card .p-price ins { text-decoration: none; color: var(--gold-deep); }
.product-card .add_to_cart_button,
.product-card .button.product_type_simple {
  margin-top: auto; text-align: center; background: var(--pearl);
  border: 2px solid var(--gold); color: var(--emerald) !important;
  border-radius: 999px; padding: 9px 14px; font-weight: 700; font-size: .82rem;
  transition: all .2s ease;
}
.product-card .add_to_cart_button:hover,
.product-card .button.product_type_simple:hover { background: var(--gold); color: #10382a !important; }

/* WooCommerce default product list theming */
ul.products li.product {
  background: var(--pearl); border: 1px solid rgba(201,162,39,.3);
  border-radius: var(--radius); padding: 12px; text-align: center;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
ul.products li.product:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 12px 30px rgba(15,107,76,.12); }
ul.products li.product .woocommerce-loop-product__title { font-family: "Work Sans", sans-serif; color: var(--charcoal); font-size: .95rem; }
ul.products li.product .price { color: var(--emerald); font-weight: 700; }
ul.products li.product .button {
  background: var(--pearl); border: 2px solid var(--gold); color: var(--emerald);
  border-radius: 999px; font-weight: 700;
}
ul.products li.product .button:hover { background: var(--gold); color: #10382a; }
.woocommerce span.onsale { background: var(--gold); color: #10382a; border-radius: 999px; }

/* ============ Hot slider ============ */
.hot-slider { position: relative; overflow: hidden; padding: 10px 0; }
.hot-track { display: flex; gap: 18px; transition: transform .55s cubic-bezier(.22,1,.36,1); will-change: transform; perspective: 1400px; }
.hot-track .product-card { flex: 0 0 260px; transform-style: preserve-3d; }
.hot-track .product-card.is-spin { animation: spin-in-3d .85s cubic-bezier(.22,1,.36,1) both; }
@keyframes spin-in-3d {
  0%   { opacity: 0; transform: perspective(1400px) rotateY(-75deg) translateZ(-120px) scale(.9); }
  60%  { opacity: 1; transform: perspective(1400px) rotateY(10deg) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
.slider-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--gold);
  background: var(--pearl); color: var(--emerald); font-size: 1.2rem; cursor: pointer; z-index: 5;
  transition: all .2s ease;
}
.slider-btn:hover { background: var(--gold); color: #10382a; }
.slider-btn.prev { left: 6px; } .slider-btn.next { right: 6px; }
@media (max-width: 640px) { .hot-track .product-card { flex-basis: 200px; } }

/* ============ Deal of the day ============ */
.deal-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center;
  background: var(--pearl); border: 1px solid rgba(201,162,39,.4);
  border-radius: 20px; padding: 32px; box-shadow: 0 16px 40px rgba(15,107,76,.1);
}
.deal-card img { border-radius: 14px; width: 100%; aspect-ratio: 1; object-fit: cover; }
.deal-price { font-size: 1.6rem; font-weight: 700; color: var(--gold-deep); margin: 8px 0; }
.deal-price del { color: #999; font-size: 1.05rem; font-weight: 400; margin-right: 8px; }
.countdown { display: flex; gap: 10px; margin: 16px 0; }
.countdown .cd-box {
  background: var(--emerald); color: var(--pearl); border-radius: 10px;
  min-width: 62px; padding: 10px 8px; text-align: center;
  animation: pulse-soft 2.6s ease-in-out infinite;
}
.countdown .cd-box b { display: block; font-size: 1.35rem; font-family: "Playfair Display", serif; }
.countdown .cd-box span { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
@keyframes pulse-soft { 0%,100% { box-shadow: 0 0 0 0 rgba(201,162,39,.35); } 50% { box-shadow: 0 0 18px 4px rgba(201,162,39,.3); } }
@media (max-width: 760px) { .deal-card { grid-template-columns: 1fr; padding: 22px; } }

/* ============ Animations ============ */
@keyframes rise-in { 0% { opacity: 0; transform: translateY(24px); } 100% { opacity: 1; transform: none; } }
.rise { animation: rise-in .65s ease-out both; }
.delay-1 { animation-delay: .1s; } .delay-2 { animation-delay: .2s; } .delay-3 { animation-delay: .3s; }

/* ============ 18+ gate ============ */
.age-gate {
  max-width: 480px; margin: 80px auto; text-align: center;
  background: var(--pearl); border: 1px solid rgba(201,162,39,.4);
  border-radius: 20px; padding: 40px 30px; box-shadow: 0 16px 40px rgba(15,107,76,.12);
}
.age-gate h1 { margin-top: 0; }
.age-gate .age-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

/* ============ Footer ============ */
.site-footer {
  margin-top: 60px; background: var(--emerald); color: var(--pearl);
  border-top: 3px solid var(--gold);
}
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; padding: 28px 20px; }
.site-footer a { color: var(--gold-deep); font-weight: 600; margin-right: 16px; }
.site-footer a:hover { color: var(--pearl); }

/* ============ Admin settings (WP dashboard) ============ */
.shafar-admin fieldset { margin-bottom: 22px; padding: 16px 18px; border: 1px solid #dcdcde; border-radius: 8px; background: #fff; }
.shafar-admin legend { font-weight: 700; color: #0F6B4C; padding: 0 8px; }
.shafar-admin label { display: inline-block; margin: 4px 14px 4px 0; }

/* Version 5: safe catalog previews */
.featured-band { background: rgba(253,253,251,.62); border-top: 1px solid rgba(201,162,39,.25); border-bottom: 1px solid rgba(201,162,39,.25); }
.demo-card { cursor: default; }
.demo-product .demo-label { color: var(--gold); font-size: .67rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.demo-product .demo-note { color: var(--charcoal); font-size: .72rem; line-height: 1.4; opacity: .68; }
@media (max-width: 820px) {
  .brand-row { padding-block: 12px; }
  .brand-name { display: none; }
  .brand-logo img { height: 48px; width: 48px; }
  .menu-toggle { width: 42px; height: 42px; padding: 0; border-radius: 50%; }
  .hero { padding: 80px 20px 56px; }
  .hero-inner { grid-template-columns: 1fr; gap: 22px; }
  .hero-copy { order: 1; }
  .hero-logo-stage { order: 2; margin-top: 0; }
  .hero h1 { font-size: clamp(3.25rem, 15vw, 4.35rem); }
  .hero .tagline { font-size: 1.05rem; line-height: 1.6; }
  .hero-actions { flex-wrap: nowrap; }
  .hero-actions .btn { padding: 12px 19px; font-size: .78rem; text-align: center; white-space: nowrap; }
  .hero-logo { max-width: 405px; }
}
@media (max-width: 390px) {
  .hero h1 { font-size: 3rem; }
  .hero-actions { flex-wrap: wrap; }
  .hero-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-logo, .hero-logo-stage::before, .journey-card, .journey-action, .journey-progress span { animation: none !important; transition: none !important; }
}


/* v6 — pages, cart, checkout, account */
.page-article .entry-content { color: var(--charcoal); line-height: 1.7; }
.entry-content a { color: var(--emerald); }
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content th, .entry-content td { padding: 12px; border-bottom: 1px solid rgba(201,162,39,.25); text-align: left; }
.entry-content .button, .woocommerce .button, .woocommerce a.button, .woocommerce button.button {
  background: #C9A227; color: #0F3D2C; border: 0; border-radius: 10px;
  padding: 12px 20px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-block;
}
.entry-content .button:hover, .woocommerce .button:hover { background: #D4AF37; }
.entry-content input, .entry-content select, .entry-content textarea,
.woocommerce form .form-row input, .woocommerce form .form-row select {
  border: 1px solid rgba(201,162,39,.4); border-radius: 8px; padding: 10px; background: #FDFDFB;
}
a.p-name { text-decoration: none; color: #0F6B4C; font-weight: 600; }
a.p-name:hover { color: #0E7C6B; }
.post-list article { margin-bottom: 28px; }


/* v8 — modern three-stage shopping journey */
.journey-section{background:rgba(253,253,251,.78);border-block:1px solid rgba(201,162,39,.28)}.journey-heading{max-width:650px;margin:0 auto 42px;text-align:center}.journey-heading .section-title{margin-bottom:12px}.journey-heading p{opacity:.78;margin:0}.journey-grid{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.journey-progress{position:absolute;z-index:0;left:12%;right:12%;top:43%;height:2px;overflow:hidden;background:rgba(201,162,39,.22)}.journey-progress span{display:block;width:38%;height:100%;background:var(--gold);animation:journey-line 5s ease-in-out infinite}.journey-card{position:relative;z-index:1;overflow:hidden;border:1px solid rgba(201,162,39,.34);border-radius:var(--radius);background:var(--pearl);box-shadow:0 14px 35px rgba(15,107,76,.1);animation:journey-breathe 4.95s ease-in-out infinite;transition:transform .4s ease,border-color .4s ease,box-shadow .4s ease}.journey-card:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 20px 42px rgba(15,107,76,.16)}.journey-image-wrap{position:relative;aspect-ratio:1;overflow:hidden}.journey-image-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}.journey-card:hover img{transform:scale(1.045)}.journey-image-wrap:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(to top,rgba(15,107,76,.65),transparent);pointer-events:none}.journey-action{position:absolute;right:16px;bottom:16px;z-index:1;display:flex;align-items:center;gap:7px;border:1px solid rgba(201,162,39,.65);border-radius:999px;background:rgba(253,253,251,.94);color:var(--emerald);padding:8px 12px;font-size:.72rem;font-weight:700;box-shadow:0 8px 24px rgba(15,107,76,.16);animation:journey-confirm 4.95s ease-in-out infinite}.journey-action b{color:var(--teal);font-size:1rem}.journey-copy{display:flex;align-items:flex-start;gap:14px;padding:22px}.journey-copy h3{margin:0;font-size:1.25rem}.journey-copy p{margin:7px 0 0;font-size:.88rem;line-height:1.6;opacity:.76}.journey-number{display:grid;place-items:center;flex:0 0 36px;height:36px;border-radius:50%;background:var(--emerald);color:var(--gold-deep);font-size:.72rem;font-weight:800}.journey-cta{margin:36px 0 0;text-align:center}@keyframes journey-line{0%{transform:translateX(-110%)}50%,68%{transform:translateX(165%)}100%{transform:translateX(300%)}}@keyframes journey-breathe{0%,24%,100%{transform:translateY(0)}10%{transform:translateY(-7px)}}@keyframes journey-confirm{0%,5%,24%,100%{opacity:.62;transform:translateY(5px) scale(.96)}10%,18%{opacity:1;transform:none}}@media(max-width:760px){.journey-grid{grid-template-columns:1fr}.journey-progress{left:12px;right:auto;top:8%;bottom:8%;width:2px;height:auto}.journey-progress span{width:100%;height:32%;animation-name:journey-line-mobile}.journey-card{margin-left:12px}}@keyframes journey-line-mobile{0%{transform:translateY(-110%)}50%,68%{transform:translateY(165%)}100%{transform:translateY(300%)}}@media(prefers-reduced-motion:reduce){.journey-card,.journey-action,.journey-progress span{animation:none!important;transition:none!important}}