/** Shopify CDN: Minification failed

Line 5612:14 Expected identifier but found whitespace
Line 5612:20 Unexpected "!"
Line 5625:0 Unexpected "}"

**/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    /* ── Dark-first palette matching reference ── */
    --bg:          #0e1012;
    --bg-2:        #141719;
    --bg-3:        #1a1d20;
    --bg-4:        #222629;
    --border:      rgba(255,255,255,0.07);
    --border-mid:  rgba(255,255,255,0.12);
    /* text */
    --text:        #FFFFFF;
    --text-dim:    rgba(255,255,255,0.5);
    --text-muted:  rgba(255,255,255,0.28);
    /* slate coaster tones */
    --slate: #0e1012;
    --slate-mid: #1a1d20;
    --stone: #9ea8b0;
    /* accent — warm off-white used sparingly */
    --accent:      #c8bfb4;
    --accent-warm: #b0a090;
    /* legacy aliases so JS-injected HTML still works */
    --white: #FFFFFF;
    --off-white: #141719;
    --cream: #1a1d20;
    --slate-light: rgba(255,255,255,0.4);
    --accent-light: #b0a090;
    --shadow: rgba(0,0,0,0.4);
  }

  html { scroll-behavior: smooth; }

  body {
    font-family: 'Barlow', sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
  }

  /* ─── SCROLLBAR ─── */
  ::-webkit-scrollbar { width: 3px; }
  ::-webkit-scrollbar-track { background: var(--bg); }
  ::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 2px; }

  /* ─── HEADER ─── */
  header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    padding: 0;
    background: rgba(14,16,18,0.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    transition: box-shadow 0.3s;
  }
  header.scrolled { box-shadow: 0 2px 40px rgba(0,0,0,0.6); }

  .announcement-bar {
    display: flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 5vw;
    background: var(--announcement-bg, #0e1012);
    color: var(--announcement-color, #fff);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .header-inner {
    padding: 0 5vw;
    height: 68px;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
    align-items: center;
  }

  /* LOGO — narrow condensed black text per brief */
  .logo {
    font-family: 'Barlow Condensed', 'Bebas Neue', sans-serif;
    font-size: 1.55rem;
    font-weight: 300;
    letter-spacing: 0.5em;
    color: #FFFFFF;
    text-decoration: none;
    background: transparent;
    padding: 0;
    line-height: 1;
    display: inline-flex; align-items: center; gap: 0;
    justify-self: start;
    max-width: min(var(--logo-width, 220px), 34vw);
  }
  .logo img {
    width: min(var(--logo-width, 220px), 34vw);
    height: auto;
    max-height: 44px;
    object-fit: contain;
  }
  .logo .logo-dot {
    display: inline-block;
    width: 5px; height: 5px;
    background: #fff;
    border-radius: 50%;
    margin-left: 3px;
    margin-bottom: 2px;
    vertical-align: middle;
  }

  nav {
    display: flex;
    gap: clamp(1.5rem, 2.2vw, 2.5rem);
    align-items: center;
    justify-content: center;
    justify-self: center;
  }
  nav a {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--slate);
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.2s;
  }
  nav a:hover { opacity: 1; }

  .header-right {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    justify-self: end;
  }

  .header-search {
    width: clamp(130px, 12vw, 190px);
  }
  .header-search input {
    width: 100%;
    height: 34px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    background: rgba(255,255,255,0.035);
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    outline: none;
    padding: 0 0.9rem;
    text-transform: uppercase;
  }
  .header-search input::placeholder { color: rgba(255,255,255,0.42); }
  .header-search input:focus { border-color: rgba(200,191,180,0.55); }

  .cart-btn {
    position: relative;
    background: var(--slate);
    color: var(--white);
    border: none;
    width: 42px; height: 42px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, transform 0.2s;
    font-size: 1rem;
  }
  .cart-btn:hover { background: var(--accent); transform: scale(1.05); }
  .cart-count {
    position: absolute; top: -4px; right: -4px;
    background: var(--accent);
    color: var(--white);
    width: 18px; height: 18px;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.2s, transform 0.2s;
  }
  .cart-count.visible { opacity: 1; transform: scale(1); }

  /* ─── HERO ─── */
  #hero {
    min-height: 100vh;
    min-height: 100svh;
    background:
      radial-gradient(circle at 72% 46%, rgba(94,103,108,0.2), transparent 34%),
      linear-gradient(120deg, rgba(0,0,0,0.3), transparent 45%),
      var(--slate);
    position: relative;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    padding-top: clamp(96px, 12vh, 132px);
    padding-bottom: clamp(2.5rem, 6vh, 4rem);
  }

  /* Stone texture overlay */
  #hero::before {
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
    opacity: 0.6;
    pointer-events: none;
  }

  /* Realistic rotating stone focal point */
  .hero-coaster-bg {
    position: absolute;
    width: min(78vmin, 760px); height: min(78vmin, 760px);
    border-radius: 46% 54% 51% 49% / 48% 45% 55% 52%;
    background:
      radial-gradient(circle at 29% 22%, rgba(255,255,255,0.22), transparent 7%),
      radial-gradient(circle at 68% 73%, rgba(0,0,0,0.78), transparent 32%),
      radial-gradient(ellipse at 38% 35%, rgba(146,158,164,0.22), transparent 30%),
      radial-gradient(ellipse at 52% 49%, #5c6870 0%, #3a464d 29%, #222c32 58%, #0a0d10 100%);
    box-shadow:
      inset 34px 30px 70px rgba(255,255,255,0.11),
      inset -62px -70px 120px rgba(0,0,0,0.82),
      inset 0 0 0 7px rgba(255,255,255,0.03),
      inset 0 0 0 19px rgba(0,0,0,0.2),
      inset 0 0 72px rgba(0,0,0,0.54),
      0 42px 110px rgba(0,0,0,0.68),
      0 0 190px rgba(141,154,161,0.18);
    opacity: 0.9;
    right: clamp(-2rem, 4vw, 5rem); top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
    clip-path: polygon(51% 0%, 60% 2%, 68% 0%, 80% 7%, 90% 12%, 96% 24%, 100% 36%, 97% 47%, 99% 59%, 93% 70%, 88% 84%, 76% 90%, 66% 98%, 53% 96%, 40% 100%, 29% 95%, 17% 91%, 10% 79%, 2% 68%, 4% 55%, 0% 43%, 5% 30%, 8% 17%, 20% 10%, 31% 3%, 43% 5%);
    animation: rotateStone 30s linear infinite;
    transform-origin: 50% 50%;
    will-change: transform;
  }
  .hero-coaster-bg::before {
    content: '';
    position: absolute; inset: -14%;
    z-index: 4;
    background:
      linear-gradient(22deg, transparent 31%, rgba(255,255,255,0.14) 31.35%, transparent 32.9%),
      linear-gradient(118deg, transparent 48%, rgba(0,0,0,0.5) 48.2%, transparent 49.6%),
      linear-gradient(158deg, transparent 23%, rgba(220,226,226,0.1) 23.35%, transparent 24.3%),
      linear-gradient(78deg, transparent 60%, rgba(255,255,255,0.075) 60.25%, transparent 61.5%),
      linear-gradient(8deg, transparent 42%, rgba(0,0,0,0.22) 42.2%, transparent 42.8%),
      radial-gradient(circle at 13% 28%, rgba(255,255,255,0.18) 0 1px, transparent 2px),
      radial-gradient(circle at 24% 62%, rgba(0,0,0,0.62) 0 1px, transparent 2px),
      radial-gradient(circle at 72% 38%, rgba(255,255,255,0.2) 0 1px, transparent 2px),
      radial-gradient(circle at 83% 77%, rgba(0,0,0,0.56) 0 1.5px, transparent 3px),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='7' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.48 0 0 0 0 0 0.48 0 0 0 0 0 0.48 0 0 0 0 0 0.58 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    opacity: 0.92;
    pointer-events: none;
  }
  .hero-coaster-bg::after {
    content: '';
    position: absolute; inset: 0;
    z-index: 7;
    border-radius: inherit;
    background:
      radial-gradient(circle at 17% 14%, rgba(255,255,255,0.2), transparent 12%),
      radial-gradient(ellipse at 34% 28%, rgba(255,255,255,0.08), transparent 25%),
      linear-gradient(105deg, rgba(255,255,255,0.2), transparent 19% 66%, rgba(0,0,0,0.62)),
      radial-gradient(circle at 42% 52%, transparent 0 50%, rgba(255,255,255,0.06) 51%, transparent 54%),
      radial-gradient(circle at 51% 49%, transparent 0 62%, rgba(0,0,0,0.52) 81%, rgba(0,0,0,0.84) 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.11), inset 0 0 34px rgba(0,0,0,0.48);
    pointer-events: none;
  }

  .stone-surface {
    position: absolute; inset: 0;
    z-index: 1;
    background:
      repeating-linear-gradient(7deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 7px),
      repeating-linear-gradient(94deg, rgba(0,0,0,0.14) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(151deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 18px),
      radial-gradient(ellipse at 22% 40%, rgba(188,199,202,0.15), transparent 28%),
      radial-gradient(ellipse at 76% 32%, rgba(255,255,255,0.09), transparent 18%),
      radial-gradient(ellipse at 58% 76%, rgba(0,0,0,0.42), transparent 33%);
    mix-blend-mode: soft-light;
    opacity: 0.96;
    pointer-events: none;
  }
  .stone-surface::before {
    content: '';
    position: absolute; inset: 2%;
    border-radius: inherit;
    background:
      radial-gradient(circle at 18% 18%, rgba(255,255,255,0.16) 0 2px, transparent 3px),
      radial-gradient(circle at 37% 64%, rgba(0,0,0,0.48) 0 1.5px, transparent 3px),
      radial-gradient(circle at 61% 22%, rgba(240,244,241,0.13) 0 1px, transparent 2px),
      radial-gradient(circle at 80% 52%, rgba(0,0,0,0.54) 0 2px, transparent 4px),
      radial-gradient(circle at 42% 84%, rgba(255,255,255,0.12) 0 1px, transparent 2px),
      radial-gradient(circle at 54% 43%, rgba(0,0,0,0.44) 0 1px, transparent 2px);
    background-size: 86px 86px, 116px 116px, 72px 72px, 126px 126px, 64px 64px, 48px 48px;
    filter: blur(0.08px);
    opacity: 0.78;
  }
  .stone-surface::after {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse at 16% 50%, rgba(0,0,0,0.34), transparent 18%),
      radial-gradient(ellipse at 95% 38%, rgba(255,255,255,0.09), transparent 13%),
      radial-gradient(ellipse at 52% 100%, rgba(0,0,0,0.42), transparent 22%);
    mix-blend-mode: multiply;
    opacity: 0.72;
  }
  .stone-chip {
    position: absolute;
    z-index: 6;
    width: 14%; height: 10%;
    background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(0,0,0,0.56));
    clip-path: polygon(8% 22%, 34% 0%, 76% 14%, 100% 58%, 52% 100%, 13% 76%);
    mix-blend-mode: overlay;
    opacity: 0.82;
    pointer-events: none;
  }
  .stone-chip:nth-child(2) { left: 6%; top: 30%; transform: rotate(-22deg); }
  .stone-chip:nth-child(3) { right: 3%; top: 48%; transform: rotate(30deg) scale(0.9); }
  .stone-chip:nth-child(4) { left: 41%; bottom: 0%; transform: rotate(12deg) scale(0.74); }
  .stone-crack {
    position: absolute;
    z-index: 6;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.8), rgba(255,255,255,0.12), transparent);
    transform-origin: left center;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,0.06));
    opacity: 0.74;
    pointer-events: none;
  }
  .stone-crack::after {
    content: '';
    position: absolute;
    left: 58%; top: -1px;
    width: 38%; height: 1px;
    background: inherit;
    transform: rotate(24deg);
    transform-origin: left center;
    opacity: 0.6;
  }
  .stone-crack:nth-child(5) { width: 30%; left: 17%; top: 34%; transform: rotate(22deg); }
  .stone-crack:nth-child(6) { width: 20%; right: 18%; top: 58%; transform: rotate(-34deg); opacity: 0.58; }
  .stone-crack:nth-child(7) { width: 24%; left: 47%; top: 22%; transform: rotate(62deg); opacity: 0.5; }

  .stone-engraving {
    position: absolute;
    left: 50%; top: 50%;
    z-index: 3;
    width: 54%; height: 54%;
    transform: translate(-50%, -50%);
    border-radius: 43% 57% 50% 50% / 48% 44% 56% 52%;
    overflow: hidden;
    background: rgba(202,211,214,0.045);
    box-shadow:
      inset 0 0 30px rgba(0,0,0,0.62),
      inset 0 0 0 1px rgba(255,255,255,0.06),
      0 0 38px rgba(0,0,0,0.28);
    opacity: 0.72;
    mix-blend-mode: luminosity;
  }
  .stone-engraving::before {
    content: '';
    position: absolute; inset: 0;
    z-index: 2;
    background:
      radial-gradient(circle at 42% 34%, rgba(255,255,255,0.23), transparent 21%),
      linear-gradient(135deg, rgba(255,255,255,0.16), transparent 28% 70%, rgba(0,0,0,0.58)),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='e'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.35' numOctaves='5'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23e)' opacity='0.32'/%3E%3C/svg%3E");
    mix-blend-mode: hard-light;
    opacity: 0.88;
    pointer-events: none;
  }
  .stone-engraving::after {
    content: '';
    position: absolute; inset: 7%;
    z-index: 3;
    border-radius: inherit;
    border: 1px solid rgba(236,239,236,0.1);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.66);
    pointer-events: none;
  }
  .stone-engraving img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 48%;
    filter: grayscale(1) brightness(0.62) contrast(2.35) sepia(0.08) saturate(0.15);
    mix-blend-mode: screen;
    opacity: 0.48;
  }

  #hero .hero-content::before {
    content: '';
    position: absolute;
    inset: -2.8rem -3.4rem;
    background: radial-gradient(ellipse at 38% 48%, rgba(14,16,18,0.86), rgba(14,16,18,0.48) 52%, transparent 72%);
    z-index: -1;
    pointer-events: none;
  }

  @keyframes rotateStone {
    from { transform: translateY(-50%) rotate(0deg); }
    to { transform: translateY(-50%) rotate(360deg); }
  }

  .hero-product-block {
    background: #f4f1ed;
    color: var(--slate);
    padding: 4.4rem 5vw 4.8rem;
    text-align: center;
  }
  .hero-product-card {
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .hero-product-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.1rem, 4vw, 3rem);
    font-weight: 400;
    line-height: 1.05;
    color: #111518;
  }
  .hero-product-desc {
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(17,21,24,0.62);
  }
  .hero-product-btn {
    margin-top: 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    padding: 1rem 2rem;
    background: #111518;
    color: #fff;
    border: 1px solid #111518;
    appearance: none;
    cursor: pointer;
    text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: background 0.2s, color 0.2s, transform 0.2s;
  }
  .hero-product-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-2px);
  }

  .hero-content {
    position: relative; z-index: 2;
    max-width: 680px;
    padding: 0 5vw;
    text-align: left;
  }

  .hero-eyebrow {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-light);
    margin-bottom: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.8rem;
  }
  .hero-eyebrow::before {
    content: '';
    display: inline-block;
    width: 28px; height: 1px;
    background: var(--accent-light);
  }

  .hero-headline {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 300;
    line-height: 1.08;
    color: var(--white);
    margin-bottom: 1.4rem;
    letter-spacing: -0.01em;
  }
  .hero-headline em {
    font-style: italic;
    color: var(--stone);
  }

  .hero-sub {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255,255,255,0.55);
    max-width: 440px;
    margin-bottom: 2.8rem;
  }

  .cta-primary {
    display: inline-flex; align-items: center; gap: 0.8rem;
    background: var(--white);
    color: var(--slate);
    padding: 1rem 2.2rem;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    border: none; cursor: pointer;
    text-decoration: none;
    transition: background 0.25s, color 0.25s, transform 0.2s, gap 0.25s;
    position: relative;
    overflow: hidden;
  }
  .cta-primary::after {
    content: '→';
    transition: transform 0.25s;
  }
  .cta-primary:hover {
    background: var(--accent);
    color: var(--white);
    gap: 1.2rem;
  }
  .cta-primary:hover::after { transform: translateX(4px); }

  .hero-scroll {
    position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    color: rgba(255,255,255,0.3);
    font-size: 0.65rem;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    animation: bounce 2s ease-in-out infinite;
  }
  .hero-scroll::before {
    content: '';
    width: 1px; height: 40px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.3));
  }
  @keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(6px); }
  }

  /* ─── SECTION COMMON ─── */
  section { padding: 7rem 5vw; }
  .section-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1rem;
  }
  .section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 300;
    line-height: 1.15;
    color: var(--slate);
  }
  .section-title em { font-style: italic; color: var(--accent); }

  /* ─── CATEGORIES ─── */
  #categories {
    background: var(--off-white);
    padding-top: 6rem; padding-bottom: 6rem;
  }
  .categories-header { text-align: center; margin-bottom: 4rem; }
  .categories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 1232px;
    margin: 0 auto;
  }

  .cat-card {
    position: relative;
    overflow: hidden;
    background: var(--slate);
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(.4,0,.2,1);
    text-decoration: none;
  }
  .cat-card:hover { transform: translateY(-6px); }

  .cat-card-img {
    width: 100%;
    height: 300px;
    position: relative; overflow: hidden;
  }

  /* SVG coaster illustration */
  .cat-card-img svg {
    width: 100%;
    height: 300px;
    display: block;
  }


  .cat-card-body {
    padding: 2rem 2rem 2.2rem;
    background: var(--slate);
    position: relative;
  }
  .cat-number {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.75rem;
    color: var(--stone);
    letter-spacing: 0.12em;
    margin-bottom: 0.6rem;
    opacity: 0.6;
  }
  .cat-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--white);
    margin-bottom: 0.8rem;
    line-height: 1.2;
  }
  .cat-desc {
    font-size: 0.82rem;
    font-weight: 300;
    color: rgba(255,255,255,0.5);
    line-height: 1.65;
    margin-bottom: 1.5rem;
  }
  .cat-btn {
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 0.65rem 1.4rem;
    border: 1px solid rgba(255,255,255,0.25);
    color: var(--white);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, gap 0.25s;
  }
  .cat-btn::after { content: '→'; transition: transform 0.25s; }
  .cat-btn:hover { background: var(--accent); border-color: var(--accent); gap: 1rem; }
  .cat-btn:hover::after { transform: translateX(3px); }

  /* ─── HOMEPAGE PREVIEW DEMO ─── */
  .demo-preview-section {
    background:
      radial-gradient(circle at 82% 22%, rgba(136,54,31,.2), transparent 30%),
      radial-gradient(circle at 18% 74%, rgba(94,103,108,.18), transparent 34%),
      var(--slate);
    padding: 6rem 5vw;
    border-top: 1px solid rgba(255,255,255,.07);
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .demo-preview-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0,.88fr) minmax(360px,1fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
  }
  .demo-preview-copy .section-title {
    color: #fff;
    max-width: 620px;
  }
