/* Shelly Kelly · Storefront — shared styles */

/* ── Theme: light Navy · White · Hot Pink ───────────────────────────────
   Remaps the design-system tokens so every component (buttons, badges,
   cards, links, gild edge) picks up the new palette. White does the work,
   navy grounds the type, hot pink pops on CTAs. */
:root {
  /* brand core → hot pink is the primary accent */
  --sk-coral:        #FF4FA3;   /* primary accent — CTAs, prices, highlights */
  --sk-coral-deep:   #E23B8C;   /* hover/pressed */
  --sk-yellow:       #F6C560;   /* soft gold echo */
  --sk-yellow-deep:  #E3B043;
  --sk-teal:         #2E4B86;   /* navy stands in for teal — links, tags */
  --sk-teal-deep:    #17305C;   /* deep navy — hover, strong text accents */
  --sk-turquoise:    #B9CEEC;   /* light navy wash — soft fills */
  --sk-turquoise-deep:#8FAFDD;

  /* gilding → keep a light gold but cooler */
  --sk-gold:         #E6B84D;
  --sk-gold-light:   #F3D68A;
  --sk-gold-sheen:   linear-gradient(100deg,#F3D68A 0%,#E6B84D 42%,#FBEFC4 62%,#D3A23A 100%);

  /* neutrals / surfaces → clean & airy */
  --sk-cream:        #FBFCFE;   /* near-white page background */
  --sk-cream-deep:   #EEF3FA;   /* alt band / footer — soft sky tint */
  --sk-white:        #FFFFFF;
  --sk-shell:        #FFFFFF;   /* crisp white cards */
  --sk-ink:          #17305C;   /* navy — primary text (never black) */
  --sk-ink-soft:     #5A6B88;   /* muted slate-navy text */
  --sk-line:         #E6ECF4;   /* cool hairline */
  --sk-line-soft:    #F0F4F9;

  /* focus ring → pink */
  --focus-ring:      0 0 0 3px rgba(255,79,163,.40);

  /* warm shadows → cool navy-tinted */
  --shadow-sm:  0 1px 2px rgba(23,48,92,.06), 0 2px 6px rgba(23,48,92,.06);
  --shadow-md:  0 6px 18px rgba(23,48,92,.10), 0 2px 6px rgba(23,48,92,.06);
  --shadow-lg:  0 18px 40px rgba(23,48,92,.14), 0 6px 14px rgba(23,48,92,.08);
  --shadow-coral: 0 10px 24px rgba(255,79,163,.30);

  /* links: navy → hot pink on hover */
  --link-color:       #2E4B86;
  --link-color-hover: #FF4FA3;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  /* stop iOS/Android from inflating font sizes in landscape */
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* keep anchored content clear of the sticky header */
  scroll-padding-top: 72px;
}
body {
  background: var(--sk-cream); color: var(--text-body); font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  /* hard stop on any horizontal scroll from a stray wide element */
  overflow-x: hidden;
  /* subtle brand-tinted tap flash instead of the default grey/blue block */
  -webkit-tap-highlight-color: rgba(255,79,163,.18);
}
/* never let a long word or media push the page wider than the screen */
img, svg, video, image-slot, pre, table { max-width: 100%; }
h1, h2, h3, p, a, span, li { overflow-wrap: break-word; }
a { color: var(--link-color); text-decoration: none; }
a:hover { color: var(--link-color-hover); }
::selection { background: rgba(255,79,163,.24); }

/* comfortable, reliable touch targets everywhere */
button, a, [role="button"], input, select, textarea { touch-action: manipulation; }

.wrap { max-width: var(--content-max); margin: 0 auto; }
.eyebrow { font-family: var(--font-heading); font-weight: 600; font-size: 0.72rem; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--sk-teal); }
.desk-nav { display: none; }

/* hero */
.hero { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.hero-media { order: -1; aspect-ratio: 4 / 3; }
.hero-cta { display: flex; flex-direction: column; gap: 12px; }
.hero-cta > * { width: 100%; }

/* categories */
.cat-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.cat-tile { display: block; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-card); border: 1px solid var(--sk-line); box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.cat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cat-img { aspect-ratio: 16 / 10; }
.cat-label { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; }

/* products */
.prod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* finish strip */
.finish { display: grid; grid-template-columns: 1fr; }
.finish-media { aspect-ratio: 16 / 10; }
.finish-copy { padding: clamp(22px,4vw,40px); }

/* about */
.about { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.about-media { aspect-ratio: 4 / 3; }

/* footer */
.footer { display: grid; grid-template-columns: 1fr; gap: 32px; }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.foot-h { font-family: var(--font-heading); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-heading); margin-bottom: 10px; }
.foot-cols a { display: flex; align-items: center; min-height: 44px; font-family: var(--font-body); font-size: 0.95rem; color: var(--text-muted); }

/* bottom tab bar */
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; display: flex; justify-content: space-around; align-items: center;
  background: rgba(251,252,254,.94); backdrop-filter: blur(10px); border-top: 1px solid var(--sk-line); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: none; cursor: pointer; padding: 4px 8px; text-decoration: none; min-width: 56px; min-height: 50px;
  font-family: var(--font-heading); font-weight: 600; font-size: 0.68rem; color: var(--text-muted); }
