/* ============================================================
   K.I.S.S. Earrings — Site Stylesheet
   Brand: black base + hot-pink accent + purple CTA
   Built for: responsive, ADA-compliant, fail-proof, no external CDNs
============================================================ */

/* ---------- Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family: "Helvetica Neue", "Arial", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size:17px;
  line-height:1.6;
  color:#f3f1ee;
  background:#0a0a0a;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:#ff3fa4;text-decoration:underline;text-underline-offset:3px}
a:hover,a:focus{color:#ffffff}
h1,h2,h3,h4{font-family:"Helvetica Neue","Arial Black","Impact",sans-serif;font-weight:900;letter-spacing:.5px;line-height:1.15;margin:0 0 .4em}
h1{font-size:clamp(2rem,5vw,3.4rem);text-transform:uppercase}
h2{font-size:clamp(1.6rem,3.5vw,2.4rem);text-transform:uppercase;color:#ff3fa4}
h3{font-size:clamp(1.15rem,2vw,1.35rem);text-transform:uppercase;letter-spacing:1px}
p{margin:0 0 1em}
:focus-visible{outline:3px solid #ff3fa4;outline-offset:3px;border-radius:4px}

/* ---------- Accessibility helpers ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;background:#ff3fa4;color:#0a0a0a;
  padding:.65em 1em;font-weight:700;z-index:9999;text-decoration:none;border-radius:0 0 6px 0
}
.skip-link:focus{left:0}
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- Layout container ---------- */
.container{width:min(1180px,92%);margin-inline:auto}

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(10,10,10,.92);backdrop-filter:saturate(140%) blur(8px);
  border-bottom:2px solid #ff3fa4;
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0}
.brand{
  display:inline-flex;flex-direction:column;line-height:1;text-decoration:none;color:#fff;
  font-family:"Helvetica Neue","Arial Black","Impact",sans-serif;font-weight:900;letter-spacing:2px
}
.brand-mark{color:#ff3fa4;font-size:1.35rem}
.brand-sub{color:#d0c8bf;font-size:.7rem;letter-spacing:3px;margin-top:.25rem;font-weight:400;text-transform:uppercase}
.brand:hover,.brand:focus .brand-mark{color:#fff}

.nav-toggle{
  width:40px;height:40px;flex:0 0 40px;
  background:transparent;border:2px solid #ff3fa4;border-radius:8px;
  cursor:pointer;padding:8px;display:none;
  line-height:0;font-size:0;color:transparent;
  align-items:center;justify-content:center
}
.nav-toggle > .bar{
  display:block !important;
  width:20px !important;
  height:2.5px !important;
  background:#ff3fa4 !important;
  border-radius:2px;
  margin:2.5px 0 !important;
  transform-origin:center;
  transition:transform .22s ease, opacity .2s ease, background .2s ease
}
.nav-toggle-inner{display:flex;flex-direction:column;align-items:center;justify-content:center}
.nav-toggle[aria-expanded="true"]{background:#ff3fa4;border-color:#ff3fa4}
.nav-toggle[aria-expanded="true"] .bar{background:#0a0a0a}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){transform:translateY(9px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

.nav-list{display:flex;gap:1.4rem;list-style:none;margin:0;padding:0}
.nav-list a{
  color:#f3f1ee;text-decoration:none;font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:.9rem;
  padding:.4rem 0;border-bottom:2px solid transparent;transition:border-color .15s, color .15s
}
.nav-list a:hover,.nav-list a:focus,.nav-list a[aria-current="page"]{color:#ff3fa4;border-bottom-color:#ff3fa4}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:clamp(3rem,8vw,6rem) 0 clamp(3rem,6vw,4.5rem);
  background:
    radial-gradient(1200px 500px at 10% 0%, rgba(236,27,143,.25), transparent 60%),
    radial-gradient(900px 400px at 90% 100%, rgba(124,58,237,.25), transparent 60%),
    #0a0a0a;
  text-align:center;
  overflow:hidden;
}
.hero .container{position:relative;z-index:2}
.hero h1 span{color:#ff3fa4;display:block}
.hero-tagline{max-width:720px;margin:1rem auto 1.75rem;font-size:clamp(1rem,1.6vw,1.2rem);color:#e2ded7}

/* Hero with brand image backdrop */
.hero-image{
  background:
    linear-gradient(180deg, rgba(10,10,10,.82) 0%, rgba(10,10,10,.92) 100%),
    url("images/brand/hero-blue-agate.jpg") center/cover no-repeat,
    #0a0a0a;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;padding:.9em 1.6em;border-radius:999px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  text-decoration:none;border:2px solid transparent;font-size:.92rem;cursor:pointer;transition:transform .12s, background .15s, color .15s, border-color .15s;
}
.btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.btn-primary{background:#ff3fa4;color:#0a0a0a}
.btn-primary:hover,.btn-primary:focus{background:#ffffff;color:#0a0a0a;transform:translateY(-1px)}
.btn-secondary{background:#7c3aed;color:#fff}
.btn-secondary:hover,.btn-secondary:focus{background:#9d66ff;color:#0a0a0a;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:#fff;border-color:#ff3fa4}
.btn-ghost:hover,.btn-ghost:focus{background:#ff3fa4;color:#0a0a0a}
.btn-row{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}

/* ---------- Sections ---------- */
section{padding:clamp(2.75rem,6vw,4.5rem) 0}
.section-alt{background:linear-gradient(180deg,#141414 0%,#0f0f0f 100%);border-top:1px solid #222;border-bottom:1px solid #222}
.section-pink{background:#ff3fa4;color:#0a0a0a}
.section-pink h2{color:#0a0a0a}
.section-pink a{color:#0a0a0a}
.section-heading{text-align:center;margin-bottom:2rem}
.section-heading p{max-width:680px;margin:0 auto;color:#d3cfc7}

/* Accent strip (optional use of accent-pink-zebra.jpg) */
.accent-strip{
  height:120px;
  background:url("images/brand/accent-pink-zebra.jpg") center/cover no-repeat;
  border-top:2px solid #ff3fa4;border-bottom:2px solid #ff3fa4;
}

/* ---------- Cards / feature grids ---------- */
.card-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{
  background:#141414;border:1px solid #222;border-radius:14px;padding:1.5rem;
  transition:transform .18s, border-color .18s, background .18s
}
.card:hover,.card:focus-within{transform:translateY(-4px);border-color:#ff3fa4;background:#181010}
.card h3{color:#ff3fa4;margin-top:0}
.card p{color:#d3cfc7;margin-bottom:0}

/* ---------- Featured gallery (home) ---------- */
.feature-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.feature-gallery a{
  position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:12px;background:#fafafa;
  padding:10px;border:2px solid transparent;transition:border-color .2s, transform .25s
}
.feature-gallery a:hover,.feature-gallery a:focus-visible{border-color:#ff3fa4;transform:scale(1.03)}
.feature-gallery img{width:100%;height:100%;object-fit:contain;transition:transform .35s ease}
.feature-gallery a:hover img,.feature-gallery a:focus-visible img{transform:scale(1.05)}

/* ---------- SHOP page grid ---------- */
.shop-header-bar{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.25rem 0;margin-bottom:1.5rem;border-bottom:2px solid #ff3fa4
}
.shop-header-bar p{color:#d3cfc7;margin:0;max-width:640px}

.shop-grid{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  padding-bottom:3rem
}
.shop-tile{
  position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:12px;
  background:#fafafa;
  border:2px solid #1f1f1f;text-decoration:none;color:#fff;
  padding:10px;
  transition:transform .28s cubic-bezier(.2,.9,.3,1.2), box-shadow .25s, border-color .2s, z-index 0s .3s
}
.shop-tile img{
  width:100%;height:100%;object-fit:contain;
  transition:transform .4s cubic-bezier(.2,.9,.3,1.2), filter .25s;
  background:#fafafa;
}
.shop-tile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.82) 100%);
  opacity:0;transition:opacity .25s
}
.shop-tile .tile-label{
  position:absolute;left:12px;right:12px;bottom:10px;z-index:2;
  font-size:.78rem;text-transform:uppercase;letter-spacing:1.2px;font-weight:800;
  opacity:0;transform:translateY(6px);transition:opacity .25s, transform .25s;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.7)
}
.shop-tile .tile-cta{
  position:absolute;top:10px;right:10px;z-index:2;background:#ff3fa4;color:#0a0a0a;
  font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;
  padding:.3em .55em;border-radius:999px;opacity:0;transform:translateY(-4px);transition:opacity .2s, transform .2s
}
.shop-tile:hover,.shop-tile:focus-visible{
  transform:scale(1.08);z-index:5;border-color:#ff3fa4;
  box-shadow:0 15px 40px -10px rgba(236,27,143,.55),0 0 0 1px #ff3fa4;
  transition:transform .28s cubic-bezier(.2,.9,.3,1.2), box-shadow .25s, border-color .2s
}
.shop-tile:hover img,.shop-tile:focus-visible img{transform:scale(1.06)}
.shop-tile:hover::after,.shop-tile:focus-visible::after{opacity:1}
.shop-tile:hover .tile-label,.shop-tile:focus-visible .tile-label,
.shop-tile:hover .tile-cta,.shop-tile:focus-visible .tile-cta{opacity:1;transform:none}

/* Reduced motion: disable scale/transform animations */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .shop-tile:hover,.feature-gallery a:hover{transform:none}
}

/* ---------- About page ---------- */
.about-split{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.about-portrait{
  aspect-ratio:4/5;border-radius:14px;background:
    linear-gradient(135deg,#ff3fa4 0%,#7c3aed 100%);
  display:flex;align-items:center;justify-content:center;color:#0a0a0a;font-weight:900;
  font-family:"Helvetica Neue","Arial Black",sans-serif;letter-spacing:3px;text-align:center;padding:2rem
}
.about-portrait span{font-size:clamp(1.2rem,2vw,1.6rem)}
.quote-block{
  border-left:5px solid #ff3fa4;padding:1rem 0 1rem 1.25rem;
  font-size:clamp(1.05rem,1.6vw,1.2rem);color:#f3f1ee;font-style:italic
}
.quote-block cite{display:block;margin-top:.5rem;color:#ff3fa4;font-style:normal;font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:.85rem}

/* ---------- Classes page table ---------- */
.info-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:1.5rem}
.info-item{background:#141414;border:1px solid #222;border-radius:12px;padding:1.2rem}
.info-item strong{display:block;color:#ff3fa4;letter-spacing:2px;text-transform:uppercase;font-size:.78rem;margin-bottom:.3rem}
.info-item span{color:#f3f1ee;font-weight:700;font-size:1.05rem}

.pricing-card{
  max-width:520px;margin:2rem auto 0;background:#111;border:2px solid #ff3fa4;border-radius:18px;padding:2rem;text-align:center
}
.pricing-card .price{font-size:3rem;font-weight:900;color:#ff3fa4;margin:0;line-height:1}
.pricing-card .price small{font-size:1rem;color:#d3cfc7;display:block;margin-top:.25rem;font-weight:400}
.pricing-card ul{list-style:none;padding:0;margin:1.25rem 0 1.5rem;text-align:left}
.pricing-card li{padding:.5rem 0;border-bottom:1px solid #222;color:#e2ded7}
.pricing-card li::before{content:"\2726  ";color:#ff3fa4;font-weight:900;margin-right:.4em}
.pricing-card li:last-child{border-bottom:0}

/* ---------- Contact Form ---------- */
.contact-form{display:flex;flex-direction:column;gap:1rem}
.form-row{display:flex;flex-direction:column;gap:.35rem}
.form-row label{font-weight:700;color:#f5f1ea;font-size:.95rem}
.form-row input,.form-row select,.form-row textarea{
  width:100%;padding:.75rem .9rem;border:2px solid #2a2a2a;border-radius:10px;
  background:#141414;color:#f5f1ea;font:inherit;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  outline:none;border-color:#ff3fa4;box-shadow:0 0 0 3px rgba(255,63,164,.25)
}
.form-row textarea{resize:vertical;min-height:120px}
.form-note{color:#a8a29b;margin-top:.25rem}
.form-note a{color:#ff3fa4}

/* ---------- CTA band ---------- */
.cta-band{background:#ff3fa4;color:#0a0a0a;text-align:center;padding:3rem 0}
.cta-band h2{color:#0a0a0a;margin-bottom:.5rem}
.cta-band p{color:#1a0a14;max-width:640px;margin:0 auto 1.5rem}
.cta-band .btn-primary{background:#0a0a0a;color:#ff3fa4}
.cta-band .btn-primary:hover,.cta-band .btn-primary:focus{background:#fff;color:#0a0a0a}

/* ---------- Footer ---------- */
.site-footer{background:#060606;border-top:1px solid #222;padding:2.5rem 0 1.5rem;color:#9a948a;font-size:.9rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;margin-bottom:1.5rem}
.footer-grid h4{font-size:.82rem;letter-spacing:2px;color:#ff3fa4;text-transform:uppercase;margin-bottom:.5rem}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid li{padding:.2rem 0}
.footer-grid a{color:#d3cfc7;text-decoration:none}
.footer-grid a:hover,.footer-grid a:focus{color:#ff3fa4}
.footer-bottom{border-top:1px solid #1a1a1a;padding-top:1rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;color:#6a645c}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .about-split, .footer-grid{grid-template-columns:1fr}
  .container{width:min(1180px,96%)}
  .nav-toggle{display:flex}
  .site-header{position:sticky}
  .nav-wrap{position:relative;flex-wrap:nowrap;padding:.75rem 0;gap:.5rem}
  .nav-list a,.nav-list a:hover,.nav-list a:focus,.nav-list a[aria-current="page"]{
    text-decoration:none !important
  }
  nav[aria-label="Primary"]{
    position:absolute;top:100%;left:0;right:0;z-index:99
  }
  .nav-list{
    background:#0a0a0a;border-top:0;border-bottom:0;
    flex-direction:column;gap:0;padding:0;margin:0;list-style:none;
    max-height:0;overflow:hidden;transition:max-height .28s ease, padding .28s ease, border-width .28s ease;
    box-shadow:none
  }
  .nav-list[data-open="true"]{
    max-height:60vh;padding:.35rem 0;
    border-top:1px solid #1a1a1a;border-bottom:2px solid #ff3fa4;
    box-shadow:0 12px 30px -10px rgba(0,0,0,.6)
  }
  .nav-list li{width:100%}
  .nav-list a{
    display:block;width:100%;padding:.95rem 1.4rem;border-bottom:1px solid #1a1a1a;
    border-left:3px solid transparent;font-size:.95rem
  }
  .nav-list li:last-child a{border-bottom:0}
  .nav-list a:hover,.nav-list a:focus{
    color:#ff3fa4;border-bottom-color:#1a1a1a;
    background:rgba(255,63,164,.08);border-left-color:#ff3fa4
  }
  .nav-list a[aria-current="page"]{
    color:#ff3fa4;border-bottom-color:#1a1a1a;
    background:rgba(255,63,164,.12);border-left-color:#ff3fa4
  }
}
@media (max-width:500px){
  .shop-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

/* ---------- Print ---------- */
@media print{
  body{background:#fff;color:#000}
  .site-header,.site-footer,.cta-band,.btn{display:none}
}