.demo-preview-copy p {
  max-width: 540px;
  color: #fff;
  font-family: Barlow, Arial, Helvetica, sans-serif;
  font-size: .94rem;
  line-height: 1.75;
  margin-top: 1.1rem;
}
  .demo-mode-toggle {
    display: inline-flex;
    gap: .35rem;
    padding: .32rem;
    margin-top: 1.6rem;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.045);
  }
  .demo-mode-toggle button {
    min-width: 86px;
    border: 2px solid #fff;
    padding: .72rem 1rem;
    background: transparent;
    color: rgba(255,255,255,.58);
    cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .76rem;
    letter-spacing: .16em;
    text-transform: uppercase;
  }
  .demo-mode-toggle button.active {
    background: #f4f1ec;
    color: #0e1012;
  }
  .demo-preview-actions {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    margin-top: 1.7rem;
  }
  .demo-preview-panel {
    background: #f4f1ec;
    color: #0e1012;
    padding: clamp(1.25rem, 3vw, 2rem);
    box-shadow: 0 34px 110px rgba(0,0,0,.34);
  }
  .demo-preview-area {
    background: #ebe6de;
    min-height: 420px;
  }
  .demo-mockup {
    width: min(62vw, 360px);
    height: min(62vw, 360px);
  }
  .demo-preview-controls {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
  }
  .demo-preview-controls .text-input {
    background: #fff;
  }
  @media (max-width: 860px) {
    .demo-preview-grid { grid-template-columns: 1fr; }
    .demo-preview-area { min-height: 320px; }
    .demo-mockup { width: min(82vw, 330px); height: min(82vw, 330px); }
  }

  /* ─── CUSTOMIZATION SECTION ─── */
  .customization-section {
    padding: 6rem 5vw;
    background: var(--white);
  }
  .customization-section:nth-of-type(even) { background: var(--off-white); }

  .custom-header {
    max-width: 1200px; margin: 0 auto 4rem;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 2rem; flex-wrap: wrap;
  }
  .custom-header-right {
    font-size: 0.8rem;
    color: var(--slate-light);
    font-weight: 300;
    max-width: 280px;
    line-height: 1.7;
  }

  .custom-intro-steps {
    max-width: 1200px;
    margin: -2rem auto 3rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
  }
  .custom-step {
    background: rgba(14,16,18,0.72);
    padding: 1.2rem 1.3rem;
    min-height: 112px;
  }
  .custom-step-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    display: block;
    margin-bottom: 0.55rem;
  }
  .custom-step-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    color: var(--white);
    margin-bottom: 0.35rem;
  }
  .custom-step-copy {
    font-size: 0.76rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.48);
  }
  .custom-guidance {
    max-width: 1200px;
    margin: 0 auto 1.1rem;
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: flex-end;
  }
  .custom-guidance strong {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.76rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--white);
  }
  .custom-guidance span {
    font-size: 0.78rem;
    color: var(--slate-light);
    max-width: 480px;
    line-height: 1.55;
  }

  /* Quantity selector */
  .qty-selector-wrap {
    max-width: 1200px; margin: 0 auto 3rem;
    padding: 1.5rem 2rem;
    background: var(--cream);
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  }
  .qty-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    font-weight: 600;
  }
  .qty-select {
    appearance: none;
    background: var(--slate) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23fff' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;
    color: var(--white);
    border: none;
    padding: 0.7rem 2.5rem 0.7rem 1.1rem;
    font-family: 'Barlow', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    min-width: 100px;
  }
  .qty-note {
    font-size: 0.78rem;
    color: var(--slate-light);
    font-weight: 300;
  }

  /* Coaster blocks grid */
  .coasters-grid {
    max-width: 1200px; margin: 0 auto 3rem;
    display: grid;
    gap: 3rem;
    grid-template-columns: 1fr;
  }
  .coasters-grid.qty-1 { grid-template-columns: 1fr; max-width: 780px; }
  .coasters-grid.qty-3 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
  .coasters-grid.qty-5 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

  .coaster-block {
    display: flex; flex-direction: column; gap: 0;
    background: var(--white);
    border: 1px solid rgba(31,37,41,0.08);
    overflow: hidden;
    transition: box-shadow 0.3s;
  }
  .coaster-block:hover { box-shadow: 0 12px 48px rgba(31,37,41,0.12); }

  .coaster-block-header {
    padding: 1rem 1.4rem 0.6rem;
    background: var(--slate);
    display: flex; align-items: center; justify-content: space-between;
  }
  .coaster-block-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
  }
  .coaster-block-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    color: var(--stone);
    font-weight: 300;
  }

  /* COASTER PREVIEW */
  .preview-area {
    padding: 2rem;
    background: var(--cream);
    display: flex; align-items: center; justify-content: center;
    min-height: 260px;
  }

  .coaster-mockup {
    position: relative;
    width: 260px;
    height: auto;
    aspect-ratio: 1402 / 1122;
    border-radius: 0;
    background: url("hero-slate-family-wood.webp") center / contain no-repeat;
    box-shadow: none;
    display: flex; align-items: center; justify-content: center;
    overflow: visible;
    flex-shrink: 0;
  }

  /* Rings */
  .coaster-mockup::before {
    content: '';
    position: absolute;
    left: 12%;
    top: 10%;
    width: 76%;
    height: 67%;
    border: 0;
    border-radius: 0;
    clip-path: polygon(12% 14%, 25% 4%, 45% 3%, 64% 8%, 85% 16%, 98% 31%, 94% 58%, 83% 80%, 61% 94%, 33% 91%, 10% 77%, 1% 53%);
    background:
      radial-gradient(circle at 28% 18%, rgba(255,255,255,.11), transparent 18%),
      radial-gradient(circle at 72% 76%, rgba(0,0,0,.42), transparent 34%),
      repeating-linear-gradient(12deg, rgba(255,255,255,.025) 0 1px, transparent 1px 7px),
      linear-gradient(125deg, rgba(62,72,78,.94), rgba(18,24,28,.98));
    transform: rotate(-2deg) skewX(-7deg) skewY(2deg);
    transform-origin: center;
    mix-blend-mode: normal;
    pointer-events: none;
    z-index: 1;
  }
  .coaster-mockup::after {
    display: none;
  }

  .coaster-center-dot {
    position: absolute;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #111518;
    border: 1px solid rgba(255,255,255,0.1);
    z-index: 10;
    pointer-events: none;
  }

  .coaster-engraving {
    position: absolute;
    left: 12%;
    top: 10%;
    width: 76%;
    height: 67%;
    border-radius: 0;
    clip-path: polygon(12% 14%, 25% 4%, 45% 3%, 64% 8%, 85% 16%, 98% 31%, 94% 58%, 83% 80%, 61% 94%, 33% 91%, 10% 77%, 1% 53%);
    overflow: hidden;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px;
    z-index: 2;
    transform: rotate(-2deg) skewX(-7deg) skewY(2deg);
    transform-origin: center;
  }

  .engrave-img-preview {
    width: 100%; height: 100%;
    max-width: none; max-height: none;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: grayscale(1) brightness(0.62) contrast(2.35) sepia(0.08) saturate(0.15);
    opacity: 0.48;
    mix-blend-mode: screen;
  }

  .engrave-text-preview {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.55rem;
    color: rgba(255,255,255,0.35);
    text-align: center;
    padding: 0 10px;
    line-height: 1.3;
    max-width: 90%;
    word-break: break-word;
    font-style: italic;
    letter-spacing: 0.03em;
    display: none;
  }
  .engrave-text-preview.visible { display: block; }

  .engrave-placeholder {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    opacity: 0.35;
  }
  .engrave-placeholder svg { width: 36px; height: 36px; opacity: 0.6; }
  .engrave-placeholder span {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
  }

  /* Controls */
  .coaster-controls {
    padding: 1.4rem 1.6rem 1.8rem;
    display: flex; flex-direction: column; gap: 1rem;
  }
  .preview-only .custom-intro-steps,
  .preview-only .qty-selector-wrap,
  .preview-only .custom-guidance,
  .preview-only .coaster-controls {
    display: none;
  }
  .preview-only .coasters-grid {
    margin-bottom: 2rem;
  }
  .preview-only .preview-area {
    min-height: 320px;
  }
  .preview-only .add-cart-section {
    justify-content: center;
    text-align: center;
  }

  .upload-area {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.8rem;
    min-height: 64px;
    padding: 0.8rem 1rem;
    border: 1.5px dashed rgba(31,37,41,0.2);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: transparent;
  }
  .upload-area:hover { border-color: var(--accent); background: rgba(139,115,85,0.04); }
  .upload-area input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

  .upload-icon {
    width: 32px; height: 32px;
    background: var(--slate);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .upload-icon svg { width: 14px; height: 14px; }

  .upload-info {
    align-self: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    min-height: 32px;
  }
  .upload-info-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--slate);
    line-height: 1;
  }
  .upload-info-sub {
    font-size: 0.72rem;
    color: #000;
    margin-top: 2px;
  }
  .control-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.45rem;
  }
  .control-label span:first-child {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--slate);
  }
  .control-label span:last-child {
    font-size: 0.68rem;
    color: rgba(14,16,18,0.48);
  }
  .control-help {
    font-size: 0.72rem;
    color: rgba(14,16,18,0.52);
    line-height: 1.45;
    margin-top: 0.45rem;
  }
  .upload-thumb {
    align-self: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent);
    display: none;
  }
  .upload-thumb.visible { display: block; }

  .text-input-wrap { position: relative; }
  .text-input {
    width: 100%;
    padding: 0.85rem 3rem 0.85rem 1rem;
    border: 1px solid rgba(31,37,41,0.15);
    background: var(--off-white);
    font-family: 'Barlow', sans-serif;
    font-size: 0.85rem;
    color: var(--slate);
    outline: none;
    transition: border-color 0.2s, background 0.2s;
    resize: none;
  }
  .text-input:focus { border-color: var(--slate); background: var(--white); }
  .char-counter {
    position: absolute; bottom: 8px; right: 10px;
    font-size: 0.65rem;
    font-family: 'Barlow Condensed', sans-serif;
    color: var(--slate-light);
    letter-spacing: 0.06em;
    pointer-events: none;
  }
  .char-counter.warn { color: #c0392b; }

  .text-input-wrap .char-counter {
    bottom: 2.45rem;
  }


  /* ─── ADD TO CART BUTTON ─── */
  .add-cart-section {
    max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
  }
  .coasters-grid .add-cart-section {
    grid-column: 1 / -1;
    width: 100%;
  }
  .coasters-grid.qty-1 .add-cart-section {
    justify-content: center;
  }

  .btn-add-cart {
    display: inline-flex; align-items: center; gap: 0.8rem;
    background: var(--slate);
    color: var(--white);
    padding: 1.1rem 2.8rem;
    border: none; cursor: pointer;
    text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: background 0.25s, transform 0.15s, gap 0.25s;
    position: relative;
    overflow: hidden;
  }
  .btn-add-cart::before {
    content: '';
    position: absolute; inset: 0;
    background: var(--accent);
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(.4,0,.2,1);
  }
  .btn-add-cart:hover::before { transform: translateX(0); }
  .btn-add-cart span { position: relative; z-index: 1; }

  .price-display {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem;
    font-weight: 300;
    color: var(--slate);
  }
  .price-note {
    font-size: 0.75rem;
    color: #000;
    margin-top: 2px;
  }

  /* ─── CART DRAWER ─── */
  .cart-overlay {
    position: fixed; inset: 0;
    background: rgba(31,37,41,0.6);
    z-index: 2000;
    opacity: 0; pointer-events: none;
    transition: opacity 0.35s;
    backdrop-filter: blur(4px);
  }
  .cart-overlay.open { opacity: 1; pointer-events: all; }

  .cart-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(480px, 100vw);
    background: var(--white);
    z-index: 2001;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(.4,0,.2,1);
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  .cart-drawer.open { transform: translateX(0); }

  .cart-drawer-header {
    padding: 1.8rem 2rem 1.4rem;
    border-bottom: 1px solid rgba(31,37,41,0.08);
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
  }
  .cart-drawer-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--slate);
  }
  .cart-close {
    width: 36px; height: 36px;
    background: var(--off-white);
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    color: var(--slate);
    transition: background 0.2s;
  }
  .cart-close:hover { background: var(--cream); }

  .cart-items {
    flex: 1; overflow-y: auto;
    padding: 1.5rem 2rem;
    display: flex; flex-direction: column; gap: 1.5rem;
  }

  .cart-item {
    display: flex; gap: 1.2rem; align-items: flex-start;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(31,37,41,0.06);
    animation: slideInItem 0.35s ease;
  }
  @keyframes slideInItem { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

  .cart-item-thumb {
    width: 72px; height: 72px;
    border-radius: 50%;
    object-fit: cover;
    background: radial-gradient(circle at 40% 40%, #3e474e, #1c2226);
    flex-shrink: 0;
    overflow: hidden;
    border: 2px solid rgba(31,37,41,0.1);
  }
  .cart-item-thumb canvas {
    width: 100%; height: 100%;
    filter: grayscale(1) brightness(0.55) contrast(1.6);
  }
  .cart-item-thumb-placeholder {
    width: 100%; height: 100%;
    background: radial-gradient(circle at 40% 40%, #3e474e, #1c2226);
    display: flex; align-items: center; justify-content: center;
  }
  .cart-item-thumb-placeholder svg { width: 28px; opacity: 0.4; }

  .cart-item-info { flex: 1; min-width: 0; }
  .cart-item-type {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.3rem;
  }
  .cart-item-coaster-num {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--slate);
    margin-bottom: 0.3rem;
  }
  .cart-item-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.95rem;
    font-style: italic;
    color: var(--slate-light);
    line-height: 1.4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .cart-item-img-file {
    font-size: 0.7rem;
    color: var(--stone);
    margin-top: 2px;
  }

  .cart-footer {
    padding: 1.5rem 2rem 2rem;
    border-top: 1px solid rgba(31,37,41,0.08);
    flex-shrink: 0;
  }
  .cart-total-row {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 1.2rem;
  }
  .cart-total-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--slate-light);
  }
  .cart-total-amount {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    font-weight: 300;
    color: var(--slate);
  }