.tab:hover { color: var(--text-muted); }
.tab.on, .tab.on:hover { color: var(--sk-coral); }

image-slot { display: block; width: 100%; height: 100%; }

/* ---- shop ---- */
.page-head { padding: clamp(20px,4vw,40px) var(--gutter) 0; }
.shop-layout { display: grid; grid-template-columns: 1fr; gap: 20px; padding: 20px var(--gutter) 0; }
.filter-rail { display: none; }
.chip-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.chip-row::-webkit-scrollbar { display: none; }
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---- product ---- */
.pdp { display: grid; grid-template-columns: 1fr; gap: 24px; padding: clamp(16px,3vw,32px) var(--gutter) 0; }
.pdp-gallery { display: flex; flex-direction: column; gap: 12px; }
.pdp-main { aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden; position: relative; box-shadow: var(--shadow-md); }
.pdp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pdp-thumb { aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden; border: 2px solid transparent; cursor: pointer; }
.pdp-thumb.on { border-color: var(--sk-coral); }
.pdp-buy { display: flex; flex-direction: column; gap: 14px; }
.pdp-sticky { position: sticky; bottom: 74px; z-index: 20; background: rgba(251,252,254,.96); backdrop-filter: blur(8px); border-top: 1px solid var(--sk-line); padding: 12px var(--gutter); display: flex; gap: 12px; align-items: center; margin-top: 20px; }

/* ---- build your own ---- */
.build-wrap { max-width: 860px; margin: 0 auto; padding: clamp(16px,3vw,32px) var(--gutter) 0; }

/* ---- about / process ---- */
.process-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* ---- contact ---- */
.contact-layout { display: grid; grid-template-columns: 1fr; gap: 32px; }

/* ---- studio (Kelly's tool) ---- */
.studio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.studio-editor-grid { grid-template-columns: 1fr !important; }
@media (min-width: 720px) {
  .process-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .contact-layout { grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
  .studio-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .studio-editor-grid { grid-template-columns: 280px 1fr !important; align-items: start; }
}
.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.build-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.summary-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--sk-line-soft); font-family: var(--font-body); }
.summary-row b { font-family: var(--font-heading); color: var(--text-heading); }

/* ---- desktop ---- */
@media (min-width: 720px) {
  .desk-nav { display: flex; }
  .tabbar { display: none; }
  .hero { grid-template-columns: 1.05fr 1fr; gap: 40px; }
  .hero-media { order: 0; aspect-ratio: 5 / 4; }
  .hero-cta { flex-direction: row; }
  .hero-cta > * { width: auto; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .prod-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .finish { grid-template-columns: 1fr 1.1fr; }
  .finish-media { aspect-ratio: auto; min-height: 320px; }
  .about { grid-template-columns: 1fr 1fr; gap: 48px; }
  .footer { grid-template-columns: 1.3fr 2fr; }
  .foot-cols { grid-template-columns: repeat(3, 1fr); }

  .shop-layout { grid-template-columns: 220px 1fr; gap: 32px; }
  .filter-rail { display: flex; flex-direction: column; gap: 10px; }
  .chip-row { display: none; }
  .shop-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }

  .pdp { grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: start; }
  .pdp-gallery { flex-direction: row-reverse; }
  .pdp-main { flex: 1; }
  .pdp-thumbs { grid-template-columns: 1fr; width: 78px; }
  .pdp-sticky { display: none; }
  .opt-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 719px) { body { padding-bottom: 74px; } }

/* very small phones: tighten the page gutter so content isn't squeezed */
@media (max-width: 380px) {
  :root { --gutter: 16px; }
}

/* full-height screens (Studio sign-in, welcome/share overlays) must use the
   dynamic viewport unit so mobile browser toolbars don't clip or cause jump */
.fullvh { min-height: 100vh; min-height: 100dvh; }