.about-slate-stack::before,
.about-slate-stack::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.about-slate-stack::before {
  inset: 12% 7% 8% 8%;
  z-index: 0;
  transform: rotateX(62deg) rotateZ(-7deg) translateY(18%);
  border-radius: 49% 51% 50% 50% / 46% 50% 52% 54%;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.72), transparent 68%),
    radial-gradient(ellipse at 44% 58%, rgba(96,72,50,.34), transparent 62%);
  filter: blur(10px);
}
.about-slate-stack::after {
  inset: 12%;
  z-index: 8;
  border-radius: 45% 55% 49% 51% / 50% 44% 56% 50%;
  clip-path: polygon(50% 0%, 61% 3%, 71% 1%, 84% 8%, 95% 22%, 100% 36%, 97% 49%, 99% 62%, 91% 76%, 80% 89%, 66% 96%, 51% 94%, 38% 100%, 24% 92%, 10% 84%, 3% 69%, 0% 55%, 4% 40%, 2% 28%, 12% 13%, 28% 5%, 40% 7%);
  background:
    linear-gradient(123deg, transparent 15%, rgba(255,255,255,.2) 15.35%, transparent 16.3%),
    linear-gradient(32deg, transparent 38%, rgba(0,0,0,.45) 38.2%, transparent 39.4%),
    linear-gradient(78deg, transparent 67%, rgba(235,230,218,.1) 67.2%, transparent 68%),
    repeating-linear-gradient(10deg, rgba(255,255,255,.04) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(96deg, rgba(0,0,0,.18) 0 1px, transparent 1px 13px),
    radial-gradient(circle at 24% 21%, rgba(255,255,255,.22), transparent 10%),
    radial-gradient(circle at 82% 76%, rgba(0,0,0,.58), transparent 26%);
  mix-blend-mode: overlay;
  opacity: .88;
}
.about-slate-stack span {
  position: absolute;
  inset: 9%;
  border-radius: 45% 55% 49% 51% / 50% 44% 56% 50%;
  overflow: hidden;
  clip-path: polygon(50% 0%, 61% 3%, 71% 1%, 84% 8%, 95% 22%, 100% 36%, 97% 49%, 99% 62%, 91% 76%, 80% 89%, 66% 96%, 51% 94%, 38% 100%, 24% 92%, 10% 84%, 3% 69%, 0% 55%, 4% 40%, 2% 28%, 12% 13%, 28% 5%, 40% 7%);
  background:
    radial-gradient(circle at 26% 19%, rgba(255,255,255,.32), transparent 8%),
    radial-gradient(circle at 68% 74%, rgba(0,0,0,.82), transparent 34%),
    radial-gradient(ellipse at 42% 37%, rgba(147,157,160,.32), transparent 30%),
    radial-gradient(ellipse at 57% 52%, #6b767b 0%, #424d52 30%, #20282d 62%, #07090a 100%);
  box-shadow:
    inset 42px 34px 90px rgba(255,255,255,.16),
    inset -72px -78px 140px rgba(0,0,0,.88),
    inset 0 0 0 8px rgba(255,255,255,.035),
    inset 0 0 0 22px rgba(0,0,0,.18),
    0 16px 0 rgba(6,7,7,.74),
    0 32px 72px rgba(0,0,0,.62);
  transform-style: preserve-3d;
}
.about-slate-stack span::before,
.about-slate-stack span::after {
  content: '';
  position: absolute;
  inset: -12%;
  pointer-events: none;
}
.about-slate-stack span::before {
  background:
    radial-gradient(circle at 16% 22%, rgba(255,255,255,.2) 0 1px, transparent 2px),
    radial-gradient(circle at 31% 68%, rgba(0,0,0,.58) 0 1.2px, transparent 2.6px),
    radial-gradient(circle at 72% 32%, rgba(255,255,255,.24) 0 1px, transparent 2px),
    radial-gradient(circle at 81% 83%, rgba(0,0,0,.62) 0 1.6px, transparent 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='7' seed='31' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='.42 0 0 0 0 0 .42 0 0 0 0 0 .42 0 0 0 0 0 .68 0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23a)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: .95;
}
.about-slate-stack span::after {
  inset: 20% 19% 21%;
  border: 1px solid rgba(226,220,205,.34);
  border-radius: 43% 57% 48% 52% / 49% 45% 55% 51%;
  background:
    linear-gradient(20deg, transparent 28%, rgba(226,220,205,.28) 28.2%, transparent 29.4%),
    linear-gradient(118deg, transparent 52%, rgba(0,0,0,.45) 52.2%, transparent 53.2%),
    radial-gradient(ellipse at 50% 36%, rgba(226,220,205,.17), transparent 38%),
    radial-gradient(ellipse at 50% 68%, rgba(0,0,0,.38), transparent 45%);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.08),
    inset 0 -5px 12px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.08);
  mix-blend-mode: screen;
  opacity: .55;
}
.about-slate-stack span:nth-child(1) {
  z-index: 1;
  transform: translate3d(-11%, 11%, -64px) rotateX(14deg) rotateY(-12deg) rotateZ(-11deg);
  opacity: .58;
}
.about-slate-stack span:nth-child(2) {
  z-index: 2;
  transform: translate3d(8%, -2%, -30px) rotateX(12deg) rotateY(10deg) rotateZ(7deg);
  opacity: .78;
}
.about-slate-stack span:nth-child(3) {
  z-index: 3;
  transform: translate3d(0, 0, 0) rotateX(10deg) rotateY(-7deg) rotateZ(-2deg);
}
.about-story-section, .about-process-section, .about-material-section, .about-cta-section { padding:6rem 5vw; background:var(--off-white); }
.about-story-grid { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:minmax(0,.78fr) minmax(320px,1fr); gap:clamp(2rem,6vw,5rem); align-items:start; }
.about-story-copy .section-title, .about-process-section .section-title, .about-material-panel .section-title, .about-cta .section-title { color:#fff; }
.about-story-body { color:rgba(255,255,255,.58); font-size:1rem; line-height:1.85; }
.about-story-body p + p { margin-top:1.2rem; }
.about-process-section { background:#150b08; }
.about-process-grid { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.about-process-card { padding:2rem; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.045); color:#fff; }
.about-process-card h3 { font-family:'Cormorant Garamond',serif; font-size:1.7rem; font-weight:400; margin:.85rem 0 .6rem; }
.about-process-card p { color:rgba(255,255,255,.52); line-height:1.7; font-size:.88rem; }
.about-material-section { background:radial-gradient(circle at 20% 20%, rgba(136,54,31,.22), transparent 30%), #0e1012; }
.about-material-panel { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:minmax(0,.9fr) minmax(320px,1fr); gap:clamp(2rem,6vw,5rem); align-items:center; padding:3rem; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.035); }
.about-material-panel p { color:rgba(255,255,255,.58); line-height:1.8; }
.about-cta-section { background:#f4f1ec; }
.about-cta { max-width:820px; margin:0 auto; text-align:center; }
.about-cta .section-label { color:rgba(14,16,18,.48); }
.about-cta .section-title { color:#0e1012; margin-bottom:1.5rem; }
.about-cta .btn-add-cart { justify-content:center; }
@media (max-width: 860px) { .about-hero, .about-story-grid, .about-material-panel { grid-template-columns:1fr; } .about-hero { min-height:auto; } .about-hero-art { min-height:280px; opacity:.82; } .about-process-grid { grid-template-columns:1fr; } .about-material-panel { padding:1.6rem; } }


/* ─── HERO SQUARE 3D SLATE COASTER ─── */
#hero {
  perspective: 1400px;
}
#hero .hero-coaster-bg {
  width: min(62vmin, 620px);
  height: min(62vmin, 620px);
  right: clamp(-2rem, 4vw, 5rem);
  top: 52%;
  border-radius: 5.5% 4% 6% 4.5% / 4.5% 6% 4% 5.5%;
  clip-path: polygon(3% 8%, 9% 3%, 20% 4%, 31% 2%, 45% 5%, 57% 3%, 72% 5%, 87% 3%, 96% 10%, 98% 24%, 95% 39%, 98% 55%, 96% 74%, 99% 89%, 91% 98%, 74% 96%, 58% 99%, 43% 96%, 27% 98%, 11% 95%, 3% 86%, 5% 69%, 2% 54%, 5% 38%, 1% 22%);
  background:
    linear-gradient(132deg, rgba(255,255,255,.22), transparent 18% 60%, rgba(0,0,0,.62)),
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.2), transparent 12%),
    radial-gradient(circle at 82% 78%, rgba(0,0,0,.84), transparent 34%),
    repeating-linear-gradient(8deg, rgba(255,255,255,.035) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(96deg, rgba(0,0,0,.16) 0 1px, transparent 1px 13px),
    #2d3438;
  box-shadow:
    inset 26px 24px 60px rgba(255,255,255,.16),
    inset -52px -58px 100px rgba(0,0,0,.88),
    inset 0 0 0 7px rgba(255,255,255,.035),
    inset 0 0 0 24px rgba(0,0,0,.18),
    18px 22px 0 rgba(2,3,3,.88),
    38px 54px 96px rgba(0,0,0,.72),
    0 0 160px rgba(160,170,172,.14);
  opacity: .94;
  transform-origin: 50% 54%;
  transform-style: preserve-3d;
  animation: heroSquareCoasterFloat 12s ease-in-out infinite;
}
#hero .hero-coaster-bg::before {
  inset: -8%;
  z-index: 6;
  background:
    linear-gradient(18deg, transparent 28%, rgba(255,255,255,.16) 28.25%, transparent 29.3%),
    linear-gradient(112deg, transparent 54%, rgba(0,0,0,.58) 54.2%, transparent 55.4%),
    linear-gradient(76deg, transparent 70%, rgba(255,255,255,.09) 70.2%, transparent 71.2%),
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.26) 0 1px, transparent 2px),
    radial-gradient(circle at 27% 69%, rgba(0,0,0,.62) 0 1.5px, transparent 3px),
    radial-gradient(circle at 78% 36%, rgba(255,255,255,.22) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 84%, rgba(0,0,0,.68) 0 2px, transparent 4px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='8' seed='42' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='.48 0 0 0 0 0 .48 0 0 0 0 0 .48 0 0 0 0 0 .72 0'/%3E%3C/filter%3E%3Crect width='360' height='360' filter='url(%23s)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: .9;
}
#hero .hero-coaster-bg::after {
  inset: 0;
  z-index: 8;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255,255,255,.34), transparent 14% 72%, rgba(0,0,0,.76)),
    radial-gradient(ellipse at 22% 13%, rgba(255,255,255,.26), transparent 16%),
    radial-gradient(ellipse at 100% 50%, rgba(0,0,0,.9), transparent 19%),
    linear-gradient(90deg, transparent 0 93%, rgba(0,0,0,.7) 96%, rgba(0,0,0,.95));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 12px 10px 18px rgba(255,255,255,.06),
    inset -18px -20px 32px rgba(0,0,0,.7);
  pointer-events: none;
}
#hero .stone-surface {
  z-index: 2;
  opacity: .7;
  mix-blend-mode: overlay;
}
#hero .stone-chip {
  z-index: 9;
  background: linear-gradient(135deg, rgba(255,255,255,.24), rgba(0,0,0,.72));
  opacity: .72;
}
#hero .stone-chip:nth-child(2) { left: 0; top: 8%; width: 13%; height: 18%; transform: rotate(16deg); }
#hero .stone-chip:nth-child(3) { right: -1%; top: 10%; width: 11%; height: 16%; transform: rotate(-24deg); }
#hero .stone-chip:nth-child(4) { left: 72%; bottom: -1%; width: 17%; height: 10%; transform: rotate(8deg); }
#hero .stone-crack { z-index: 9; opacity: .64; }
#hero .stone-crack:nth-child(5) { width: 28%; left: 10%; top: 28%; transform: rotate(8deg); }
#hero .stone-crack:nth-child(6) { width: 22%; right: 7%; top: 73%; transform: rotate(-18deg); }
#hero .stone-crack:nth-child(7) { width: 24%; left: 51%; top: 16%; transform: rotate(42deg); }
#hero .stone-engraving {
  left: 50%;
  top: 50%;
  width: 83%;
  height: 83%;
  border-radius: 4% 3% 5% 4% / 4% 5% 3% 4%;
  transform: translate(-50%, -50%) translateZ(28px);
  background: rgba(200,205,202,.06);
  opacity: .96;
  mix-blend-mode: normal;
  box-shadow:
    inset 0 0 34px rgba(0,0,0,.72),
    inset 0 0 0 1px rgba(255,255,255,.13),
    inset 11px 9px 18px rgba(255,255,255,.1),
    inset -15px -18px 28px rgba(0,0,0,.64),
    0 2px 5px rgba(255,255,255,.08);
}
#hero .stone-engraving::before {
  z-index: 3;
  background:
    linear-gradient(132deg, rgba(255,255,255,.24), transparent 21% 66%, rgba(0,0,0,.72)),
    radial-gradient(ellipse at 26% 20%, rgba(255,255,255,.26), transparent 22%),
    repeating-linear-gradient(11deg, rgba(255,255,255,.06) 0 1px, transparent 1px 8px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='e'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.25' numOctaves='6' seed='17'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23e)' opacity='.4'/%3E%3C/svg%3E");
  mix-blend-mode: hard-light;
  opacity: .58;
}
#hero .stone-engraving::after {
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  border: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.22), transparent 5% 91%, rgba(0,0,0,.82)),
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 10% 88%, rgba(0,0,0,.58));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 0 24px rgba(0,0,0,.44);
}
#hero .stone-engraving img {
  filter: grayscale(1) brightness(.76) contrast(1.55) saturate(.05);
  opacity: .78;
  mix-blend-mode: luminosity;
  object-fit: cover;
  object-position: center;
}
@keyframes heroSquareCoasterFloat {
  0%, 100% { transform: translateY(-50%) rotateX(9deg) rotateY(-13deg) rotateZ(-2.5deg) translate3d(0,0,0); }
  35% { transform: translateY(-52%) rotateX(12deg) rotateY(-7deg) rotateZ(1.2deg) translate3d(-8px,-4px,18px); }
  70% { transform: translateY(-49%) rotateX(7deg) rotateY(-17deg) rotateZ(-4deg) translate3d(6px,5px,0); }
}

@media (min-width: 769px) and (max-width: 1180px) {
  #hero .hero-coaster-bg {
    right: clamp(-8rem, -8vw, -3rem);
    width: min(58vmin, 520px);
    height: min(58vmin, 520px);
    opacity: .62;
  }
  #hero .hero-content {
    transform: translateX(-8vw);
  }
}

@media (max-width: 860px) {
  #hero .hero-coaster-bg {
    width: min(78vw, 420px);
    height: min(78vw, 420px);
    right: 50%;
    top: 48%;
    opacity: .42;
    animation-duration: 14s;
  }
  #hero .hero-content::before { inset: -2rem; }
}

#hero .hero-coaster-bg {
  right: 0 !important;
  left: 50%;
}


/* User-supplied square coaster should be the full hero coaster face. */
#hero .hero-coaster-bg .stone-engraving {
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: translateZ(24px) !important;
  border-radius: inherit !important;
  opacity: 1 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    inset 18px 16px 34px rgba(255,255,255,.08),
    inset -26px -28px 48px rgba(0,0,0,.72) !important;
}
#hero .hero-coaster-bg .stone-engraving img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: grayscale(1) brightness(.88) contrast(1.22) saturate(.05) !important;
  opacity: .9 !important;
  mix-blend-mode: normal !important;
}
#hero .hero-coaster-bg .stone-engraving::before {
  opacity: .36 !important;
}
#hero .hero-coaster-bg .stone-engraving::after {
  background:
    linear-gradient(115deg, rgba(255,255,255,.2), transparent 16% 68%, rgba(0,0,0,.72)),
    radial-gradient(ellipse at 18% 12%, rgba(255,255,255,.2), transparent 18%),
    linear-gradient(90deg, transparent 0 88%, rgba(0,0,0,.68) 96%) !important;
}


/* Generated photorealistic slate-on-wood hero asset. */
#hero .hero-coaster-bg {
  clip-path: none !important;
  border-radius: 2.8% !important;
  background: transparent !important;
  box-shadow:
    24px 34px 80px rgba(0,0,0,.58),
    0 0 140px rgba(120,140,145,.12) !important;
}
#hero .hero-coaster-bg .stone-surface,
#hero .hero-coaster-bg .stone-chip,
#hero .hero-coaster-bg .stone-crack {
  display: none !important;
}
#hero .hero-coaster-bg::before {
  opacity: .18 !important;
  mix-blend-mode: overlay !important;
}
#hero .hero-coaster-bg::after {
  border-radius: inherit !important;
  background:
    linear-gradient(115deg, rgba(255,255,255,.16), transparent 20% 68%, rgba(0,0,0,.58)),
    radial-gradient(ellipse at 18% 14%, rgba(255,255,255,.14), transparent 19%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset -18px -22px 42px rgba(0,0,0,.42) !important;
}
#hero .hero-coaster-bg .stone-engraving {
  box-shadow: none !important;
  background: transparent !important;
}
#hero .hero-coaster-bg .stone-engraving::before {
  opacity: .12 !important;
}
#hero .hero-coaster-bg .stone-engraving::after {
  opacity: .28 !important;
}
#hero .hero-coaster-bg .stone-engraving img {
  filter: grayscale(.08) brightness(.92) contrast(1.08) saturate(.86) !important;
  opacity: 1 !important;
}

/* Transparent cutout hero: remove the floating engraving square/wrapper. */
#hero .hero-coaster-bg {
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#hero .hero-coaster-bg::before,
#hero .hero-coaster-bg::after,
#hero .hero-coaster-bg .stone-engraving::before,
#hero .hero-coaster-bg .stone-engraving::after {
  display: none !important;
}
#hero .hero-coaster-bg .stone-engraving {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
#hero .hero-coaster-bg .stone-engraving img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  filter: drop-shadow(28px 38px 70px rgba(0,0,0,.58)) contrast(1.05) brightness(.96) !important;
  opacity: 1 !important;
}

#hero .hero-content {
  padding: 0 5vw 0 0;
}

.engraving-preview-page {
  min-height: 100vh;
  background: var(--slate);
}
.engraving-preview-back {
  position: relative;
  z-index: 3;
  padding: clamp(6.5rem, 12vh, 8.5rem) 5vw 0;
  background: var(--slate);
}

.engraving-preview-page .demo-preview-section {
  padding-top: clamp(2rem, 5vh, 4rem);
  min-height: calc(100vh - 6rem);
}

.demo-preview-controls .upload-info-sub {
  color: #000;
}


/* Engraving preview quantity personalization */
.engraving-preview-page .demo-qty-selector {
  margin: 1.15rem 0 0;
  padding: 1rem 1.1rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  max-width: 540px;
  display: grid;
  grid-template-columns: auto minmax(130px, max-content) 1fr;
  align-items: center;
  gap: 0.7rem 1.1rem;
  border-radius: 0;
}
.engraving-preview-page .demo-qty-selector .qty-label,
.engraving-preview-page .demo-qty-selector .qty-note {
  color: rgba(255,255,255,0.72);
}
.engraving-preview-page .demo-qty-selector .qty-note {
  grid-column: 1 / -1;
  font-family: Barlow, Arial, Helvetica, sans-serif;
}
.engraving-preview-page .demo-price-range {
  justify-self: end;
  display: grid;
  gap: 0.18rem;
  text-align: right;
  color: #fff;
  line-height: 1;
}
.engraving-preview-page .demo-price-range__price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.45rem;
  color: #fff;
}
.engraving-preview-page .demo-price-range__qty {
  font-family: Barlow, Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}
.engraving-preview-page .demo-coasters-grid {
  max-width: none;
  margin-bottom: 0;
  gap: 1.5rem;
}
.engraving-preview-page .demo-coasters-grid.qty-1 {
  max-width: none;
}
.engraving-preview-page .demo-coasters-grid .coaster-block {
  box-shadow: 0 18px 54px rgba(31,37,41,0.08);
}

/* Engraving preview UX refinement */
.engraving-preview-page .demo-preview-grid {
  max-width: 1320px;
  grid-template-columns: minmax(320px, 0.82fr) minmax(520px, 1.18fr);
  align-items: start;
}
.engraving-preview-page .demo-preview-copy {
  position: sticky;
  top: 112px;
  align-self: start;
  padding-top: clamp(1rem, 4vh, 3rem);
}
.engraving-preview-page .demo-preview-panel {
  padding: clamp(0.9rem, 1.6vw, 1.3rem);
}
.engraving-preview-page .demo-coasters-grid.qty-3,
.engraving-preview-page .demo-coasters-grid.qty-5 {
  grid-template-columns: 1fr;
  gap: 1rem;
}
.engraving-preview-page .demo-coasters-grid.qty-3 .coaster-block,
.engraving-preview-page .demo-coasters-grid.qty-5 .coaster-block {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
}
.engraving-preview-page .demo-coasters-grid.qty-3 .coaster-block-header,
.engraving-preview-page .demo-coasters-grid.qty-5 .coaster-block-header {
  grid-column: 1 / -1;
  padding: 0.72rem 1rem 0.5rem;
}
.engraving-preview-page .demo-coasters-grid.qty-3 .preview-area,
.engraving-preview-page .demo-coasters-grid.qty-5 .preview-area {
  min-height: 190px;
  padding: 1rem;
}
.engraving-preview-page .demo-coasters-grid.qty-3 .coaster-mockup,
.engraving-preview-page .demo-coasters-grid.qty-5 .coaster-mockup {
  width: min(150px, 100%);
  height: min(150px, 100%);
}
.engraving-preview-page .demo-coasters-grid.qty-3 .coaster-controls,
.engraving-preview-page .demo-coasters-grid.qty-5 .coaster-controls {
  padding: 1rem;
  gap: 0.75rem;
  justify-content: center;
}
.engraving-preview-page .demo-coasters-grid.qty-3 .control-help,
.engraving-preview-page .demo-coasters-grid.qty-5 .control-help {
  display: none;
}
.engraving-preview-page .demo-coasters-grid.qty-3 .upload-area,
.engraving-preview-page .demo-coasters-grid.qty-5 .upload-area {
  min-height: 58px;
}
.engraving-preview-page .demo-coasters-grid.qty-3 .text-input,
.engraving-preview-page .demo-coasters-grid.qty-5 .text-input {
  min-height: 52px;
}
@media (max-width: 980px) {
  .engraving-preview-page .demo-preview-grid {
    grid-template-columns: 1fr;
  }
  .engraving-preview-page .demo-preview-copy {
    position: static;
    padding-top: 0;
  }
}
@media (max-width: 620px) {
  .engraving-preview-page .demo-coasters-grid.qty-3 .coaster-block,
  .engraving-preview-page .demo-coasters-grid.qty-5 .coaster-block {
    display: flex;
  }
}


@media (max-width: 768px) {
  #hero .hero-coaster-bg {
    left: 15%;
  }
}

/* Square natural slate coaster mockup */
.coaster-mockup {
  border-radius: 0 !important;
  clip-path: none !important;
  background: url("hero-slate-family-wood.webp") center / contain no-repeat !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.coaster-mockup::before,
.coaster-mockup::after {
  border-radius: 0 !important;
}
.coaster-mockup::before {
  border-color: transparent !important;
}
.coaster-mockup::after {
  display: none !important;
}
.coaster-engraving {
  border-radius: 0 !important;
}
.coaster-center-dot {
  display: none !important;
}

/* Responsive hamburger navigation */
.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.035);
  color: #fff;
  cursor: pointer;
  padding: 0;
}
.menu-toggle span {
  display: block;
  width: 17px;
  height: 1px;
  background: currentColor;
  transition: transform 0.24s ease, opacity 0.24s ease;
}
header.menu-open .menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
header.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
header.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1024px) {
  .header-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    padding-left: clamp(1.25rem, 4vw, 2rem);
    padding-right: clamp(1.25rem, 4vw, 2rem);
  }
  .logo {
    max-width: min(var(--logo-width, 220px), 62vw);
    font-size: clamp(1rem, 3.1vw, 1.35rem);
    letter-spacing: clamp(0.28em, 1.2vw, 0.5em);
  }
  .logo img { max-width: min(var(--logo-width, 220px), 62vw); }
  .header-right { gap: 0.6rem; }
  .menu-toggle { display: inline-flex; order: -1; }
  .header-search { display: none; }
  .primary-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: grid;
    justify-content: stretch;
    justify-self: stretch;
    gap: 0;
    padding: 0.45rem clamp(1.25rem, 4vw, 2rem) 1rem;
    background: rgba(14,16,18,0.98);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 28px 60px rgba(0,0,0,0.36);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
  }
  header.menu-open .primary-nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
  .primary-nav a {
    display: flex;
    min-height: 46px;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    opacity: 0.86;
  }
}

@media (max-width: 768px) {
  nav.primary-nav { display: grid; }
  .cart-btn { width: 40px; height: 40px; }
}

.engraving-preview-page .add-cart-section--preview-page {
  margin: 1rem 0 0;
  max-width: 540px;
  padding: 1rem 1.1rem;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(255,255,255,0.14);
  justify-content: space-between;
  gap: 1rem;
}
.engraving-preview-page .add-cart-section--preview-page .purchase-summary {
  display: grid;
  gap: 0.18rem;
  color: #000;
  line-height: 1.35;
}
.engraving-preview-page .add-cart-section--preview-page .purchase-summary__label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(14,16,18,0.62);
}
.engraving-preview-page .add-cart-section--preview-page .purchase-summary__detail {
  font-family: Barlow, Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  color: rgba(14,16,18,0.82);
}
.engraving-preview-page .add-cart-section--preview-page .purchase-summary__included {
  font-size: 0.75rem;
  color: #000;
}
.engraving-preview-page .add-cart-section--preview-page .btn-add-cart {
  flex: 1 1 180px;
  justify-content: center;
  padding-inline: 1.4rem;
}
@media (max-width: 620px) {
  .engraving-preview-page .add-cart-section--preview-page {
    align-items: stretch;
  }
}

.btn-add-cart.product-add-button:disabled,
.btn-add-cart.product-add-button.is-disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
}
.btn-add-cart.product-add-button:disabled::before,
.btn-add-cart.product-add-button.is-disabled::before {
  transform: translateX(-100%);
}

.checkout-page {
  min-height: 100vh;
  padding: clamp(7rem, 13vh, 9rem) 5vw 6rem;
  background:
    radial-gradient(circle at 82% 22%, rgba(136,54,31,0.18), transparent 34%),
    radial-gradient(circle at 18% 78%, rgba(92,103,108,0.14), transparent 36%),
    var(--slate);
}
.checkout-shell {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(360px, 1.15fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.checkout-copy {
  position: sticky;
  top: 112px;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: #fff;
  color: #0e1012;
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 24px 70px rgba(0,0,0,0.22);
}
.checkout-copy .collection-back,
.checkout-copy .section-label,
.checkout-copy .section-title {
  color: #0e1012;
}
.checkout-copy p {
  margin: 1.4rem 0 0;
  max-width: 540px;
  color: rgba(0,0,0,0.66);
  line-height: 1.85;
}
.checkout-trust-list {
  display: grid;
  gap: 0.7rem;
  margin-top: 2rem;
  max-width: 420px;
}
.checkout-trust-list div {
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  color: rgba(0,0,0,0.72);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.checkout-panel {
  background: #f7f4ef;
  color: #000;
  padding: clamp(1rem, 2.5vw, 1.7rem);
  box-shadow: 0 28px 90px rgba(0,0,0,0.38);
}
.checkout-panel-header,
.checkout-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.checkout-panel-header {
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.checkout-items {
  display: grid;
  gap: 1rem;
  margin: 1rem 0;
}
.checkout-item {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  padding: 1rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
}
.checkout-item-media {
  width: 82px;
  aspect-ratio: 1 / 1;
  background: #111518;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.5);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  overflow: hidden;
}
.checkout-item-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.checkout-item-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  line-height: 1.1;
}
.checkout-item-meta,
.checkout-properties {
  margin-top: 0.35rem;
  color: rgba(0,0,0,0.58);
  font-size: 0.82rem;
  line-height: 1.5;
}
.checkout-properties div {
  display: grid;
  grid-template-columns: minmax(115px, 0.45fr) minmax(0, 1fr);
  gap: 0.7rem;
  padding-top: 0.35rem;
}
.checkout-properties dt {
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.42);
}
.checkout-properties dd { overflow-wrap: anywhere; }
.checkout-item-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  white-space: nowrap;
}
.checkout-total-row {
  border-top: 1px solid rgba(0,0,0,0.1);
  padding-top: 1rem;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.checkout-total-row strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.9rem;
  letter-spacing: 0;
  text-transform: none;
}
.checkout-note {
  margin: 0.4rem 0 1rem;
  color: rgba(0,0,0,0.58);
  font-size: 0.85rem;
  line-height: 1.6;
}
.checkout-pay-button { width: 100%; justify-content: center; }
.checkout-empty {
  min-height: 360px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 1rem;
  padding: 2rem;
}
.checkout-empty h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 300;
}
.checkout-empty p {
  max-width: 360px;
  color: rgba(0,0,0,0.58);
  line-height: 1.7;
}
@media (max-width: 900px) {
  .checkout-shell { grid-template-columns: 1fr; }
  .checkout-copy { position: static; }
}
@media (max-width: 620px) {
  .checkout-item {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .checkout-item-price {
    grid-column: 2;
  }
  .checkout-properties div {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }
}

.engraving-preview-page .demo-single-block {
  display: block !important;
}
.engraving-preview-page .demo-single-block .preview-area {
  min-height: clamp(260px, 32vw, 420px) !important;
  padding: clamp(1.2rem, 3vw, 2rem) !important;
}
.engraving-preview-page .demo-single-block .coaster-mockup {
  width: min(46vw, 520px) !important;
  height: auto !important;
  aspect-ratio: 1402 / 1122 !important;
}
.engraving-preview-page .demo-single-block .coaster-controls {
  padding: clamp(1rem, 2vw, 1.35rem) !important;
  gap: 1rem !important;
  justify-content: initial !important;
}
.engraving-preview-page .demo-text-fields {
  display: grid;
  gap: 0.65rem;
  max-height: 420px;
  overflow: auto;
  padding-right: 0.15rem;
}
.engraving-preview-page .demo-text-input-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
}
.engraving-preview-page .demo-text-label {
  padding-top: 0.85rem;
  color: rgba(0,0,0,0.58);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.engraving-preview-page .demo-text-input-wrap .text-input {
  min-height: 48px !important;
  resize: vertical;
}
.engraving-preview-page .demo-text-input-wrap .char-counter {
  bottom: 0.7rem;
}
@media (max-width: 620px) {
  .engraving-preview-page .demo-text-input-row {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
  .engraving-preview-page .demo-text-label {
    padding-top: 0;
  }
}

.coaster-engraving .engrave-img-preview,
.product-hero-engraving .engrave-img-preview {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: grayscale(1) brightness(0.62) contrast(2.35) sepia(0.08) saturate(0.15) !important;
  opacity: 0.48 !important;
  mix-blend-mode: screen !important;
}

/* Engraving preview uses the real cleaned slate asset instead of generated CSS stone. */
.engraving-preview-page .coaster-mockup,
.image-editor-modal[style*="--preview-coaster-image"] .image-editor-slate {
  width: min(520px, 100%) !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: var(--preview-coaster-image) center / contain no-repeat !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.engraving-preview-page .coaster-mockup::before,
.engraving-preview-page .coaster-mockup::after,
.engraving-preview-page .coaster-center-dot,
.image-editor-modal[style*="--preview-coaster-image"] .image-editor-slate::before,
.image-editor-modal[style*="--preview-coaster-image"] .image-editor-slate::after,
.image-editor-modal[style*="--preview-coaster-image"] .image-editor-slate .coaster-center-dot {
  display: none !important;
}
.engraving-preview-page .coaster-engraving,
.image-editor-modal[style*="--preview-coaster-image"] .image-editor-slate-engraving {
  inset: 14% 12% 18% 14% !important;
  border-radius: 0 !important;
  clip-path: polygon(10% 2%, 98% 13%, 96% 70%, 82% 96%, 14% 85%, 0 25%) !important;
  background: transparent !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
}
.engraving-preview-page .coaster-engraving .engrave-placeholder {
  background: rgba(15, 20, 22, 0.28);
}
.engraving-preview-page .coaster-engraving .engrave-img-preview,
.image-editor-modal[style*="--preview-coaster-image"] .image-editor-slate-engraving #imageEditorSlateImg {
  filter: grayscale(1) brightness(0.74) contrast(1.85) sepia(0.05) saturate(0.08) !important;
  opacity: 0.58 !important;
  mix-blend-mode: screen !important;
}

.engraving-preview-page .coaster-base-img,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-base-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
}
.engraving-preview-page .coaster-engraving,
.image-editor-modal[style*="--preview-coaster-image"] .image-editor-slate-engraving {
  z-index: 2 !important;
}
.engraving-preview-page .coaster-engraving .engrave-img-preview,
.image-editor-modal[style*="--preview-coaster-image"] .image-editor-slate-engraving #imageEditorSlateImg {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Interactive 3D studio slate viewport for engraving preview mockups. */
.engraving-preview-page .preview-area,
.image-editor-result {
  perspective: 1200px;
  background: transparent !important;
}
.engraving-preview-page .coaster-orbit-3d,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-orbit-3d {
  transform-style: preserve-3d;
  cursor: grab;
  transform:
    rotateX(var(--orbit-x, 8deg))
    rotateY(var(--orbit-y, -18deg))
    rotateZ(var(--orbit-z, -2deg)) !important;
  transition: transform 180ms ease, filter 180ms ease;
  will-change: transform;
  filter: drop-shadow(0 34px 42px rgba(0,0,0,0.34));
}
.engraving-preview-page .coaster-orbit-3d.is-orbiting,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-orbit-3d.is-orbiting {
  cursor: grabbing;
  transition: none;
}
.engraving-preview-page .coaster-orbit-3d::before,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-orbit-3d::before {
  content: '' !important;
  display: block !important;
  position: absolute;
  inset: 8% 8% 14% 9%;
  z-index: 3;
  pointer-events: none;
  border-radius: 2px;
  transform: translateZ(18px);
  background: transparent !important;
  mix-blend-mode: normal;
  opacity: 0;
}
.engraving-preview-page .coaster-orbit-3d .coaster-base-img,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-orbit-3d .coaster-base-img {
  transform: translateZ(0);
  filter: contrast(1.08) brightness(0.94) saturate(0.92);
}
.engraving-preview-page .coaster-orbit-3d .coaster-engraving,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-orbit-3d .coaster-engraving {
  transform: translateZ(22px) !important;
}
.engraving-preview-page .coaster-orbit-3d::after,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-orbit-3d::after {
  content: 'Drag to orbit · double click to reset' !important;
  display: block !important;
  position: absolute;
  left: 50%;
  bottom: -2.1rem;
  z-index: 5;
  transform: translateX(-50%);
  color: rgba(14,16,18,0.5);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 620px) {
  .engraving-preview-page .coaster-orbit-3d::after,
  .image-editor-modal[style*="--preview-coaster-image"] .coaster-orbit-3d::after {
    display: none !important;
  }
}

/* WebGL 3D coaster viewport. */
.engraving-preview-page .coaster-webgl-ready,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-webgl-ready {
  background: transparent !important;
  transform: none !important;
  cursor: default;
  touch-action: none;
}
.engraving-preview-page .coaster-webgl-ready .coaster-base-img,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-webgl-ready .coaster-base-img {
  opacity: 0 !important;
  visibility: hidden !important;
}
.engraving-preview-page .coaster-webgl-canvas,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-webgl-canvas {
  opacity: 0;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
}
.engraving-preview-page .coaster-webgl-canvas.is-ready,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-webgl-canvas.is-ready {
  opacity: 1;
}
.engraving-preview-page .coaster-webgl-ready.is-orbiting .coaster-webgl-canvas,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-webgl-ready.is-orbiting .coaster-webgl-canvas {
  cursor: grabbing;
}
.engraving-preview-page .coaster-webgl-ready .coaster-engraving,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-webgl-ready .coaster-engraving {
  opacity: 0 !important;
  pointer-events: none !important;
}
.engraving-preview-page .coaster-webgl-ready::before,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-webgl-ready::before {
  display: none !important;
}
.engraving-preview-page .coaster-webgl-ready::after,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-webgl-ready::after {
  content: 'Drag to orbit · double click to reset' !important;
  display: block !important;
  position: absolute;
  left: 50%;
  bottom: -2.1rem;
  z-index: 5;
  transform: translateX(-50%) !important;
  color: rgba(14,16,18,0.52);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 620px) {
  .engraving-preview-page .coaster-webgl-ready::after,
  .image-editor-modal[style*="--preview-coaster-image"] .coaster-webgl-ready::after {
    display: none !important;
  }
}

/* Fail-safe: keep the slate asset visible; do not let an empty WebGL canvas create a blank preview. */
.engraving-preview-page .coaster-base-img,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-base-img,
.engraving-preview-page .coaster-webgl-ready .coaster-base-img,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-webgl-ready .coaster-base-img {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}
.engraving-preview-page .coaster-webgl-canvas,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-webgl-canvas {
  display: none !important;
}
.engraving-preview-page .coaster-css-3d-ready,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-css-3d-ready {
  transform-style: preserve-3d;
  cursor: grab;
  transform: rotateX(var(--orbit-x, 8deg)) rotateY(var(--orbit-y, -18deg)) rotateZ(var(--orbit-z, -2deg)) !important;
  transition: transform 180ms ease, filter 180ms ease;
  will-change: transform;
  filter: drop-shadow(0 34px 42px rgba(0,0,0,0.34));
}
.engraving-preview-page .coaster-css-3d-ready.is-orbiting,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-css-3d-ready.is-orbiting {
  cursor: grabbing;
  transition: none;
}



/* Reference-style 3D slate slab: real side body behind the engraved top face. */
.engraving-preview-page .coaster-css-3d-ready,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-css-3d-ready {
  isolation: isolate;
  transform-origin: 50% 54%;
  filter: drop-shadow(0 34px 42px rgba(0,0,0,0.38));
}
.engraving-preview-page .coaster-css-3d-ready::before,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-css-3d-ready::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 7% 7% 13% 8%;
  z-index: 0;
  pointer-events: none;
  border-radius: 2px;
  clip-path: polygon(3% 14%, 16% 5%, 43% 8%, 67% 2%, 96% 13%, 98% 58%, 91% 85%, 64% 94%, 42% 90%, 19% 96%, 4% 84%, 8% 60%, 1% 39%);
  background: var(--preview-coaster-image) center / cover no-repeat;
  background-blend-mode: normal;
  transform: translate3d(0, 24px, -42px) rotateX(-1deg) scale(0.985);
  box-shadow:
    inset 0 18px 18px rgba(255,255,255,0.08),
    inset 0 -38px 42px rgba(0,0,0,0.78),
    0 24px 30px rgba(0,0,0,0.42);
  opacity: 0.96;
}
.engraving-preview-page .coaster-css-3d-ready .coaster-base-img,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-css-3d-ready .coaster-base-img {
  z-index: 2;
  transform: translateZ(32px) !important;
  filter: contrast(1.12) brightness(0.94) saturate(0.88) drop-shadow(0 2px 0 rgba(210,214,211,0.2)) !important;
}
.engraving-preview-page .coaster-css-3d-ready .coaster-engraving,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-css-3d-ready .coaster-engraving {
  z-index: 3 !important;
  transform: translateZ(38px) !important;
}
.engraving-preview-page .coaster-css-3d-ready .coaster-base-img::selection {
  background: transparent;
}

/* GLB slate preview model */
.engraving-preview-page .coaster-mockup--glb {
  width: min(620px, 100%) !important;
  aspect-ratio: 4 / 3 !important;
  background: transparent !important;
  overflow: hidden !important;
  transform: none !important;
  filter: none !important;
  cursor: default !important;
}
.engraving-preview-page .coaster-mockup--glb .slate-model-viewer {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  background: transparent !important;
  --poster-color: transparent;
}
.engraving-preview-page .coaster-mockup--glb .coaster-base-img {
  z-index: 0;
  opacity: 0 !important;
  visibility: hidden !important;
}
.engraving-preview-page .coaster-mockup--glb .coaster-engraving--model-overlay {
  z-index: 2 !important;
  inset: 22% 31% 24% 31% !important;
  opacity: 0.78;
  pointer-events: none;
  transform: none !important;
  mix-blend-mode: multiply !important;
}
.engraving-preview-page .coaster-mockup--glb .coaster-engraving--model-overlay .engrave-placeholder {
  background: rgba(18, 22, 24, 0.08);
  opacity: 0.45;
}
.engraving-preview-page .coaster-mockup--glb .coaster-engraving--model-overlay .engrave-img-preview {
  filter: grayscale(1) brightness(0.78) contrast(1.85) sepia(0.04) saturate(0.1) !important;
  opacity: 0.58 !important;
  mix-blend-mode: multiply !important;
}
.engraving-preview-page .coaster-mockup--glb::before,
.engraving-preview-page .coaster-mockup--glb::after {
  display: none !important;
}
.engraving-preview-page .coaster-mockup--glb .coaster-center-dot {
  display: none !important;
}
.engraving-preview-page .coaster-mockup--glb::selection {
  background: transparent;
}
@media (max-width: 720px) {
  .engraving-preview-page .coaster-mockup--glb {
    width: min(520px, 100%) !important;
  }
  .engraving-preview-page .coaster-mockup--glb .coaster-engraving--model-overlay {
    inset: 24% 29% 25% 29% !important;
  }
}

/* Engraved upload and text treatment on the GLB preview. */
.engraving-preview-page .coaster-mockup--glb .slate-model-viewer {
  cursor: grab;
}
.engraving-preview-page .coaster-mockup--glb .slate-model-viewer:active {
  cursor: grabbing;
}
.engraving-preview-page .coaster-mockup--glb .coaster-engraving--model-overlay {
  display: grid !important;
  place-items: center !important;
  gap: 0.35rem;
  padding: 0.45rem;
  border-radius: 3px !important;
  background: transparent !important;
  filter: contrast(1.08) brightness(0.92);
  pointer-events: none !important;
}
.engraving-preview-page .coaster-mockup--glb .coaster-engraving--model-overlay::after {
  display: none !important;
}
.engraving-preview-page .coaster-mockup--glb .coaster-engraving--model-overlay .engrave-img-preview {
  position: relative !important;
  z-index: 2;
  width: 100% !important;
  height: 72% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: grayscale(1) brightness(0.68) contrast(2.55) sepia(0.08) saturate(0.08) !important;
  opacity: 0.62 !important;
  mix-blend-mode: screen !important;
  box-shadow: inset 0 0 18px rgba(0,0,0,0.38);
}
.engraving-preview-page .coaster-mockup--glb .coaster-engraving--model-overlay .engrave-text-preview {
  position: relative;
  z-index: 3;
  display: none;
  width: 100%;
  max-width: 96%;
  margin: 0 auto;
  padding: 0.05rem 0.25rem;
  color: rgba(216, 214, 204, 0.68) !important;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(0.7rem, 1.55vw, 1rem);
  font-style: italic;
  line-height: 1.05;
  text-align: center;
  letter-spacing: 0.03em;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.72),
    0 -1px 0 rgba(255,255,255,0.09),
    0 0 8px rgba(255,255,255,0.14);
  mix-blend-mode: screen;
  opacity: 0.78;
  word-break: break-word;
}
.engraving-preview-page .coaster-mockup--glb .coaster-engraving--model-overlay .engrave-text-preview.visible {
  display: block;
}
.engraving-preview-page .coaster-mockup--glb .coaster-engraving--model-overlay .engrave-placeholder {
  z-index: 3;
  color: rgba(16, 18, 18, 0.58);
  mix-blend-mode: multiply;
}

/* Product page GLB slate preview uses the same model treatment as engraving preview. */
.product-customizer-page .product-hero-mockup.coaster-mockup--glb {
  width: min(620px, 100%) !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: transparent !important;
  overflow: hidden !important;
  transform: none !important;
  filter: none !important;
  cursor: default !important;
  box-shadow: none !important;
}
.product-customizer-page .product-hero-mockup.coaster-mockup--glb .slate-model-viewer {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  cursor: grab;
  --poster-color: transparent;
}
.product-customizer-page .product-hero-mockup.coaster-mockup--glb .slate-model-viewer:active {
  cursor: grabbing;
}
.product-customizer-page .product-hero-mockup.coaster-mockup--glb .coaster-base-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}
.product-customizer-page .product-hero-mockup.coaster-mockup--glb .coaster-engraving--model-overlay {
  z-index: 2 !important;
  inset: 22% 31% 24% 31% !important;
  display: grid !important;
  place-items: center !important;
  gap: 0.35rem;
  padding: 0.45rem;
  border-radius: 3px !important;
  background: transparent !important;
  opacity: 0.78;
  filter: contrast(1.08) brightness(0.92);
  pointer-events: none !important;
  transform: none !important;
  mix-blend-mode: multiply !important;
}
.product-customizer-page .product-hero-mockup.coaster-mockup--glb .coaster-engraving--model-overlay::after {
  display: none !important;
}
.product-customizer-page .product-hero-mockup.coaster-mockup--glb .engrave-img-preview {
  position: relative !important;
  z-index: 2;
  width: 100% !important;
  height: 72% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: grayscale(1) brightness(0.68) contrast(2.55) sepia(0.08) saturate(0.08) !important;
  opacity: 0.62 !important;
  mix-blend-mode: screen !important;
}
.product-customizer-page .product-hero-mockup.coaster-mockup--glb .engrave-text-preview {
  position: relative;
  z-index: 3;
  color: rgba(216, 214, 204, 0.68) !important;
  font-size: clamp(0.7rem, 1.55vw, 1rem);
  text-shadow: 0 1px 0 rgba(0,0,0,0.72), 0 -1px 0 rgba(255,255,255,0.09), 0 0 8px rgba(255,255,255,0.14);
  mix-blend-mode: screen;
  opacity: 0.78;
}
.product-customizer-page .product-hero-mockup.coaster-mockup--glb::before,
.product-customizer-page .product-hero-mockup.coaster-mockup--glb::after,
.product-customizer-page .product-hero-mockup.coaster-mockup--glb .coaster-center-dot {
  display: none !important;
}
@media (max-width: 768px) {
  .product-customizer-page .product-hero-mockup.coaster-mockup--glb {
    width: min(520px, 100%) !important;
  }
  .product-customizer-page .product-hero-mockup.coaster-mockup--glb .coaster-engraving--model-overlay {
    inset: 24% 29% 25% 29% !important;
  }
}

/* Natural drag orbit behavior for slate GLB viewers. */
.slate-model-viewer {
  width: 100%;
  height: 100%;
  min-height: 360px;
  touch-action: none !important;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab !important;
  outline: none;
}
.slate-model-viewer:active,
.slate-model-viewer.is-dragging-viewer {
  cursor: grabbing !important;
}
body.siloq-admin-app-root .siloq-admin-app__masthead.siloq-header {
  margin-top: 8px;
}
.coaster-mockup--glb {
  touch-action: none !important;
}
.coaster-mockup--glb.is-dragging-viewer,
.coaster-mockup--glb.is-dragging-viewer .slate-model-viewer {
  cursor: grabbing !important;
}
.engraving-preview-page .demo-controls-list {
  display: grid;
  gap: 1rem;
  padding: 1.1rem;
  background: #fff;
}
.engraving-preview-page .demo-controls-list .demo-single-controls {
  margin: 0;
  padding: 1rem 0 0;
  border-top: 1px solid rgba(14,16,18,0.1);
}
.engraving-preview-page .demo-controls-list .demo-single-controls:first-child {
  padding-top: 0;
  border-top: 0;
}
.engraving-preview-page .demo-control-heading {
  grid-column: 1 / -1;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(14,16,18,0.62);
}
.coasters-grid:not(.demo-coasters-grid) > .coaster-block:first-child {
  grid-column: 1 / -1;
}
.coasters-grid:not(.demo-coasters-grid) > .coaster-carousel {
  grid-column: 1 / -1;
}
.coaster-carousel {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid rgba(14,16,18,0.1);
  border-radius: 6px;
}
.coaster-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.coaster-carousel__status {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(14,16,18,0.68);
}
.coaster-carousel__button {
  width: 2.35rem;
  height: 2.35rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(14,16,18,0.16);
  border-radius: 999px;
  background: #fff;
  color: #0e1012;
  cursor: pointer;
}
.coaster-carousel__button span {
  display: block;
  transform: translateY(-0.04em);
  font-size: 1.45rem;
  line-height: 1;
}
.coaster-carousel__button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.coaster-carousel__track {
  min-width: 0;
}
.coaster-carousel-slide {
  display: none !important;
}
.coaster-carousel-slide.is-active-preview {
  display: flex !important;
}
.coaster-carousel .demo-single-controls {
  margin: 0 !important;
  padding: 1rem !important;
  background: #0e101206 !important;
  border: 1px solid #fef8e6 !important;
  border-radius: 0 !important;
}
.coaster-carousel .is-active-preview {
  border-color: transparent !important;
  box-shadow: 0 0 0 2px #0e101214 !important;
}
@media (max-width: 720px) {
  .engraving-preview-page .demo-controls-list .demo-single-controls {
    grid-template-columns: 1fr;
  }
  .coaster-carousel .demo-single-controls {
    grid-template-columns: 1fr;
  }
}
.slate-model-viewer::part(default-progress-bar),
.slate-model-viewer::part(default-ar-button) {
  display: none !important;
}

@media (max-width: 640px) {
  .engraving-preview-page .demo-qty-selector {
    grid-template-columns: 1fr;
  }
  .engraving-preview-page .demo-price-range {
    justify-self: start;
    text-align: left;
  }
}

/* Dual Personal / Corporate engraving preview layout */
.engraving-preview-page .demo-preview-intro {
  max-width: 760px;
  margin: 0 auto clamp(2rem, 4vw, 3.5rem);
  text-align: center;
}
.engraving-preview-page .demo-preview-intro .section-title {
  color: #fff;
}
.engraving-preview-page .demo-preview-intro p {
  max-width: 680px;
  margin: 1rem auto 0;
  color: rgba(255,255,255,0.72);
  font-family: Barlow, Arial, Helvetica, sans-serif;
  line-height: 1.75;
}
.engraving-preview-page .dual-preview-grid {
  width: min(1480px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.4vw, 2rem);
  align-items: start;
}
.engraving-preview-page .preview-product-card {
  display: grid;
  gap: 1rem;
  min-width: 0;
}
.engraving-preview-page .preview-product-copy {
  min-height: 118px;
}
.engraving-preview-page .preview-product-copy h2 {
  margin: 0.35rem 0 0;
  color: #fff;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  font-weight: 300;
  line-height: 0.95;
}
.engraving-preview-page .preview-product-copy p {
  margin: 0.85rem 0 0;
  color: rgba(255,255,255,0.68);
  font-family: Barlow, Arial, Helvetica, sans-serif;
  line-height: 1.6;
}
.engraving-preview-page .preview-product-card .demo-qty-selector,
.engraving-preview-page .preview-product-card .add-cart-section--preview-page {
  max-width: none;
  width: 100%;
}
.engraving-preview-page .preview-product-card .coasters-grid {
  max-width: none;
  margin: 0;
}
.engraving-preview-page .preview-product-card .coaster-mockup--glb {
  width: min(100%, 620px) !important;
}
@media (max-width: 1180px) {
  .engraving-preview-page .dual-preview-grid {
    grid-template-columns: 1fr;
    max-width: 760px;
  }
  .engraving-preview-page .preview-product-copy {
    min-height: auto;
  }
}

.engraving-preview-page [data-preview-type][hidden] {
  display: none !important;
}
.engraving-preview-page .demo-preview-section[data-active-preview-type="photo"] .dual-preview-grid,
.engraving-preview-page .demo-preview-section[data-active-preview-type="corporate"] .dual-preview-grid {
  max-width: 760px;
  grid-template-columns: 1fr;
}


/* Generated engraving plate composited from uploaded image + entered text. */
.engraving-preview-page .coaster-mockup--glb .coaster-engraving--model-overlay .engrave-img-preview.is-generated-engraving {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: grayscale(1) brightness(0.86) contrast(1.45) sepia(0.04) saturate(0.08) !important;
  opacity: 0.9 !important;
  mix-blend-mode: screen !important;
  transform: translateZ(1px);
}
.engraving-preview-page .coaster-mockup--glb .coaster-engraving--model-overlay:has(.engrave-img-preview.is-generated-engraving[style*="block"]) {
  opacity: 0.84;
}


/* Static slate image in the crop modal preview. */
.image-editor-result .image-editor-slate.image-editor-slate--static {
  width: min(42vw, 430px) !important;
  aspect-ratio: 1372 / 1160 !important;
  height: auto !important;
  background: transparent !important;
  transform: none !important;
  filter: drop-shadow(0 24px 32px rgba(0,0,0,0.22)) !important;
  cursor: default !important;
  overflow: visible !important;
}
.image-editor-result .image-editor-slate.image-editor-slate--static::before,
.image-editor-result .image-editor-slate.image-editor-slate--static::after,
.image-editor-result .image-editor-slate.image-editor-slate--static .coaster-center-dot {
  display: none !important;
}
.image-editor-result .image-editor-slate.image-editor-slate--static .image-editor-static-slate-img {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  pointer-events: none !important;
  user-select: none !important;
}
.image-editor-result .image-editor-slate.image-editor-slate--static .image-editor-slate-engraving {
  z-index: 2 !important;
  inset: 17% 14% 22% 12% !important;
  clip-path: polygon(6% 4%, 92% 3%, 99% 18%, 95% 80%, 82% 96%, 9% 83%, 0 21%) !important;
  transform: none !important;
}
.image-editor-result .image-editor-slate.image-editor-slate--static.coaster-orbit-3d,
.image-editor-result .image-editor-slate.image-editor-slate--static.coaster-css-3d-ready {
  transform: none !important;
}
@media (max-width: 860px) {
  .image-editor-result .image-editor-slate.image-editor-slate--static {
    width: min(74vw, 360px) !important;
  }
}


/* Transparent slate editor preview with softer, laser-etched artwork. */
.image-editor-result .image-editor-slate.image-editor-slate--static {
  aspect-ratio: 1372 / 1146 !important;
}
.image-editor-result .image-editor-slate.image-editor-slate--static .image-editor-slate-engraving {
  inset: 12% 4% 23% 8% !important;
  clip-path: polygon(21% 0, 98% 12%, 88% 97%, 3% 72%) !important;
  overflow: hidden !important;
  mix-blend-mode: screen !important;
  opacity: 0.86 !important;
}
.image-editor-result .image-editor-slate.image-editor-slate--static .image-editor-slate-engraving::before {
  content: '' !important;
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    repeating-linear-gradient(105deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 34% 30%, rgba(255,255,255,0.08), transparent 34%),
    linear-gradient(130deg, rgba(0,0,0,0.18), transparent 42%, rgba(255,255,255,0.06));
  mix-blend-mode: overlay;
  opacity: 0.52;
}
.image-editor-result .image-editor-slate.image-editor-slate--static .image-editor-slate-engraving #imageEditorSlateImg {
  filter: grayscale(1) brightness(1.18) contrast(1.78) sepia(0.04) saturate(0.08) !important;
  opacity: 0.42 !important;
  mix-blend-mode: screen !important;
  box-shadow: none !important;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 54%, rgba(0,0,0,0.82) 74%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, #000 0 54%, rgba(0,0,0,0.82) 74%, transparent 100%);
}


/* Compact editor slate preview and keep engraving naturally inside the top face. */
.image-editor-result {
  padding: clamp(1rem, 2.2vw, 1.8rem) !important;
  gap: 0.7rem !important;
  background: #f7f5f0 !important;
}
.image-editor-layout {
  min-height: min(640px, 82vh) !important;
}
.image-editor-dialog {
  width: min(1040px, 96vw) !important;
  background: #f7f5f0 !important;
}
.image-editor-result .image-editor-slate.image-editor-slate--static {
  width: min(38vw, 390px) !important;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,0.18)) !important;
}
.image-editor-result .image-editor-slate.image-editor-slate--static .image-editor-slate-engraving {
  left: 18% !important;
  top: 21% !important;
  width: 61% !important;
  height: 43% !important;
  inset: auto !important;
  clip-path: polygon(10% 5%, 96% 0%, 90% 82%, 0% 100%) !important;
  opacity: 0.66 !important;
  mix-blend-mode: screen !important;
  transform: perspective(900px) rotateX(0deg) rotateZ(-0.5deg) !important;
  transform-origin: center !important;
}
.image-editor-result .image-editor-slate.image-editor-slate--static .image-editor-slate-engraving::before {
  background:
    repeating-linear-gradient(102deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 9px),
    radial-gradient(circle at 36% 30%, rgba(255,255,255,0.08), transparent 28%),
    linear-gradient(128deg, rgba(0,0,0,0.26), transparent 44%, rgba(255,255,255,0.05)) !important;
  opacity: 0.64 !important;
}
.image-editor-result .image-editor-slate.image-editor-slate--static .image-editor-slate-engraving #imageEditorSlateImg {
  filter: grayscale(1) brightness(1.34) contrast(1.45) sepia(0.02) saturate(0.04) !important;
  opacity: 0.34 !important;
  mix-blend-mode: screen !important;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 46%, rgba(0,0,0,0.68) 70%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse at center, #000 0 46%, rgba(0,0,0,0.68) 70%, transparent 100%) !important;
}
@media (max-width: 860px) {
  .image-editor-result .image-editor-slate.image-editor-slate--static {
    width: min(72vw, 340px) !important;
  }
}


/* Replacement wide slate preview image. */
.image-editor-result .image-editor-slate.image-editor-slate--static {
  aspect-ratio: 1664 / 928 !important;
  width: min(44vw, 500px) !important;
}
.image-editor-result .image-editor-slate.image-editor-slate--static .image-editor-slate-engraving {
  left: 32% !important;
  top: 23% !important;
  width: 38% !important;
  height: 43% !important;
  clip-path: polygon(9% 7%, 94% 0%, 100% 79%, 10% 100%, 0 25%) !important;
  opacity: 0.58 !important;
}
.image-editor-result .image-editor-slate.image-editor-slate--static .image-editor-slate-engraving #imageEditorSlateImg {
  opacity: 0.3 !important;
  filter: grayscale(1) brightness(1.4) contrast(1.38) sepia(0.02) saturate(0.04) !important;
}
@media (max-width: 860px) {
  .image-editor-result .image-editor-slate.image-editor-slate--static {
    width: min(78vw, 430px) !important;
  }
}


/* img-coaster.png slate preview replacement. */
.image-editor-result .image-editor-slate.image-editor-slate--static {
  aspect-ratio: 1036 / 772 !important;
  width: min(42vw, 455px) !important;
}
.image-editor-result .image-editor-slate.image-editor-slate--static .image-editor-slate-engraving {
  left: 12% !important;
  top: 14% !important;
  width: 73% !important;
  height: 56% !important;
  clip-path: polygon(14% 4%, 96% 15%, 93% 83%, 2% 91%, 0 33%) !important;
  opacity: 0.58 !important;
}
.image-editor-result .image-editor-slate.image-editor-slate--static .image-editor-slate-engraving #imageEditorSlateImg {
  opacity: 0.31 !important;
  filter: grayscale(1) brightness(1.38) contrast(1.42) sepia(0.02) saturate(0.04) !important;
}
@media (max-width: 860px) {
  .image-editor-result .image-editor-slate.image-editor-slate--static {
    width: min(78vw, 390px) !important;
  }
}

/* Text inputs: white field with black border. */
.text-input,
.demo-preview-controls .text-input,
.engraving-preview-page .demo-text-input-wrap .text-input {
  background: #fff !important;
  border: 1px solid #000 !important;
  color: #000 !important;
}
.text-input:focus {
  background: #fff !important;
  border-color: #000 !important;
  color: #000 !important;
}
.text-input::placeholder {
  color: #000 !important;
  opacity: 0.62 !important;
}
.text-input-wrap .char-counter {
  color: #000 !important;
}
.engraving-preview-page .demo-qty-selector .qty-label, .engraving-preview-page .demo-qty-selector .qty-note { color: #000 !important; }
.engraving-preview-page .demo-price-range__price, .engraving-preview-page .demo-price-range__qty { color: #000 !important; }

.engraving-preview-page .qty-selector-wrap.demo-qty-selector {
  border: 1px solid #000 !important;
  background: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04), 0 10px 24px rgba(0,0,0,0.08) !important;
  border-radius: 0 !important;
}
.coaster-carousel { border-radius: 0 !important; margin: 0 !important; }

/* Preview zoom controls */
.engraving-preview-page .preview-area {
  position: relative;
}
.engraving-preview-page .preview-zoom-controls {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.22);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}
.engraving-preview-page .preview-zoom-button {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #000;
  background: #fff;
  color: #000;
  font: 600 1rem/1 Barlow, Arial, sans-serif;
  cursor: pointer;
  border-radius: 0;
}
.engraving-preview-page .preview-zoom-button:hover {
  background: #0e1012;
  color: #fff;
}
.cart-item-text { color: #000 !important; }

.cart-production-note {
  background: #fff !important;
  border: 1px solid #000 !important;
  color: #000 !important;
}
.cart-production-note * {
  color: #000 !important;
}
.cart-close { color: white !important; }

/* Restored homepage info sections: How To's, FAQ, Contact, and dark collection headings. */
.info-section {
  background: var(--slate) !important;
  padding: clamp(5rem, 8vw, 7rem) 5vw !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  position: relative;
  overflow: hidden;
}
.info-section.alt {
  background: var(--bg-2) !important;
}
.info-header,
.categories-header {
  max-width: 860px;
  margin: 0 auto clamp(2.8rem, 5vw, 4rem) !important;
  text-align: center !important;
}
.info-header .section-label,
.categories-header .section-label {
  color: var(--accent) !important;
}
.info-header .section-title,
.categories-header .section-title {
  color: var(--white) !important;
}
.info-header .section-title em,
.categories-header .section-title em {
  color: var(--accent) !important;
}
.how-grid,
.faq-grid,
.contact-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid !important;
  gap: 1.5rem;
}
.how-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.faq-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.contact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.info-card,
.contact-panel {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0;
  padding: clamp(1.35rem, 2.5vw, 2rem);
}
.info-card {
  min-height: 100%;
}
.info-card-num,
.info-card-kicker {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent) !important;
  display: block;
  margin-bottom: 0.8rem;
}
.info-card-title,
.faq-item h3 {
  font-family: 'Cormorant Garamond', serif;
  color: var(--white) !important;
  font-weight: 400;
  line-height: 1.2;
}
.info-card-title {
  font-size: 1.35rem;
  margin-bottom: 0.55rem;
}
.info-card p,
.faq-item p,
.contact-copy {
  color: rgba(255,255,255,0.58) !important;
  font-size: 0.84rem;
  line-height: 1.7;
  font-weight: 300;
}
.faq-item {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 1.25rem 0 0;
}
.faq-item h3 {
  font-size: 1.25rem;
  margin-bottom: 0.45rem;
}
.contact-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.contact-links {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.5rem;
}
.contact-links a {
  color: var(--white) !important;
  text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.76rem;
}
.contact-links a:hover {
  color: var(--accent) !important;
}
#categories {
  background: var(--off-white) !important;
}
@media (max-width: 980px) {
  .how-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .how-grid,
  .faq-grid,
  .contact-grid {
    grid-template-columns: 1fr !important;
  }
}


/* Hero cutout image repair: keep the uploaded coaster asset contained and behind copy. */
#hero {
  isolation: isolate;
}
#hero .hero-content {
  position: relative !important;
  z-index: 3 !important;
}
#hero .hero-coaster-bg {
  position: absolute !important;
  left: 52% !important;
  right: auto !important;
  top: 53% !important;
  width: min(36vw, 520px) !important;
  height: auto !important;
  aspect-ratio: 1000 / 960 !important;
  z-index: 1 !important;
  transform: translateY(-50%) scaleX(-1) !important;
  transform-origin: 50% 50% !important;
  animation: heroCutoutCoasterFloat 13s ease-in-out infinite !important;
  overflow: visible !important;
  clip-path: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0.82 !important;
  pointer-events: none !important;
}
#hero .hero-coaster-bg::before,
#hero .hero-coaster-bg::after,
#hero .hero-coaster-bg .stone-surface,
#hero .hero-coaster-bg .stone-chip,
#hero .hero-coaster-bg .stone-crack,
#hero .hero-coaster-bg .stone-engraving::before,
#hero .hero-coaster-bg .stone-engraving::after {
  display: none !important;
}
#hero .hero-coaster-bg .stone-engraving {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}
#hero .hero-coaster-bg .stone-engraving img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  filter: drop-shadow(28px 38px 70px rgba(0,0,0,.58)) contrast(1.04) brightness(.98) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}
@keyframes heroCutoutCoasterFloat {
  0%, 100% { transform: translateY(-50%) scaleX(-1) translate3d(0, 0, 0) rotate(-0.6deg); }
  50% { transform: translateY(-56%) scaleX(-1) translate3d(0, -12px, 0) rotate(0.6deg); }
}
@media (max-width: 980px) {
  #hero .hero-coaster-bg {
    right: clamp(-12rem, -20vw, -4rem) !important;
    width: min(74vw, 620px) !important;
    opacity: 0.46 !important;
  }
}
@media (max-width: 768px) {
  #hero .hero-coaster-bg {
    left: 15% !important;
    right: auto !important;
    top: 50% !important;
    width: min(118vw, 560px) !important;
    opacity: 0.28 !important;
  }
}

/* Homepage recovery: restore missing feature strip, footer, modal shell, nav color, and hero readability. */
header .primary-nav a,
header nav a {
  color: rgba(255,255,255,0.82) !important;
}
header .primary-nav a:hover,
header nav a:hover {
  color: #fff !important;
  opacity: 1 !important;
}
@media (min-width: 1025px) {
  header .primary-nav {
    display: flex !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    justify-content: center !important;
    justify-self: center !important;
    gap: clamp(1.5rem, 2.2vw, 2.5rem) !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .menu-toggle { display: none !important; }
}

#hero .hero-content {
  z-index: 5 !important;
  transform: translateX(-10vw) !important;
}
#hero .hero-coaster-bg {
  right: auto !important;
  top: 52% !important;
  width: min(36vw, 520px) !important;
  opacity: 0.56 !important;
  z-index: 1 !important;
}
#hero .hero-coaster-bg .stone-engraving img {
  filter: drop-shadow(28px 38px 70px rgba(0,0,0,.58)) contrast(1.02) brightness(.84) !important;
}
@media (max-width: 1180px) {
  #hero .hero-content { transform: translateX(-6vw) !important; }
  #hero .hero-coaster-bg {
    right: clamp(-11rem, -14vw, -5rem) !important;
    width: min(58vw, 620px) !important;
    opacity: 0.38 !important;
  }
}
@media (max-width: 768px) {
  #hero .hero-content { transform: none !important; }
  #hero .hero-coaster-bg {
    left: 10% !important;
    right: auto !important;
    width: min(120vw, 560px) !important;
    opacity: 0.2 !important;
  }
}

#features {
  position: relative !important;
  background:
    radial-gradient(ellipse 55% 55% at 82% 12%, rgba(136,54,31,0.34) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 70% 8%, rgba(94,38,24,0.28) 0%, transparent 60%),
    #0e1012 !important;
  padding: 5rem 5vw 5.5rem !important;
  overflow: hidden !important;
}
#features::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
#features::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.68) 100%);
  pointer-events: none;
  z-index: 0;
}
#features .features-grid {
  position: relative;
  z-index: 1;
}
.features-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}
.feature-item { text-align: left; }
.feature-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(200,191,180,0.7) !important;
  margin-bottom: 0.65rem;
}
.feature-desc {
  font-size: 0.78rem;
  font-weight: 300;
  color: rgba(255,255,255,0.55) !important;
  line-height: 1.75;
}
@media (max-width: 860px) {
  .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1.4rem; }
}
@media (max-width: 560px) {
  .features-grid { grid-template-columns: 1fr !important; }
}

footer {
  background: var(--slate) !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  padding: 3rem 5vw 2rem !important;
  text-align: center !important;
}
.footer-logo {
  font-family: 'Barlow Condensed', 'Bebas Neue', sans-serif;
  font-size: 1.55rem;
  color: var(--white) !important;
  font-weight: 300;
  letter-spacing: 0.5em;
  margin-bottom: 1rem;
}
.footer-text {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.34) !important;
  line-height: 1.8;
}
.footer-text a { color: rgba(255,255,255,0.45) !important; }
.footer-text a:hover { color: var(--white) !important; }

.image-editor-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2400 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(0.75rem, 2.5vw, 2rem) !important;
  background: rgba(0,0,0,0.72) !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.image-editor-modal[aria-hidden="true"]:not(.open) {
  display: none !important;
}
.image-editor-modal.open,
.image-editor-modal[aria-hidden="false"] {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.image-editor-dialog {
  position: relative !important;
  width: min(1120px, 96vw) !important;
  max-height: min(880px, 94vh) !important;
  overflow: auto !important;
  background: #f7f5f0 !important;
  color: #0e1012 !important;
  box-shadow: 0 30px 90px rgba(0,0,0,0.44) !important;
}
.image-editor-toolbar {
  position: absolute !important;
  top: 0.7rem !important;
  right: 0.7rem !important;
  z-index: 3 !important;
  display: flex !important;
  gap: 0.3rem !important;
}
.image-editor-tool {
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(14,16,18,0.24) !important;
  background: #fff !important;
  color: #0e1012 !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
.image-editor-tool--done {
  background: #0e1012 !important;
  color: #fff !important;
}
.image-editor-layout {
  display: grid !important;
  grid-template-columns: minmax(300px, 0.9fr) minmax(320px, 1fr) !important;
  gap: 0 !important;
}
.image-editor-result,
.image-editor-workspace {
  min-width: 0;
}
.image-editor-workspace {
  padding: clamp(1.4rem, 3vw, 2.4rem) !important;
  display: grid !important;
  align-content: center !important;
  gap: 1.4rem !important;
  color: #0e1012 !important;
}
.image-editor-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.55fr) !important;
  gap: 1.5rem !important;
  align-items: end !important;
}
.image-editor-head h2 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(2.2rem, 5vw, 4.2rem) !important;
  font-weight: 300 !important;
  line-height: 0.98 !important;
  color: #0e1012 !important;
}
.image-editor-head p {
  color: rgba(14,16,18,0.56) !important;
  line-height: 1.65 !important;
}
.image-editor-crop {
  position: relative !important;
  min-height: min(56vh, 500px) !important;
  overflow: hidden !important;
  background:
    linear-gradient(45deg, #d7d7d7 25%, transparent 25%),
    linear-gradient(-45deg, #d7d7d7 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #d7d7d7 75%),
    linear-gradient(-45deg, transparent 75%, #d7d7d7 75%),
    #ececec !important;
  background-size: 24px 24px !important;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0 !important;
  border: 2px solid #1677ff !important;
  touch-action: none !important;
}
.image-editor-crop img {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  max-width: none !important;
  transform-origin: center !important;
  user-select: none !important;
  pointer-events: none !important;
}
.image-editor-grid {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(to right, rgba(255,255,255,0.42) 1px, transparent 1px) 33.333% 0 / 33.333% 100%,
    linear-gradient(to bottom, rgba(255,255,255,0.42) 1px, transparent 1px) 0 33.333% / 100% 33.333% !important;
}
@media (max-width: 860px) {
  .image-editor-layout { grid-template-columns: 1fr !important; }
  .image-editor-head { grid-template-columns: 1fr !important; }
}

/* Engraving preview page recovery: restore photo/corporate preview layout and controls. */
.engraving-preview-page {
  min-height: 100vh !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(94,38,24,0.26), transparent 34%),
    linear-gradient(120deg, rgba(255,255,255,0.025), transparent 42%),
    var(--slate) !important;
  color: #fff !important;
  overflow: hidden;
}
.engraving-preview-back {
  position: relative !important;
  z-index: 3 !important;
  padding: clamp(6.25rem, 11vh, 8rem) 5vw 0 !important;
  background: transparent !important;
}
.collection-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  color: rgba(255,255,255,0.52) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}
.collection-back:hover { color: #fff !important; }
.engraving-preview-page .demo-preview-section {
  width: 100% !important;
  padding: clamp(2rem, 4vw, 3.5rem) 5vw clamp(5rem, 8vw, 7rem) !important;
  min-height: auto !important;
  background: transparent !important;
}
.engraving-preview-page .demo-preview-intro {
  max-width: 760px !important;
  margin: 0 auto clamp(2rem, 4vw, 3.5rem) !important;
  text-align: center !important;
}
.engraving-preview-page .demo-preview-intro .section-label {
  color: var(--accent) !important;
}
.engraving-preview-page .demo-preview-intro .section-title {
  color: #fff !important;
  font-size: clamp(2.7rem, 6vw, 5rem) !important;
  line-height: 0.98 !important;
}
.engraving-preview-page .demo-preview-intro p {
  max-width: 680px !important;
  margin: 1.15rem auto 0 !important;
  color: rgba(255,255,255,0.68) !important;
  font: 300 0.96rem/1.75 Barlow, Arial, Helvetica, sans-serif !important;
}
.engraving-preview-page .dual-preview-grid {
  width: min(1480px, 100%) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(1.25rem, 2.5vw, 2rem) !important;
  align-items: start !important;
}
.engraving-preview-page .demo-preview-section[data-active-preview-type="photo"] .dual-preview-grid,
.engraving-preview-page .demo-preview-section[data-active-preview-type="corporate"] .dual-preview-grid {
  width: min(860px, 100%) !important;
  grid-template-columns: 1fr !important;
}
.engraving-preview-page [data-preview-type][hidden],
.engraving-preview-page .is-filtered-out {
  display: none !important;
}
.engraving-preview-page .preview-product-card {
  min-width: 0 !important;
  display: grid !important;
  gap: 1rem !important;
  padding: clamp(1rem, 2vw, 1.35rem) !important;
  background: rgba(255,255,255,0.035) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,0.26) !important;
}
.engraving-preview-page .preview-product-copy {
  min-height: auto !important;
  padding: 0.25rem 0 0.3rem !important;
}
.engraving-preview-page .preview-product-copy .section-label {
  color: var(--accent) !important;
}
.engraving-preview-page .preview-product-copy h2 {
  margin: 0.35rem 0 0 !important;
  color: #fff !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(2.1rem, 4vw, 3.35rem) !important;
  font-weight: 300 !important;
  line-height: 0.98 !important;
}
.engraving-preview-page .preview-product-copy p {
  max-width: 560px !important;
  margin: 0.85rem 0 0 !important;
  color: rgba(255,255,255,0.66) !important;
  font: 300 0.9rem/1.65 Barlow, Arial, Helvetica, sans-serif !important;
}
.engraving-preview-page .demo-qty-selector {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 1rem 1.15rem !important;
  display: grid !important;
  grid-template-columns: auto minmax(150px, max-content) minmax(120px, 1fr) !important;
  align-items: center !important;
  gap: 0.7rem 1rem !important;
  background: #fff !important;
  border: 1px solid #000 !important;
  border-radius: 0 !important;
  color: #0e1012 !important;
  box-shadow: none !important;
}
.engraving-preview-page .demo-qty-selector .qty-label,
.engraving-preview-page .demo-qty-selector .qty-note {
  color: #000 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}
.engraving-preview-page .demo-qty-selector .qty-label {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
}
.engraving-preview-page .demo-qty-selector .qty-note {
  grid-column: 1 / -1 !important;
  margin-top: 0.2rem !important;
  font-family: Barlow, Arial, Helvetica, sans-serif !important;
  font-size: 0.78rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(0,0,0,0.58) !important;
}
.engraving-preview-page .qty-select {
  min-height: 44px !important;
  padding: 0 2.2rem 0 0.95rem !important;
  border: 1px solid #0e1012 !important;
  border-radius: 0 !important;
  background-color: #0e1012 !important;
  color: #fff !important;
  font: 600 0.9rem/1 Barlow, Arial, Helvetica, sans-serif !important;
}
.engraving-preview-page .demo-price-range {
  justify-self: end !important;
  display: grid !important;
  gap: 0.16rem !important;
  text-align: right !important;
  line-height: 1.05 !important;
}
.engraving-preview-page .demo-price-range__price {
  color: #000 !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.55rem !important;
  font-weight: 400 !important;
}
.engraving-preview-page .demo-price-range__qty {
  color: #000 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}
.engraving-preview-page .coasters-grid,
.engraving-preview-page .demo-coasters-grid {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1rem !important;
}
.engraving-preview-page .coaster-block,
.engraving-preview-page .demo-single-block {
  width: 100% !important;
  display: block !important;
  overflow: hidden !important;
  background: #f7f5f0 !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 18px 54px rgba(0,0,0,0.2) !important;
  color: #0e1012 !important;
}
.engraving-preview-page .coaster-block-header {
  min-height: 48px !important;
  padding: 0 1.35rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  background: #0e1012 !important;
  color: #fff !important;
}
.engraving-preview-page .coaster-block-title,
.engraving-preview-page .coaster-block-num {
  color: rgba(255,255,255,0.84) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}
.engraving-preview-page .preview-area {
  position: relative !important;
  min-height: clamp(330px, 44vw, 560px) !important;
  padding: clamp(1rem, 2.2vw, 1.6rem) !important;
  display: grid !important;
  place-items: center !important;
  background: #f7f5f0 !important;
  overflow: hidden !important;
}
.engraving-preview-page .coaster-mockup,
.engraving-preview-page .coaster-mockup--glb {
  position: relative !important;
  width: min(92%, 620px) !important;
  height: auto !important;
  min-height: 260px !important;
  aspect-ratio: 1402 / 1122 !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  cursor: grab !important;
  touch-action: pan-y !important;
}
.engraving-preview-page .coaster-mockup--glb:active { cursor: grabbing !important; }
.engraving-preview-page .slate-model-viewer {
  width: 100% !important;
  height: 100% !important;
  min-height: 320px !important;
  display: block !important;
  background: transparent !important;
  --poster-color: transparent;
}
.engraving-preview-page .coaster-base-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  pointer-events: none !important;
}
.engraving-preview-page .coaster-mockup--glb .coaster-base-img {
  display: none !important;
}
.engraving-preview-page .coaster-engraving,
.engraving-preview-page .coaster-engraving--model-overlay {
  position: absolute !important;
  left: 22% !important;
  top: 22% !important;
  width: 56% !important;
  height: 44% !important;
  display: grid !important;
  place-items: center !important;
  opacity: 0.86 !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  overflow: hidden !important;
}
.engraving-preview-page .coaster-engraving .engrave-placeholder {
  display: grid !important;
  place-items: center !important;
  gap: 0.35rem !important;
  color: rgba(255,255,255,0.48) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}
.engraving-preview-page .engrave-img-preview {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: grayscale(1) brightness(0.9) contrast(1.35) !important;
  opacity: 0.9 !important;
  mix-blend-mode: screen !important;
}
.engraving-preview-page .engrave-text-preview {
  color: rgba(255,255,255,0.72) !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(1rem, 2vw, 1.45rem) !important;
  line-height: 1.15 !important;
  text-align: center !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.45) !important;
}
.engraving-preview-page .coaster-carousel {
  width: 100% !important;
  margin: 0 !important;
  padding: 1rem !important;
  display: grid !important;
  gap: 0.85rem !important;
  background: #fff !important;
  border: 1px solid rgba(14,16,18,0.16) !important;
  border-radius: 0 !important;
  color: #0e1012 !important;
}
.engraving-preview-page .coaster-carousel__nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
}
.engraving-preview-page .coaster-carousel__status {
  color: rgba(14,16,18,0.68) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}
.engraving-preview-page .coaster-carousel__button {
  width: 2.35rem !important;
  height: 2.35rem !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid rgba(14,16,18,0.16) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #0e1012 !important;
  cursor: pointer !important;
}
.engraving-preview-page .coaster-carousel__button:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}
.engraving-preview-page .coaster-carousel-slide {
  display: none !important;
}
.engraving-preview-page .coaster-carousel-slide.is-active-preview {
  display: grid !important;
}
.engraving-preview-page .demo-single-controls {
  margin: 0 !important;
  padding: 1rem !important;
  background: #fff !important;
  border: 1px solid rgba(14,16,18,0.12) !important;
  border-radius: 0 !important;
  color: #0e1012 !important;
  gap: 1rem !important;
}
.engraving-preview-page .demo-control-heading {
  color: rgba(14,16,18,0.68) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}
.engraving-preview-page .control-label {
  display: flex !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  margin-bottom: 0.5rem !important;
  color: #000 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}
.engraving-preview-page .upload-area {
  position: relative !important;
  min-height: 64px !important;
  padding: 0.85rem 1rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.9rem !important;
  background: #fff !important;
  border: 1px dashed rgba(14,16,18,0.22) !important;
  color: #000 !important;
  cursor: pointer !important;
  overflow: hidden !important;
}
.engraving-preview-page .upload-area input[type=file] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
}
.engraving-preview-page .upload-icon {
  width: 34px !important;
  height: 34px !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  border-radius: 999px !important;
  background: #0e1012 !important;
}
.engraving-preview-page .upload-info {
  min-width: 0 !important;
  display: grid !important;
  gap: 0.18rem !important;
}
.engraving-preview-page .upload-info-title {
  color: #000 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
.engraving-preview-page .upload-info-sub,
.engraving-preview-page .control-help {
  color: rgba(0,0,0,0.58) !important;
  font: 300 0.76rem/1.5 Barlow, Arial, Helvetica, sans-serif !important;
}
.engraving-preview-page .upload-thumb {
  margin-left: 52% !important;
  width: 48px !important;
  height: 48px !important;
  display: none !important;
  object-fit: cover !important;
  border: 1px solid rgba(0,0,0,0.16) !important;
}
.engraving-preview-page .upload-thumb.visible { display: block !important; }
.engraving-preview-page .text-input-wrap {
  position: relative !important;
}
.engraving-preview-page .text-input {
  width: 100% !important;
  min-height: 52px !important;
  padding: 0.9rem 3.4rem 0.9rem 1rem !important;
  background: #fff !important;
  border: 1px solid #000 !important;
  border-radius: 0 !important;
  color: #000 !important;
  font: 400 0.92rem/1.4 Barlow, Arial, Helvetica, sans-serif !important;
  outline: none !important;
}
.engraving-preview-page .text-input::placeholder { color: rgba(0,0,0,0.52) !important; }
.engraving-preview-page .char-counter {
  position: absolute !important;
  right: 0.85rem !important;
  bottom: 0.7rem !important;
  color: rgba(0,0,0,0.62) !important;
  font: 600 0.66rem/1 Barlow, Arial, Helvetica, sans-serif !important;
}
.engraving-preview-page .add-cart-section--preview-page {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 1rem 1.15rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  background: #fff !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: #000 !important;
}
.engraving-preview-page .purchase-summary {
  display: grid !important;
  gap: 0.16rem !important;
  color: #000 !important;
}
.engraving-preview-page .purchase-summary__label {
  color: rgba(0,0,0,0.62) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}
.engraving-preview-page .purchase-summary__detail,
.engraving-preview-page .purchase-summary__included {
  color: #000 !important;
  font: 400 0.82rem/1.35 Barlow, Arial, Helvetica, sans-serif !important;
}
.engraving-preview-page .product-add-button {
  min-width: min(260px, 48%) !important;
  justify-content: center !important;
  background: #0e1012 !important;
  color: #fff !important;
  border: 1px solid #0e1012 !important;
}
.engraving-preview-page .product-add-button:disabled,
.engraving-preview-page .product-add-button[disabled] {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}
.engraving-preview-page .preview-zoom-controls {
  right: 1rem !important;
  bottom: 1rem !important;
}
@media (max-width: 1180px) {
  .engraving-preview-page .dual-preview-grid {
    width: min(860px, 100%) !important;
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 720px) {
  .engraving-preview-page .demo-qty-selector {
    grid-template-columns: 1fr !important;
  }
  .engraving-preview-page .demo-price-range {
    justify-self: start !important;
    text-align: left !important;
  }
  .engraving-preview-page .add-cart-section--preview-page {
    align-items: stretch !important;
    flex-direction: column !important;
  }
  .engraving-preview-page .product-add-button {
    width: 100% !important;
    min-width: 0 !important;
  }
  .engraving-preview-page .preview-area {
    min-height: 320px !important;
  }
}

/* Hero floating coaster restore: 4K slate texture background with floating coaster focal point. */
#hero {
  background:
    linear-gradient(90deg, rgba(5,6,7,0.9) 0%, rgba(8,9,10,0.72) 32%, rgba(10,11,12,0.42) 62%, rgba(10,11,12,0.28) 100%),
    radial-gradient(circle at 72% 28%, rgba(255,255,255,0.055), transparent 34%),
    radial-gradient(circle at 18% 64%, rgba(0,0,0,0.5), transparent 42%),
    url("hero-slate-texture-4k-v2.jpg") center / cover no-repeat,
    #0b0d0e !important;
  align-items: center !important;
  justify-content: center !important;
  isolation: isolate !important;
}
#hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.32) 0%, transparent 30%, rgba(0,0,0,0.34) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.36), transparent 42%, rgba(255,255,255,0.025)) !important;
  opacity: 0.86 !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
}
#hero::after {
  content: '' !important;
  position: absolute !important;
  inset: auto 0 0 !important;
  height: 34% !important;
  z-index: 0 !important;
  background: linear-gradient(to bottom, transparent, rgba(8,9,10,0.74)) !important;
  pointer-events: none !important;
}
#hero .hero-coaster-bg {
  display: block !important;
  position: absolute !important;
  left: 52% !important;
  right: auto !important;
  top: 52% !important;
  width: min(36vw, 520px) !important;
  height: auto !important;
  aspect-ratio: 1000 / 960 !important;
  z-index: 1 !important;
  transform: translateY(-50%) scaleX(-1) !important;
  transform-origin: 50% 50% !important;
  animation: heroCutoutCoasterFloat 13s ease-in-out infinite !important;
  overflow: visible !important;
  clip-path: none !important;
  border-radius: 0 !important;
  background: url("hero-coaster-foreground-v2.png") center / contain no-repeat !important;
  box-shadow: none !important;
  opacity: 0.9 !important;
  filter: drop-shadow(26px 38px 70px rgba(0,0,0,.62)) contrast(1.03) brightness(.92) saturate(.92) !important;
  pointer-events: none !important;
}
#hero .hero-coaster-bg::before,
#hero .hero-coaster-bg::after,
#hero .hero-coaster-bg .stone-surface,
#hero .hero-coaster-bg .stone-chip,
#hero .hero-coaster-bg .stone-crack,
#hero .hero-coaster-bg .stone-engraving,
#hero .hero-coaster-bg .stone-engraving::before,
#hero .hero-coaster-bg .stone-engraving::after {
  display: none !important;
}
#hero .hero-content {
  position: relative !important;
  z-index: 5 !important;
  max-width: 680px !important;
  margin-left: 0 !important;
  padding: 0 5vw !important;
  transform: translateX(-10vw) !important;
}
#hero .hero-content::before {
  content: '' !important;
  position: absolute !important;
  inset: -2.8rem -3.4rem !important;
  z-index: -1 !important;
  background: radial-gradient(ellipse at 38% 48%, rgba(7,8,9,0.88), rgba(7,8,9,0.5) 52%, transparent 72%) !important;
  pointer-events: none !important;
}
#hero .hero-headline,
#hero .hero-sub,
#hero .hero-eyebrow {
  text-shadow: 0 2px 22px rgba(0,0,0,0.58) !important;
}
@media (max-width: 1180px) {
  #hero .hero-content {
    transform: translateX(-6vw) !important;
  }
  #hero .hero-coaster-bg {
    left: 48% !important;
    right: auto !important;
    width: min(48vw, 520px) !important;
    opacity: 0.58 !important;
  }
}
@media (max-width: 768px) {
  #hero .hero-content {
    transform: none !important;
    padding: 0 5vw !important;
  }
  #hero .hero-content::before {
    inset: -2rem !important;
  }
  #hero .hero-coaster-bg {
    left: 42% !important;
    right: auto !important;
    top: 44% !important;
    width: min(86vw, 430px) !important;
    opacity: 0.18 !important;
  }
}

/* Cache-bust hero float visibility override. */
#hero .hero-coaster-bg {
  animation: heroCutoutCoasterFloat 11.5s ease-in-out infinite !important;
  will-change: transform !important;
}
@keyframes heroCutoutCoasterFloat {
  0%, 100% { transform: translateY(-50%) scaleX(-1) translate3d(0, 0, 0) rotate(-0.6deg); }
  50% { transform: translateY(-56%) scaleX(-1) translate3d(0, -12px, 0) rotate(0.6deg); }
}

/* Scroll-matched mirrored hero coaster float. */
#hero .hero-coaster-bg {
  animation: heroCoasterScrollBounce 2s ease-in-out infinite !important;
  animation-play-state: running !important;
  transform: translateY(-50%) scaleX(-1) rotate(-0.4deg) !important;
  transform-origin: 50% 50% !important;
  pointer-events: auto !important;
  will-change: transform !important;
}
#hero .hero-coaster-bg:hover {
  animation: heroCoasterHoverNudge 1.15s ease-in-out infinite alternate !important;
}
@keyframes heroCoasterScrollBounce {
  0%, 100% { transform: translateY(-50%) translateY(0) scaleX(-1) rotate(-0.4deg); }
  50% { transform: translateY(-50%) translateY(6px) scaleX(-1) rotate(0.2deg); }
}
@keyframes heroCoasterHoverNudge {
  0% { transform: translateY(-50%) translateY(0) translateX(0) scaleX(-1) rotate(-0.4deg); }
  100% { transform: translateY(-50%) translateY(-8px) translateX(10px) scaleX(-1) rotate(1deg); }
}


/* ─── ABOUT PAGE LAYOUT REPAIR ─── */
.about-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0e1012;
  color: #fff;
}

.about-page .about-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 0.74fr) minmax(360px, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 7rem);
  min-height: min(760px, calc(100vh - 70px));
  padding: clamp(7rem, 12vh, 9rem) 5vw clamp(5rem, 9vh, 7rem);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.08), transparent 32%),
    radial-gradient(circle at 12% 72%, rgba(136, 54, 31, 0.13), transparent 34%),
    #0e1012;
}

.about-page .about-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 7, 7, 0.78) 0%, rgba(6, 7, 7, 0.2) 45%, rgba(6, 7, 7, 0.48) 100%),
    linear-gradient(180deg, rgba(6, 7, 7, 0.18), transparent 42%, rgba(6, 7, 7, 0.24));
}

.about-page .about-hero-content {
  position: relative;
  z-index: 4;
  max-width: 640px;
}

.about-page .about-hero-copy {
  max-width: 580px;
  margin: 1.2rem 0 1.6rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
  line-height: 1.75;
}

.about-page .about-hero-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.about-page .about-link {
  color: rgba(255, 255, 255, 0.72);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

.about-page .about-link:hover {
  color: #fff;
}

.about-page .about-hero-art {
  position: relative;
  z-index: 3;
  min-height: clamp(320px, 52vw, 560px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  opacity: 1;
  pointer-events: none;
}

.about-page .about-hero-art img {
  display: block;
  width: min(100%, 900px);
  height: auto;
  object-fit: contain;
  filter: brightness(1.12) contrast(1.04) drop-shadow(32px 42px 90px rgba(0, 0, 0, 0.54));
}

.about-page .about-slate-stack {
  position: relative;
  width: min(42vw, 560px);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  transform: rotate(-6deg);
  transform-style: preserve-3d;
  perspective: 1200px;
  overflow: visible;
}

.about-page .about-slate-stack::before,
.about-page .about-slate-stack::after,
.about-page .about-slate-stack span {
  max-width: 100%;
}

.about-page .about-story-section,
.about-page .about-process-section,
.about-page .about-material-section,
.about-page .about-cta-section {
  position: relative;
  z-index: 3;
  overflow: hidden;
  padding: clamp(4.5rem, 8vw, 7rem) 5vw;
}

.about-page .about-story-section {
  background: #101415;
}

.about-page .about-process-section {
  background:
    radial-gradient(circle at 78% 18%, rgba(136, 54, 31, 0.22), transparent 34%),
    #150b08;
}

.about-page .about-material-section {
  background:
    radial-gradient(circle at 20% 20%, rgba(136, 54, 31, 0.22), transparent 30%),
    #0e1012;
}

.about-page .about-cta-section {
  background: #f4f1ec;
  color: #0e1012;
}

.about-page .about-cta-section .section-title {
  color: #0e1012;
}

.about-page .about-story-copy .section-title,
.about-page .about-process-section .section-title,
.about-page .about-material-panel .section-title {
  color: #fff;
}

.about-page .about-story-body,
.about-page .about-process-card p,
.about-page .about-material-panel p {
  color: rgba(255, 255, 255, 0.62);
}

.about-page .about-process-grid {
  align-items: stretch;
}

.about-page .about-material-panel,
.about-page .about-process-card {
  backdrop-filter: blur(10px);
}

@media (max-width: 980px) {
  .about-page .about-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 7rem;
  }

  .about-page .about-hero::after {
    background:
      linear-gradient(180deg, rgba(6, 7, 7, 0.78) 0%, rgba(6, 7, 7, 0.32) 58%, rgba(6, 7, 7, 0.78) 100%);
  }

  .about-page .about-hero-art {
    grid-row: 1;
    min-height: 300px;
    opacity: 0.72;
  }

  .about-page .about-hero-content {
    grid-row: 1;
  }

  .about-page .about-slate-stack {
    width: min(78vw, 420px);
  }
}

@media (max-width: 640px) {
  .about-page .about-hero {
    padding-inline: 1.35rem;
  }

  .about-page .about-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .about-page .about-hero-actions .cta-primary {
    justify-content: center;
  }
}

/* ─── HERO COASTER FLOAT LIKE REFERENCE VIDEO ─── */
#hero .hero-coaster-bg {
  animation: heroCoasterVideoFloat 10.5s cubic-bezier(.42, 0, .18, 1) infinite !important;
  transform-origin: 50% 54% !important;
  will-change: transform, filter !important;
  pointer-events: auto !important;
}

#hero .hero-coaster-bg:hover {
  animation: heroCoasterVideoHover 3.4s cubic-bezier(.25, .75, .25, 1) infinite alternate !important;
}

@keyframes heroCoasterVideoFloat {
  0%, 100% {
    transform: translateY(-50%) translate3d(0, 0, 0) scaleX(-1) rotate(-0.65deg);
    filter: drop-shadow(26px 38px 70px rgba(0,0,0,.62)) contrast(1.03) brightness(.92) saturate(.92);
  }
  28% {
    transform: translateY(-50%) translate3d(5px, -6px, 0) scaleX(-1) rotate(0.08deg);
  }
  56% {
    transform: translateY(-50%) translate3d(-3px, 5px, 0) scaleX(-1) rotate(-0.55deg);
    filter: drop-shadow(30px 46px 78px rgba(0,0,0,.68)) contrast(1.04) brightness(.94) saturate(.92);
  }
  78% {
    transform: translateY(-50%) translate3d(3px, -3px, 0) scaleX(-1) rotate(0.08deg);
  }
}

@keyframes heroCoasterVideoHover {
  0% {
    transform: translateY(-50%) translate3d(0, 0, 0) scaleX(-1) rotate(-0.4deg) scale(1);
  }
  100% {
    transform: translateY(-50%) translate3d(7px, -7px, 0) scaleX(-1) rotate(0.75deg) scale(1.01);
  }
}

.engraving-preview-page .custom-corp-qty {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 48px;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(14, 16, 18, 0.28);
  background: rgba(255,255,255,0.92);
  color: #0e1012;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.engraving-preview-page .custom-corp-qty[hidden] {
  display: none !important;
}

.engraving-preview-page .custom-corp-qty__input {
  width: 9.5rem;
  min-height: 32px;
  border: 1px solid #0e1012;
  border-radius: 0;
  background: #fff;
  color: #0e1012;
  padding: 0.35rem 0.55rem;
  font: 600 0.95rem 'Barlow', sans-serif;
}

.engraving-preview-page .custom-corp-qty__input::placeholder {
  color: rgba(14,16,18,0.45);
}

/* Keep the preview page back link visible below the fixed header and vertically centered. */
.engraving-preview-page .engraving-preview-back {
  min-height: clamp(4.75rem, 8vh, 5.75rem) !important;
  margin-top: 68px !important;
  padding: 0 5vw !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  text-align: left !important;
  background: rgba(14,16,18,0.72) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

.engraving-preview-page .engraving-preview-back .collection-back {
  margin-inline: 0 !important;
  color: rgba(255,255,255,0.62) !important;
}

/* Text placement controls for engraving previews */
.engraving-preview-page .text-placement-wrap {
  display: grid !important;
  gap: 0.45rem !important;
  margin-top: 0.75rem !important;
}
.engraving-preview-page .text-placement-label {
  margin-bottom: 0 !important;
}
.engraving-preview-page .text-placement-select {
  width: 100% !important;
  min-height: 46px !important;
  padding: 0 2.5rem 0 0.95rem !important;
  background: #fff !important;
  border: 1px solid rgba(14,16,18,0.85) !important;
  border-radius: 0 !important;
  color: #000 !important;
  font: 700 0.76rem/1 'Barlow Condensed', Arial, Helvetica, sans-serif !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  outline: none !important;
}
.engraving-preview-page .coaster-mockup[data-text-placement="above"] .coaster-engraving--model-overlay {
  justify-content: flex-start !important;
  padding-top: 12% !important;
}
.engraving-preview-page .coaster-mockup[data-text-placement="center"] .coaster-engraving--model-overlay {
  justify-content: center !important;
}
.engraving-preview-page .coaster-mockup[data-text-placement="bottom"] .coaster-engraving--model-overlay,
.engraving-preview-page .coaster-mockup[data-text-placement="below"] .coaster-engraving--model-overlay {
  justify-content: flex-end !important;
  padding-bottom: 10% !important;
}

/* Global branded loading screen */
body.is-site-loading {
  overflow: hidden !important;
}
body.is-site-loading #MainContent {
  opacity: 0 !important;
  visibility: hidden !important;
}
body.site-loader-complete #MainContent {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.55s ease;
}
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 30%, rgba(245, 241, 232, 0.18), transparent 28%),
    radial-gradient(circle at 18% 78%, rgba(136, 54, 31, 0.52), transparent 38%),
    radial-gradient(circle at 82% 20%, rgba(199, 118, 72, 0.28), transparent 34%),
    linear-gradient(135deg, #2a120c 0%, #130b08 48%, #0e0806 100%);
  color: #f5f1e8;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease, visibility 0.55s ease;
  visibility: hidden;
}
body.is-site-loading .site-loader {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.site-loader__inner {
  display: grid;
  justify-items: center;
  gap: 0.95rem;
  transform: translateY(-2vh);
}
.site-loader__mark {
  width: 4.1rem;
  height: 4.1rem;
  display: block;
  filter: drop-shadow(0 22px 42px rgba(0,0,0,0.52));
  animation: loaderStonePulse 1.8s ease-in-out infinite;
}
.site-loader__brand {
  font-family: 'Barlow Condensed', 'Bebas Neue', sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  font-weight: 300;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-transform: uppercase;
}
.site-loader__text {
  color: rgba(245,241,232,0.72);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.site-loader__dots::after {
  content: '...';
  display: inline-block;
  width: 1.35em;
  overflow: hidden;
  vertical-align: bottom;
  animation: loaderEllipsis 1.15s steps(4, end) infinite;
}
@keyframes loaderEllipsis {
  0% { width: 0; }
  100% { width: 1.35em; }
}
@keyframes loaderStonePulse {
  0%, 100% { transform: translateY(0) rotate(0deg); filter: drop-shadow(0 22px 42px rgba(0,0,0,0.52)) brightness(0.95); }
  50% { transform: translateY(-8px) rotate(2deg); filter: drop-shadow(0 28px 52px rgba(0,0,0,0.58)) brightness(1.16); }
}

/* ENGRAVED.UK 404 */
.not-found-page {
  position: relative;
  min-height: 100vh;
  padding: clamp(8rem, 14vh, 11rem) 5vw clamp(5rem, 8vw, 7rem);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.75fr);
  align-items: center;
  gap: clamp(2.5rem, 7vw, 7rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 28%, rgba(255,255,255,0.07), transparent 26%),
    radial-gradient(circle at 18% 72%, rgba(117, 62, 42, 0.16), transparent 32%),
    #0e1012;
  color: #fff;
}
.not-found-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.74), rgba(0,0,0,0.22) 52%, rgba(0,0,0,0.54)),
    url('hero-slate-texture-4k-v2.jpg') center/cover no-repeat;
  opacity: 0.52;
  pointer-events: none;
}
.not-found-content,
.not-found-stone {
  position: relative;
  z-index: 2;
}
.not-found-content {
  max-width: 680px;
  display: grid;
  gap: 1.25rem;
}
.not-found-title,
.not-found-title p {
  margin: 0;
  color: #fff;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3.2rem, 7vw, 7.6rem);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: 0;
}
.not-found-title em,
.not-found-title p em {
  color: #9ea8b0;
  font-style: italic;
}
.not-found-copy {
  max-width: 540px;
  color: rgba(255,255,255,0.62);
  font: 300 1rem/1.8 Barlow, Arial, Helvetica, sans-serif;
}
.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
  margin-top: 0.5rem;
}
.not-found-actions .btn-primary,
.not-found-actions .btn-secondary {
  min-height: 3.35rem;
  padding: 0 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
.not-found-actions .btn-primary {
  background: #fff;
  color: #0e1012;
}
.not-found-actions .btn-secondary {
  background: rgba(255,255,255,0.04);
  color: #fff;
}
.not-found-stone {
  min-height: clamp(300px, 42vw, 560px);
  display: grid;
  place-items: center;
  perspective: 1100px;
}

.not-found-stone__image {
  display: block;
  width: min(82vw, 640px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 38px 58px rgba(0,0,0,0.58));
  animation: notFoundStoneImageFloat 6.5s ease-in-out infinite;
}
@keyframes notFoundStoneImageFloat {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-18px) rotate(1.5deg); }
}
.not-found-stone__surface {
  width: min(82vw, 520px);
  aspect-ratio: 1 / 0.78;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 44% 28%, rgba(255,255,255,0.12), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,0.1), transparent 18%, rgba(0,0,0,0.52) 100%),
    #171a1d;
  clip-path: polygon(4% 10%, 16% 5%, 48% 8%, 72% 4%, 96% 12%, 94% 86%, 82% 93%, 50% 90%, 22% 96%, 6% 84%, 9% 58%, 5% 38%);
  transform: rotateX(58deg) rotateZ(-7deg);
  box-shadow: 0 55px 95px rgba(0,0,0,0.58), inset 0 0 42px rgba(255,255,255,0.05), inset 0 -22px 32px rgba(0,0,0,0.6);
  filter: drop-shadow(0 28px 38px rgba(0,0,0,0.55));
  animation: notFoundStoneFloat 6.5s ease-in-out infinite;
}
.not-found-stone__surface::before {
  content: '';
  position: absolute;
  inset: 8%;
  background: repeating-linear-gradient(102deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 8px);
  mix-blend-mode: screen;
  opacity: 0.72;
}
.not-found-stone__surface span {
  position: relative;
  color: rgba(224,220,210,0.48);
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(5rem, 12vw, 11rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.1), 0 -2px 0 rgba(0,0,0,0.82);
  mix-blend-mode: screen;
}
@keyframes notFoundStoneFloat {
  0%, 100% { transform: rotateX(58deg) rotateZ(-7deg) translateY(0); }
  50% { transform: rotateX(58deg) rotateZ(-7deg) translateY(-18px); }
}
@media (max-width: 820px) {
  .not-found-page {
    grid-template-columns: 1fr;
    padding-top: 7.5rem;
  }
  .not-found-stone {
    min-height: 300px;
  }
  .not-found-stone__surface,
  .not-found-stone__image {
    width: min(92vw, 430px);
  }
  .not-found-actions {
    align-items: stretch;
  }
  .not-found-actions .btn-primary,
  .not-found-actions .btn-secondary {
    width: 100%;
  }
}

/* Corporate preview form refinements */
.engraving-preview-page .preview-product-card--corporate .coaster-carousel__nav {
  display: none !important;
}
.engraving-preview-page .preview-product-card--corporate .coaster-carousel {
  padding: 0 !important;
  background: #fff !important;
  border: 1px solid rgba(14,16,18,0.12) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,0.08) !important;
}
.engraving-preview-page .preview-product-card--corporate .demo-controls-list {
  padding: clamp(1.1rem, 2vw, 1.55rem) !important;
  background: #fff !important;
  gap: 0 !important;
}
.engraving-preview-page .preview-product-card--corporate .demo-single-controls {
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  gap: 1rem !important;
}
.engraving-preview-page .preview-product-card--corporate .demo-control-heading {
  padding-bottom: 0.8rem !important;
  border-bottom: 1px solid rgba(14,16,18,0.1) !important;
  color: rgba(14,16,18,0.72) !important;
}
.engraving-preview-page .preview-product-card--corporate .demo-qty-selector {
  margin: 0.15rem 0 1rem !important;
  padding: 1rem !important;
  display: grid !important;
  grid-template-columns: auto minmax(150px, 190px) minmax(170px, 1fr) auto !important;
  align-items: center !important;
  gap: 1rem !important;
  border: 1px solid rgba(14,16,18,0.22) !important;
  background: #fbfaf7 !important;
  color: #0e1012 !important;
}
.engraving-preview-page .preview-product-card--corporate .demo-qty-selector .qty-select,
.engraving-preview-page .preview-product-card--corporate .custom-corp-qty__input,
.engraving-preview-page .preview-product-card--corporate .text-placement-select,
.engraving-preview-page .preview-product-card--corporate .text-input {
  border-color: rgba(14,16,18,0.82) !important;
  background-color: #fff !important;
  color: #0e1012 !important;
}
.engraving-preview-page .preview-product-card--corporate .custom-corp-qty {
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: auto minmax(120px, 1fr) !important;
  align-items: center !important;
  gap: 0.75rem !important;
}
.engraving-preview-page .preview-product-card--corporate .custom-corp-qty[hidden] {
  display: none !important;
}
.engraving-preview-page .preview-product-card--corporate .demo-price-range {
  justify-self: end !important;
  min-width: 96px !important;
  text-align: right !important;
}
.engraving-preview-page .preview-product-card--corporate .demo-price-range__price {
  color: #0e1012 !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.65rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
.engraving-preview-page .preview-product-card--corporate .demo-price-range__qty {
  color: rgba(14,16,18,0.72) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.18em !important;
}
.engraving-preview-page .preview-product-card--corporate .qty-note {
  grid-column: 1 / -1 !important;
  color: rgba(14,16,18,0.52) !important;
  font-family: Barlow, Arial, Helvetica, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}
.engraving-preview-page .preview-product-card--corporate .upload-area {
  min-height: 74px !important;
  justify-content: flex-start !important;
  background: #fff !important;
  border-color: rgba(14,16,18,0.2) !important;
}
.engraving-preview-page .preview-product-card--corporate .text-placement-wrap {
  margin-top: 0.9rem !important;
}
@media (max-width: 900px) {
  .engraving-preview-page .preview-product-card--corporate .demo-qty-selector {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }
  .engraving-preview-page .preview-product-card--corporate .demo-price-range {
    justify-self: start !important;
    text-align: left !important;
  }
}

/* Global section title color correction */
.section-title {
  color: #fff !important;
}
.section-title em {
  color: var(--accent) !important;
}

.collection-back {
  margin-bottom: 20px !important;
}

/* Homepage before / after engraving comparison */
.before-after-section {
  position: relative;
  overflow: hidden;
  padding: clamp(4.75rem, 8vw, 7rem) 5vw;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,0.055), transparent 30%),
    radial-gradient(circle at 82% 74%, rgba(136,54,31,0.12), transparent 34%),
    #101415;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,0.055);
  border-bottom: 1px solid rgba(255,255,255,0.055);
}
.before-after-header {
  max-width: 760px;
  margin: 0 auto clamp(2.4rem, 5vw, 4rem);
  text-align: center;
}
.before-after-header .section-title {
  color: #fff;
}
.before-after-header p {
  max-width: 620px;
  margin: 1rem auto 0;
  color: rgba(255,255,255,0.62);
  font: 300 1rem/1.8 Barlow, Arial, Helvetica, sans-serif;
}
.before-after-shell {
  max-width: 1180px;
  margin: 0 auto;
}
.before-after-media {
  position: relative;
  min-height: clamp(360px, 54vw, 690px);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.03), transparent 44%),
    #f4f1ec;
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 42px 110px rgba(0,0,0,0.36);
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}
.before-after-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.before-after-layer img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
.before-after-layer--before img {
  filter: saturate(0.92) contrast(1.03);
}
.before-after-layer--after {
  width: var(--ba-position, 50%);
  z-index: 2;
  border-right: 1px solid rgba(255,255,255,0.82);
}
.before-after-layer--after img {
  width: calc(100% / (var(--ba-position-num, 50) / 100));
  min-width: 100%;
  filter: grayscale(1) contrast(1.18) brightness(0.92);
}
.before-after-divider {
  position: absolute;
  top: 0;
  left: var(--ba-position, 50%);
  z-index: 4;
  height: 100%;
  width: 1px;
  background: rgba(255,255,255,0.82);
  transform: translateX(-50%);
  pointer-events: none;
}
.before-after-divider span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.1rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #fff;
  color: #0e1012;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.05rem;
  letter-spacing: -0.08em;
  box-shadow: 0 16px 42px rgba(0,0,0,0.28);
}
.before-after-label {
  position: absolute;
  z-index: 5;
  bottom: clamp(1.1rem, 2vw, 1.65rem);
  color: rgba(14,16,18,0.72);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.before-after-label--before { left: clamp(1.1rem, 2vw, 1.65rem); }
.before-after-label--after { right: clamp(1.1rem, 2vw, 1.65rem); }
.before-after-range {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
}
.before-after-actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.8rem, 3vw, 2.5rem);
}
.before-after-actions .cta-primary {
  background: #fff;
  color: #0e1012;
}
@media (max-width: 760px) {
  .before-after-section {
    padding-inline: 1.25rem;
  }
  .before-after-media {
    min-height: 420px;
  }
  .before-after-layer img {
    object-position: center;
  }
  .before-after-divider span {
    width: 2.75rem;
  }
}

.about-cta .section-title {
  color: black !important;
}


/* 2026-05-13 repair: upload editor modal and GLB preview visibility. */
.image-editor-modal.open,
.image-editor-modal[aria-hidden="false"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(0.75rem, 2vw, 1.5rem) !important;
  background: rgba(0,0,0,0.78) !important;
}
.image-editor-dialog {
  width: min(1180px, 96vw) !important;
  max-height: min(820px, 94vh) !important;
  overflow: hidden !important;
  background: #f4f1ec !important;
  color: #0e1012 !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 34px 92px rgba(0,0,0,0.52) !important;
}
.image-editor-layout {
  min-height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(300px, 0.92fr) minmax(360px, 1.08fr) !important;
  align-items: stretch !important;
}
.image-editor-result {
  min-height: 580px !important;
  padding: clamp(1.25rem, 2.5vw, 2rem) !important;
  display: grid !important;
  align-content: start !important;
  justify-items: center !important;
  gap: 1.2rem !important;
  background: #f4f1ec !important;
  color: #0e1012 !important;
}
.image-editor-result-label {
  justify-self: start !important;
  color: #0e1012 !important;
  font: 500 0.92rem/1.2 Barlow, Arial, Helvetica, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.image-editor-result .image-editor-slate.image-editor-slate--static {
  width: min(92%, 460px) !important;
  margin-top: 0.25rem !important;
  align-self: start !important;
  filter: drop-shadow(0 22px 32px rgba(0,0,0,0.18)) !important;
}
.image-editor-workspace {
  padding: clamp(1.4rem, 3vw, 2.6rem) !important;
  display: grid !important;
  align-content: center !important;
  gap: clamp(1rem, 2vw, 1.5rem) !important;
  background: #f4f1ec !important;
  color: #0e1012 !important;
}
.image-editor-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 0.45fr) !important;
  align-items: end !important;
  gap: clamp(1rem, 2vw, 1.5rem) !important;
}
.image-editor-head .section-label {
  color: rgba(119, 91, 65, 0.72) !important;
}
.image-editor-head h2 {
  margin: 0 !important;
  max-width: 8.5ch !important;
  color: #0e1012 !important;
  font-size: clamp(2.8rem, 5.2vw, 4.75rem) !important;
  line-height: 0.95 !important;
}
.image-editor-head p {
  margin: 0 !important;
  color: rgba(14,16,18,0.58) !important;
  font: 300 0.98rem/1.65 Barlow, Arial, Helvetica, sans-serif !important;
}
.image-editor-crop {
  width: 100% !important;
  max-width: 540px !important;
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
  justify-self: stretch !important;
  align-self: start !important;
  overflow: hidden !important;
  background:
    linear-gradient(45deg, #d7d7d7 25%, transparent 25%),
    linear-gradient(-45deg, #d7d7d7 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #d7d7d7 75%),
    linear-gradient(-45deg, transparent 75%, #d7d7d7 75%),
    #ececec !important;
  background-size: 24px 24px !important;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0 !important;
  border: 2px solid #1677ff !important;
  box-shadow: none !important;
  touch-action: none !important;
}
.image-editor-toolbar {
  top: 0.75rem !important;
  right: 0.75rem !important;
  z-index: 12 !important;
}
.image-editor-tool {
  border-radius: 0 !important;
}
@media (max-width: 900px) {
  .image-editor-dialog { overflow: auto !important; }
  .image-editor-layout { grid-template-columns: 1fr !important; }
  .image-editor-result { min-height: auto !important; }
  .image-editor-head { grid-template-columns: 1fr !important; }
  .image-editor-crop { max-width: none !important; }
}

.engraving-preview-page .preview-area {
  min-height: clamp(360px, 44vw, 560px) !important;
  background: #f4f1ec !important;
}
.engraving-preview-page .coaster-mockup--glb {
  position: relative !important;
  width: min(100%, 640px) !important;
  min-height: clamp(320px, 40vw, 500px) !important;
  aspect-ratio: 4 / 3 !important;
  display: block !important;
  overflow: visible !important;
  background: transparent !important;
  isolation: isolate !important;
}
.engraving-preview-page .coaster-mockup--glb .slate-model-viewer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: inherit !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
  --poster-color: transparent !important;
  pointer-events: auto !important;
}
.engraving-preview-page .coaster-mockup--glb .coaster-base-img {
  position: absolute !important;
  inset: 8% 7% !important;
  z-index: 1 !important;
  width: 86% !important;
  height: 84% !important;
  display: block !important;
  object-fit: contain !important;
  opacity: 0.9 !important;
  visibility: visible !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
}
.engraving-preview-page .coaster-mockup--glb.is-model-loaded .coaster-base-img {
  opacity: 0 !important;
  visibility: hidden !important;
}
.engraving-preview-page .coaster-mockup--glb.is-model-error .coaster-base-img {
  opacity: 1 !important;
  visibility: visible !important;
}
.engraving-preview-page .coaster-mockup--glb .coaster-engraving--model-overlay {
  z-index: 6 !important;
  pointer-events: none !important;
}


/* 2026-05-13: polished before/after engraving transformation section. */
.before-after-section {
  background:
    radial-gradient(circle at 18% 18%, rgba(136, 54, 31, 0.18), transparent 34%),
    radial-gradient(circle at 84% 74%, rgba(244, 241, 236, 0.065), transparent 36%),
    linear-gradient(180deg, #171211 0%, #101415 100%) !important;
  color: #fff !important;
}
.before-after-header p {
  color: rgba(244, 241, 236, 0.68) !important;
}
.before-after-shell {
  max-width: 1220px !important;
}
.before-after-media {
  background: #1a1715 !important;
  border: 1px solid rgba(244, 241, 236, 0.14) !important;
  box-shadow: 0 44px 120px rgba(0, 0, 0, 0.44), inset 0 0 0 1px rgba(255,255,255,0.03) !important;
}
.before-after-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(14,16,18,0.04), transparent 45%, rgba(136,54,31,0.08));
  mix-blend-mode: soft-light;
}
.before-after-layer img {
  object-fit: cover !important;
  object-position: center !important;
}
.before-after-layer--before img {
  filter: saturate(0.95) contrast(1.02) brightness(0.94) !important;
}
.before-after-layer--after {
  border-right: 1px solid rgba(244, 241, 236, 0.72) !important;
  box-shadow: 14px 0 34px rgba(0, 0, 0, 0.16);
}
.before-after-layer--after img {
  filter: contrast(1.05) brightness(0.94) saturate(0.82) !important;
}
.before-after-divider {
  background: rgba(244, 241, 236, 0.72) !important;
}
.before-after-divider span {
  background: #f4f1ec !important;
  border: 1px solid rgba(14, 16, 18, 0.14);
}
.before-after-label {
  bottom: 1.25rem !important;
  padding: 0.45rem 0.75rem;
  background: rgba(14, 16, 18, 0.62);
  color: rgba(255,255,255,0.82) !important;
  letter-spacing: 0.22em;
  backdrop-filter: blur(8px);
}
.before-after-actions .cta-primary {
  background: #f4f1ec !important;
  color: #101415 !important;
  border-color: #f4f1ec !important;
}


/* 2026-05-13: place before/after labels on the bottom side edges of the media. */
.before-after-media .before-after-label {
  top: auto !important;
  bottom: clamp(0.9rem, 1.8vw, 1.35rem) !important;
  z-index: 7 !important;
  margin: 0 !important;
  transform: none !important;
}
.before-after-media .before-after-label--before {
  left: clamp(1rem, 2vw, 1.5rem) !important;
  right: auto !important;
  text-align: left !important;
}
.before-after-media .before-after-label--after {
  right: clamp(1rem, 2vw, 1.5rem) !important;
  left: auto !important;
  text-align: right !important;
}


/* 2026-05-13: swap comparison sides so original is left and engraved slate is right. */
.before-after-layer--before img {
  filter: contrast(1.05) brightness(0.94) saturate(0.82) !important;
}
.before-after-layer--after img {
  filter: saturate(0.95) contrast(1.02) brightness(0.94) !important;
}


/* 2026-05-14: Featherlings-style before/after slider overlay. */
.before-after-media {
  isolation: isolate !important;
}
.before-after-layer--after {
  border-right: 0 !important;
  box-shadow: none !important;
}
.before-after-divider {
  z-index: 24 !important;
  width: 2px !important;
  height: 100% !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 0 0 1px rgba(14, 16, 18, 0.06) !important;
}
.before-after-divider span {
  z-index: 25 !important;
  width: clamp(2.85rem, 4vw, 3.35rem) !important;
  background: #f4f1ec !important;
  color: #101415 !important;
  border: 1px solid rgba(14, 16, 18, 0.12) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22) !important;
}
.before-after-range {
  z-index: 30 !important;
}


/* 2026-05-14: robust Featherlings-style clipping for the before/after comparison. */
.before-after-media .before-after-layer--before,
.before-after-media .before-after-layer--after {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.before-after-media .before-after-layer--before {
  z-index: 1 !important;
}
.before-after-media .before-after-layer--after {
  z-index: 2 !important;
  overflow: hidden !important;
  clip-path: inset(0 calc(100% - var(--ba-position, 50%)) 0 0) !important;
  border-right: 0 !important;
  box-shadow: none !important;
}
.before-after-media .before-after-layer--before img,
.before-after-media .before-after-layer--after img {
  width: 100% !important;
  min-width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}
.before-after-media .before-after-divider {
  z-index: 20 !important;
  top: 0 !important;
  bottom: 0 !important;
  left: var(--ba-position, 50%) !important;
  height: 100% !important;
  width: 2px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
  pointer-events: none !important;
}
.before-after-media .before-after-divider span {
  z-index: 21 !important;
  width: clamp(2.75rem, 4vw, 3.25rem) !important;
  aspect-ratio: 1 !important;
  background: #f4f1ec !important;
  color: #101415 !important;
  border: 1px solid rgba(14, 16, 18, 0.12) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2) !important;
}
.before-after-media::before {
  z-index: 4 !important;
}
.before-after-media .before-after-label {
  z-index: 22 !important;
}
.before-after-media .before-after-range {
  z-index: 30 !important;
}
    transform: none !important;
    padding: 0 5vw !important;
  }
  #hero .hero-content::before {
    inset: -2rem !important;
  }
  #hero .hero-coaster-bg {
    left: 10% !important;
    right: auto !important;
    top: 50% !important;
    width: min(120vw, 560px) !important;
    opacity: 0.22 !important;
  }
}

/* Slatecraft engraving realism fix: generated previews are full stone renders,
   not small screen-blended photo overlays on top of the model. */
.engraving-preview-page .coaster-mockup.has-generated-engraving,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-mockup.has-generated-engraving {
  transform: none !important;
  perspective: none !important;
  overflow: visible !important;
}

.engraving-preview-page .coaster-mockup.has-generated-engraving .slate-model-viewer,
.engraving-preview-page .coaster-mockup.has-generated-engraving .coaster-base-img,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-mockup.has-generated-engraving .slate-model-viewer,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-mockup.has-generated-engraving .coaster-base-img {
  display: none !important;
}

.engraving-preview-page .coaster-mockup.has-generated-engraving .coaster-engraving,
.engraving-preview-page .coaster-mockup.has-generated-engraving .coaster-engraving--model-overlay,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-mockup.has-generated-engraving .coaster-engraving,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-mockup.has-generated-engraving .coaster-engraving--model-overlay {
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  overflow: visible !important;
  transform: none !important;
  clip-path: none !important;
}

.engraving-preview-page .coaster-mockup.has-generated-engraving .engrave-img-preview.is-generated-engraving,
.engraving-preview-page .coaster-mockup--glb.has-generated-engraving .coaster-engraving--model-overlay .engrave-img-preview.is-generated-engraving,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-mockup.has-generated-engraving .engrave-img-preview.is-generated-engraving {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  transform: none !important;
  clip-path: none !important;
}

/* v4: match the ChatGPT reference base before/while upload renders. */
.engraving-preview-page .coaster-base-img--front,
.image-editor-modal[style*="--preview-coaster-image"] .coaster-base-img--front {
  filter: grayscale(100%) brightness(66%) contrast(135%) !important;
}