/* ============ IAM DP&S — Black / Yellow / Gray theme ============ */
:root{
  --bg:#0C0C0C;
  --bg-soft:#161616;
  --surface:#1D1D1D;
  --surface-2:#242424;
  --line: rgba(255,255,255,0.12);
  --line-strong: rgba(255,255,255,0.22);
  --yellow:#ffbf00;
  --yellow-dim:#ffd000;
  --gray:#8C8C88;
  --gray-light:#B8B8B4;
  --text:#F3F3EF;
  --text-soft:#ABABA6;
  --radius:2px;
  --maxw:1180px;
}

[data-theme="light"]{
  --bg:#FAFAF8;
  --bg-soft:#F1F1EE;
  --surface:#FFFFFF;
  --surface-2:#F1F1EE;
  --line: rgba(0,0,0,0.10);
  --line-strong: rgba(0,0,0,0.18);
  --yellow:#ffbf00;
  --yellow-dim:#ffd000;
  --gray:#6B6B66;
  --gray-light:#4A4A46;
  --text:#171717;
  --text-soft:#4A4A46;
}

body{
  transition: background-color .3s ease, color .3s ease;
}

.theme-toggle{
  background:none; border:1.5px solid var(--line-strong); color:var(--text);
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; border-radius:2px; transition:border-color .2s ease;
}
.theme-toggle:hover{ border-color:var(--yellow); }
.theme-toggle svg{ width:17px; height:17px; }
.theme-toggle .icon-moon{ display:none; }
[data-theme="light"] .theme-toggle .icon-sun{ display:none; }
[data-theme="light"] .theme-toggle .icon-moon{ display:flex; }

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}
img,svg{display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
.mono{font-family:'IBM Plex Mono',monospace;}
.display{font-family:'Big Shoulders Display',sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:0.01em;}



/* ---------- Loader ---------- */
#loader{
  position:fixed; inset:0; background:var(--bg); z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  transition:opacity .6s ease, visibility .6s ease;
}
#loader.hide{opacity:0; visibility:hidden; pointer-events:none;}
.loader-mark{
  width:80px; height:80px; border-radius:50%; position:relative;
  display:flex; align-items:center; justify-content:center;
}
.loader-ring{
  position:absolute; inset:0; border-radius:50%;
  border:3px solid var(--yellow);
  border-top-color:transparent;
  animation: spin 1.1s linear infinite;
}
.loader-logo{
  width:88%; height:88%; object-fit:contain; position:relative; z-index:1;
}
.loader-bar{ width:220px; height:3px; background:rgba(255,255,255,0.12); overflow:hidden; position:relative; }
.loader-bar span{
  position:absolute; left:-100%; top:0; height:100%; width:100%;
  background:var(--yellow);
  animation: loadfill 1.4s ease forwards;
}
@keyframes loadfill{ to{ left:0; } }
.loader-label{ color:var(--gray-light); font-size:11px; letter-spacing:0.28em; opacity:0.85; text-align:center; }
/* ---------- Nav ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:22px 0; transition:padding .35s ease, background .35s ease, box-shadow .35s ease;
}
header.scrolled{
  padding:12px 0; background:rgba(12,12,12,0.88); backdrop-filter:blur(8px);
  box-shadow:0 1px 0 var(--line);
}
nav.wrap{ display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:10px; font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:20px; letter-spacing:0.02em; text-transform:uppercase; color:var(--text);}
.brand-mark{ width:30px; height:30px; position:relative; flex:none; border-radius:50%; overflow:hidden; }
.brand-mark span{ position:absolute; }
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;   /* same width your ring/dot container currently has */
    height: 32px;  /* same height your ring/dot container currently has */
}

.brand-logo {
    width: 100%;
    height: 100%;
    object-fit: contain; /* keeps logo proportions without stretching */
    display: block;
}.brand-mark .dot{ width:8px; height:8px; background:var(--yellow); border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); }
.nav-links{ display:flex; gap:34px; font-size:14px; font-weight:600; }
.nav-links a{ position:relative; padding-bottom:4px; color:var(--text-soft); }
.nav-links a.active, .nav-links a:hover{ color:var(--text); }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--yellow);
  transition:width .25s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-actions{ display:flex; align-items:center; gap:16px; }
.cart-btn{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border:1.5px solid var(--line-strong); border-radius:50%;
  background:transparent; cursor:pointer; transition:border-color .2s ease, background .2s ease; color:var(--text);
}
.cart-btn:hover{ border-color:var(--yellow); background:var(--surface); }
.cart-count{
  position:absolute; top:-6px; right:-6px; background:var(--yellow); color:#0C0C0C;
  font-size:10px; font-weight:700; width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace;
}
.btn{
  display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace;
  font-size:13px; font-weight:600; padding:12px 22px; border-radius:2px; letter-spacing:0.02em;
  cursor:pointer; border:1.5px solid var(--yellow); transition:transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn-solid{ background:var(--yellow); color:#0C0C0C; }
.btn-solid:hover{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--gray); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--line-strong); }
.btn-ghost:hover{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--yellow); border-color:var(--yellow); }
.menu-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; }
.menu-toggle span{ width:24px; height:2px; background:var(--text); }

/* ---------- Hero ---------- */
.hero{
  min-height:100svh; display:flex; align-items:center; position:relative;
  padding:150px 0 70px;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.07) 1px, transparent 0);
  background-size:26px 26px;
}
.hero-grid{ display:grid; grid-template-columns:1.35fr 0.85fr; gap:50px; align-items:center; }
.eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.22em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px; margin-bottom:22px; color:var(--gray-light);
}
.eyebrow::before{ content:""; width:22px; height:1.5px; background:var(--yellow); }
.headline{ position:relative; font-size:clamp(20px,7.2vw,80px); line-height:0.92; color:var(--text); }
.headline .ghost{
  position:absolute; top:0; left:0; z-index:-1; user-select:none; pointer-events:none; opacity:0.85;
}
.headline .ghost.y{ color:var(--yellow); transform:translate(6px,-5px); opacity:0.5; }
.headline .ghost.g{ color:var(--gray); transform:translate(-5px,4px); opacity:0.35; }
.hero-sub{ margin-top:26px; font-size:18px; line-height:1.6; max-width:480px; color:var(--text-soft); }
.hero-ctas{ display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:36px; margin-top:56px; }
.hero-stats div{ font-family:'IBM Plex Mono',monospace; }
.hero-stats strong{ display:block; font-family:'Big Shoulders Display',sans-serif; font-size:34px; font-weight:800; color:var(--yellow); }
.hero-stats span{ font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gray-light); }

.press-mark{ position:relative; width:100%; aspect-ratio:1/1; max-width:420px; margin:0 auto; }
.press-mark svg{ width:100%; height:100%; animation:spin 26s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.press-mark .press-logo{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:60%; height:60%; object-fit:contain; z-index:2;
}

/* Gallery marquee — sliding square photos */
.gallery-marquee{
  overflow:hidden; padding:20px 0; position:relative;
  background: var(--surface-2);
  border-top:1.5px solid var(--bg); border-bottom:1.5px solid var(--bg);
}
.gallery-track{ display:flex; width:max-content; animation:scroll 32s linear infinite; }
.gallery-item{
  flex:none; width:140px; height:140px; margin:0 12px;
  border:2px solid var(--yellow); overflow:hidden; position:relative;
}
.gallery-item img{
  width:100%; height:100%; object-fit:cover; display:block;
}
@keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* pause on hover (optional) */
.gallery-marquee:hover .gallery-track{ animation-play-state:paused; }

/* ---------- Sections generic ---------- */
section{ padding:120px 0; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:64px; flex-wrap:wrap; }
.section-tag{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.22em; text-transform:uppercase; color:var(--yellow); margin-bottom:14px; display:block;
}
.section-title{ font-size:clamp(32px,4vw,54px); line-height:1; max-width:620px; color:var(--text); }
.section-desc{ max-width:360px; color:var(--text-soft); font-size:15px; line-height:1.6; }

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- Services (docket cards) ---------- */
.services{ background:var(--bg-soft); border-top:1.5px solid var(--line); border-bottom:1.5px solid var(--line); }
.docket-grid{ display:grid; grid-template-columns:repeat(3,1fr); border-left:1.5px solid var(--line); border-top:1.5px solid var(--line); }
.docket{
  border-right:1.5px solid var(--line); border-bottom:1.5px solid var(--line);
  padding:34px 30px; position:relative; overflow:hidden; transition:background .3s ease;
}
.docket:hover{ background:var(--surface); }
.docket-num{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gray); margin-bottom:26px; display:block; }
.docket-icon{ width:40px; height:40px; margin-bottom:22px; }
.docket-icon svg{ width:100%; height:100%; stroke:var(--gray-light); transition:stroke .3s ease, transform .3s ease; }
.docket:hover .docket-icon svg{ stroke:var(--yellow); transform:translateY(-3px); }
.docket h3{ font-family:'Big Shoulders Display',sans-serif; font-size:24px; font-weight:800; text-transform:uppercase; margin-bottom:10px; color:var(--text); }
.docket p{ font-size:14px; line-height:1.6; color:var(--text-soft); margin-bottom:16px; }
.docket-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.docket-tags span{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; padding:4px 8px; border:1px solid var(--line-strong);
  color:var(--gray-light); border-radius:20px;
}

/* ---------- Deals ---------- */
#deals{ background:var(--bg-soft); border-top:1.5px solid var(--line); border-bottom:1.5px solid var(--line); }
.deal-card{ border-color:var(--yellow); }
.deal-badge{
  position:absolute; top:10px; right:10px; z-index:2;
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700;
  background:#c0272d; color:#fff; padding:4px 9px; border-radius:20px; letter-spacing:0.03em;
}
.deal-price-line{ display:flex; align-items:center; gap:8px; margin-top:-2px; }
.original-price{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--gray-light);
  text-decoration:line-through;
}
.save-badge{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600; color:#3fa34d; }

/* ---------- Deals slider wrap + arrows ---------- */
.deals-slider-wrap{
  display:flex; align-items:center; gap:14px;
}
.deals-marquee{ flex:1; min-width:0; overflow:hidden; padding:6px 0; }
.slider-arrow{
  flex:none; width:42px; height:42px; border-radius:50%;
  background:var(--surface); border:1.5px solid var(--line-strong); color:var(--text);
  font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color .2s ease, background .2s ease;
}
.slider-arrow:hover{ border-color:var(--yellow); background:var(--yellow); color:#0C0C0C; }

/* ---------- Deals track (position moved by JS transform) ---------- */
.deals-track{
  display:flex; gap:22px; width:max-content;
}
.deals-track .product-card{
  flex:0 0 auto;
  width:calc((var(--maxw) - 32px*2 - 22px*3) / 4);
  max-width:280px;
}

@media (max-width:980px){
  .deals-track .product-card{ width:240px; max-width:240px; }
}
@media (max-width:480px){
  .deals-track .product-card{ width:200px; max-width:200px; }
  .slider-arrow{ width:36px; height:36px; font-size:18px; }
}

/* ---------- Image magnifier ---------- */
.product-media{ cursor: zoom-in; }
.zoom-lens{
  position:absolute;
  width:110px; height:110px;
  border-radius:50%;
  border:2px solid var(--yellow);
  box-shadow:0 6px 18px rgba(0,0,0,0.45);
  pointer-events:none;
  background-repeat:no-repeat;
  z-index:10;
}


/* ---------- Quantity stepper ---------- */
.product-foot{
  flex-direction:column; align-items:stretch; gap:10px;
}
.price-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.qty-stepper{
  display:flex; align-items:center; gap:8px;
  border:1.5px solid var(--line-strong); border-radius:20px; padding:4px 6px;
}
.qty-btn{
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:var(--text); font-size:15px; font-weight:700;
  cursor:pointer; line-height:1; border-radius:50%; transition:background .2s ease, color .2s ease;
}
.qty-btn:hover{ background:var(--yellow); color:#0C0C0C; }
.qty-value{
  min-width:16px; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--text);
}
.product-foot .add-btn{ width:100%; justify-content:center; }


/* =========================
   GOOGLE STYLE REVIEWS
========================= */

#reviews {
  padding: 100px 0;
  overflow: hidden;
}

/* Rating Summary */

.google-rating {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 35px;
  padding: 18px 22px;
  width: fit-content;
  background: #151515;
  border: 1px solid #292929;
  border-radius: 5px;
}

.google-logo {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
}

.google-g {
  font-size: 25px;
  font-weight: 800;
  color: #4285F4;
}

.google-rating-info strong {
  display: block;
  color: #F3F3EF;
  font-size: 13px;
  margin-bottom: 5px;
}

.overall-rating {
  display: flex;
  align-items: center;
  gap: 9px;
}

.rating-number {
  color: #FFD100;
  font-size: 20px;
  font-weight: 800;
}

.rating-stars {
  color: #FFD100;
  letter-spacing: 2px;
}

.rating-caption {
  display: block;
  color: #777;
  font-size: 11px;
  margin-top: 3px;
}


/* Slider */

.reviews-slider {
  width: 100%;
  overflow: hidden;
  margin-top: 35px;
  position: relative;
}

.reviews-slider::before,
.reviews-slider::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 3;
  pointer-events: none;
}

.reviews-slider::before {
  left: 0;
  background: linear-gradient(
    to right,
    #0d0d0d,
    transparent
  );
}

.reviews-slider::after {
  right: 0;
  background: linear-gradient(
    to left,
    #0d0d0d,
    transparent
  );
}

.reviews-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: googleReviewScroll 50s linear infinite;
}

.reviews-track:hover {
  animation-play-state: paused;
}


/* Review Card */

.review-card {
  width: 380px;
  min-height: 205px;
  flex-shrink: 0;

  padding: 23px;

  background: #151515;
  border: 1px solid #292929;
  border-radius: 6px;

  transition:
    border-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.review-card:hover {
  border-color: #FFD100;
  transform: translateY(-5px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
}


/* User */

.review-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-photo {
  width: 45px;
  height: 45px;
  min-width: 45px;

  border-radius: 50%;
  object-fit: cover;

  border: 2px solid #292929;
}

.review-user {
  min-width: 0;
}

.review-user h4 {
  margin: 0;

  color: #F3F3EF;
  font-size: 14px;
  font-weight: 700;
}

.review-meta {
  display: block;
  margin-top: 3px;

  color: #777;
  font-size: 11px;
}


/* Verified */

.verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 15px;
  height: 15px;

  margin-left: 3px;

  border-radius: 50%;

  background: #FFD100;
  color: #111;

  font-size: 9px;
  font-weight: 900;
}


/* Three Dot Menu */

.review-menu {
  margin-left: auto;
  align-self: flex-start;

  color: #777;
  font-size: 15px;
  letter-spacing: 2px;
}


/* Rating */

.review-rating-row {
  display: flex;
  align-items: center;
  gap: 10px;

  margin-top: 16px;
}

.review-stars {
  color: #FFD100;
  font-size: 14px;
  letter-spacing: 1px;
}

.review-date {
  color: #777;
  font-size: 11px;
}


/* Text */

.review-text {
  margin: 14px 0 0;

  color: #B8B8B3;

  font-size: 13px;
  line-height: 1.7;
}


/* Source */

.review-source {
  display: block;
  margin-top: 13px;

  color: #666;
  font-size: 10px;
}


/* Continuous Animation */

@keyframes googleReviewScroll {

  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }

}


/* Tablet */

@media (max-width: 900px) {

  .review-card {
    width: 340px;
  }

}


/* Mobile */

@media (max-width: 600px) {

  #reviews {
    padding: 75px 0;
  }

  .google-rating {
    width: 100%;
    box-sizing: border-box;
  }

  .review-card {
    width: 300px;
    min-height: 215px;
    padding: 20px;
  }

  .reviews-slider::before,
  .reviews-slider::after {
    width: 35px;
  }

}

/* ---------- Shop teaser (index page) ---------- */
.shop-teaser-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-bottom:40px; }
.shop-teaser-cta{ display:flex; justify-content:center; }

/* ---------- Shop products (grid used on shop page + teaser) ---------- */
.shop-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.product-card{
  border:1.5px solid var(--line-strong); background:var(--surface); padding:0; position:relative;
  display:flex; flex-direction:column; transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.product-card:hover{ transform:translateY(-6px); box-shadow:6px 6px 0 var(--yellow); border-color:var(--yellow); }
.product-media{
  aspect-ratio:4/3.2; position:relative; display:flex; align-items:center; justify-content:center;
  border-bottom:1.5px solid var(--line-strong); overflow:hidden; background:var(--surface-2);
}
.product-media svg{ width:56%; height:56%; }
.product-badge{
  position:absolute; top:10px; left:10px; font-family:'IBM Plex Mono',monospace; font-size:10px;
  background:var(--yellow); color:#0C0C0C; padding:3px 8px; letter-spacing:0.05em; text-transform:uppercase; font-weight:600;
}
.product-body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.product-body h4{ font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:19px; text-transform:uppercase; color:var(--text); }
.product-body p{ font-size:12.5px; color:var(--text-soft); line-height:1.5; flex:1; }
.product-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.price{ font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:15px; color:var(--yellow); }
.add-btn{
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; letter-spacing:0.04em;
  padding:8px 12px; background:var(--yellow); color:#0C0C0C; border:none; cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.add-btn:hover{ background:var(--text); }
.add-btn.added{ background:#3fa34d; color:#fff; }

/* ---------- Shop page hero banner ---------- */
.shop-hero{
  padding:150px 0 60px; position:relative;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.07) 1px, transparent 0);
  background-size:26px 26px;
}
.shop-hero .eyebrow{ margin-bottom:18px; }
.shop-hero h1{ font-size:clamp(40px,6vw,74px); line-height:0.95; max-width:760px; }
.shop-hero p{ margin-top:20px; max-width:480px; color:var(--text-soft); font-size:16.5px; line-height:1.6; }

/* Category filter tabs */
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin:36px 0 46px; }
.filter-btn{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:600; letter-spacing:0.03em;
  padding:9px 18px; border:1.5px solid var(--line-strong); background:transparent; color:var(--text-soft);
  cursor:pointer; transition:all .2s ease; border-radius:20px; text-transform:uppercase;
}
.filter-btn:hover{ border-color:var(--yellow); color:var(--text); }
.filter-btn.active{ background:var(--yellow); border-color:var(--yellow); color:#0C0C0C; }

/* ---------- Process ---------- */
.process{ background:var(--surface); }
.process .section-tag{ color:var(--yellow); }
.process .section-desc{ color:var(--text-soft); }
.process-list{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); }
.process-item{ background:var(--surface); padding:36px 26px; }
.process-item .pnum{ font-family:'Big Shoulders Display',sans-serif; font-size:44px; font-weight:900; color:transparent; -webkit-text-stroke:1.4px var(--gray); margin-bottom:22px; }
.process-item h4{ font-family:'Big Shoulders Display',sans-serif; font-size:20px; font-weight:800; text-transform:uppercase; margin-bottom:10px; color:var(--text); }
.process-item p{ font-size:13.5px; line-height:1.6; color:var(--text-soft); }

/* ---------- Gallery ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; gap:16px; }
.gallery-grid figure{
  position:relative; margin:0; border:1.5px solid var(--line-strong); background:var(--surface);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  transform:rotate(var(--r,0deg)); transition:transform .3s ease, border-color .3s ease;
}
.gallery-grid figure:hover{ transform:rotate(0deg) scale(1.04); border-color:var(--yellow); z-index:2; }
.gallery-grid figure img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(20%) contrast(1.05); transition:filter .3s ease;
}
.gallery-grid figure:hover img{ filter:grayscale(0%) contrast(1); }
.gallery-grid figure:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.gallery-grid figure:nth-child(5){ grid-row:span 2; }
.tape{
  position:absolute; top:-8px; left:50%; transform:translateX(-50%) rotate(-3deg);
  width:56px; height:18px; background:rgba(255,209,0,0.35); border:1px solid rgba(255,255,255,0.15);
  z-index:3;
}

.product-media img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* ---------- Search Icon ---------- */

.search-input-wrapper {
  position: relative;
  width: 100%;
}

.search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  font-size: 16px;
  z-index: 2;
  pointer-events: none;
  transition: color 0.25s ease;
}

.search-input-wrapper:focus-within .search-icon {
  color: var(--yellow);
}


/* ---------- Search Bar ---------- */

.search-bar-container {
  position: sticky;
  top: 0;
  z-index: 450;
  padding: 20px 0;
  background: var(--bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  border-bottom: 1.5px solid var(--line);
}

.search-bar {
  width: 100%;
  padding: 14px 18px 14px 48px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.search-bar::placeholder {
  color: var(--text-soft);
}

.search-bar:focus {
  outline: none;
  border-color: var(--yellow);
  box-shadow: inset 0 0 0 2px rgba(255, 191, 0, 0.1);
}

#searchResults {
  margin-top: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--gray-light);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  min-height: 16px;
}

#searchResults:empty {
  display: none;
}

.no-results {
  text-align: center;
  padding: 60px 20px;
  color: var(--gray);
  font-size: 14px;
}

/* Light theme adjustment */

[data-theme="light"] .search-bar-container {
  background: var(--bg);
  border-color: var(--line);
}

[data-theme="light"] .search-bar {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--text);
}

[data-theme="light"] .search-bar::placeholder {
  color: var(--text-soft);
}

[data-theme="light"] #searchResults {
  color: var(--gray);
}

/* ---------- Delivery Strip ---------- */
.delivery-strip{
  background: var(--surface-2);
  border-bottom: 1.5px solid var(--line-strong);
  padding: 12px 0;
}
.delivery-inner{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--gray-light);
  text-transform:uppercase; letter-spacing:0.04em; text-align:center;
}
.delivery-inner svg{ width:20px; height:20px; stroke:var(--yellow); flex:none; }
.delivery-inner strong{ color:var(--yellow); }

.product-media img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* ---------- Toast ---------- */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--yellow); color:#0C0C0C; font-family:'IBM Plex Mono',monospace;
  font-size:13px; font-weight:600; padding:12px 22px; border-radius:2px;
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
  z-index:999; box-shadow:0 6px 20px rgba(0,0,0,0.3);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- Clear cart button ---------- */
.cart-clear{
  width:100%; background:none; border:1.5px solid var(--line-strong); color:var(--gray-light);
  font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:0.04em;
  padding:10px; cursor:pointer; margin-bottom:14px; transition:border-color .2s ease, color .2s ease;
}
.cart-clear:hover{ border-color:var(--yellow); color:var(--yellow); }

/* ---------- Toast / Add-to-cart popup ---------- */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px) scale(0.96);
  background:#171400; color:var(--yellow); border:1.5px solid var(--yellow);
  font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600;
  display:flex; align-items:center; gap:10px;
  padding:13px 22px; border-radius:3px;
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
  z-index:999; box-shadow:0 10px 30px rgba(0,0,0,0.45);
}
.toast svg{ width:18px; height:18px; flex:none; stroke:var(--yellow); }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); }

/* ---------- Team ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:960px; }
.team-card{ border:1.5px solid var(--line-strong); padding:30px; display:flex; flex-direction:column; align-items:center; text-align:center; background:var(--surface); }
.avatar{ width:100px; height:100px; border-radius:50%; position:relative; flex:none; background:var(--surface-2); border:2px solid var(--yellow); display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:16px; }
.avatar .init{ font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:20px; color:var(--yellow); }
.avatar .avatar-img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.team-card h4{ font-family:'Big Shoulders Display',sans-serif; font-size:21px; font-weight:800; text-transform:uppercase; color:var(--text); }
.team-card .role{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--yellow); text-transform:uppercase; letter-spacing:0.06em; margin:4px 0 10px; }
.team-links{ display:flex; gap:12px; margin-top:10px; }
.team-links a{ font-size:12px; text-decoration:underline; color:var(--gray-light); }
.team-links a:hover{ color:var(--yellow); }

/* ---------- Contact ---------- */
.contact{ background:var(--bg-soft); border-top:1.5px solid var(--line); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; }
.info-list{ margin-top:26px; display:flex; flex-direction:column; gap:22px; }
.info-list div span{ display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gray-light); margin-bottom:6px; }
.info-list div strong{ font-size:16px; font-weight:600; color:var(--text); }
.map-frame{ border:1.5px solid var(--line-strong); width:100%; height:100%; min-height:340px; }
.map-frame iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; filter:invert(90%) grayscale(30%) contrast(0.9); }

footer{ background:#080808; color:var(--text); padding:70px 0 26px; border-top:2px solid var(--yellow); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:46px; border-bottom:1px solid var(--line); }
.footer-grid h5{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.15em; text-transform:uppercase; color:var(--yellow); margin-bottom:18px; }
.footer-grid ul{ display:flex; flex-direction:column; gap:10px; font-size:14px; color:var(--text-soft); }
.footer-grid ul a:hover{ color:var(--yellow); }
.footer-grid p{ color:var(--text-soft); font-size:14px; line-height:1.6; max-width:320px; margin-top:14px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:12.5px; color:var(--gray); flex-wrap:wrap; gap:12px; }
.socials{ display:flex; gap:14px; }
.socials a{ width:34px; height:34px; border:1px solid var(--line-strong); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s ease, border-color .2s ease; }
.socials a:hover{ background:var(--yellow); border-color:var(--yellow); }
.socials a:hover svg{ stroke:#0C0C0C; }
.socials svg{ width:15px; height:15px; stroke:var(--text); }

/* ---------- Cart Drawer ---------- */
.overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:800; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.overlay.open{ opacity:1; pointer-events:auto; }
.cart-drawer{
  position:fixed; top:0; right:0; height:100%; width:380px; max-width:88vw; background:var(--bg-soft);
  border-left:1.5px solid var(--line-strong); z-index:900; transform:translateX(100%); transition:transform .4s ease;
  display:flex; flex-direction:column;
}
.cart-drawer.open{ transform:translateX(0); }
.cart-head{ display:flex; justify-content:space-between; align-items:center; padding:24px; border-bottom:1.5px solid var(--line); }
.cart-head h3{ font-family:'Big Shoulders Display',sans-serif; font-size:22px; text-transform:uppercase; color:var(--text); }
.cart-close{ background:none; border:none; font-size:22px; cursor:pointer; line-height:1; color:var(--text); }
.cart-items{ flex:1; overflow-y:auto; padding:10px 24px; }
.cart-item{ display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); gap:10px; }
.cart-item div strong{ display:block; font-size:14px; color:var(--text); }
.cart-item div span{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-soft); }
.cart-item button{ background:none; border:1px solid var(--line-strong); width:26px; height:26px; cursor:pointer; font-size:14px; color:var(--text); }
.cart-empty{ padding:40px 0; text-align:center; color:var(--gray-light); font-size:14px; }
.cart-foot{ padding:22px 24px; border-top:1.5px solid var(--line); }
.cart-total{ display:flex; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-weight:700; margin-bottom:16px; font-size:15px; color:var(--text); }
.cart-foot .btn{ width:100%; justify-content:center; }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; }
  .press-mark{ max-width:260px; margin-top:20px; }
  .docket-grid{ grid-template-columns:repeat(2,1fr); }
  .shop-grid, .shop-teaser-grid{ grid-template-columns:repeat(2,1fr); }
  .process-list{ grid-template-columns:repeat(2,1fr); }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; }
  .gallery-grid figure:nth-child(1){ grid-column:span 2; }
  .contact-grid{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .nav-links{ position:fixed; top:0; right:0; height:100vh; width:70vw; background:var(--bg-soft); flex-direction:column; padding:110px 30px; gap:26px; transform:translateX(100%); transition:transform .35s ease; box-shadow:-4px 0 16px rgba(0,0,0,0.4); border-left:1.5px solid var(--line); }
  .nav-links.open{ transform:translateX(0); }
  .menu-toggle{ display:flex; }
  .docket-grid{ grid-template-columns:1fr; }
  .shop-grid, .shop-teaser-grid{ grid-template-columns:1fr 1fr; }
  section{ padding:80px 0; }
}
@media (max-width:480px){
  .shop-grid, .shop-teaser-grid{ grid-template-columns:1fr; }
  .wrap{ padding:0 20px; }
}

/* ---------- Load More ---------- */
.load-more-wrap{
  display:flex; justify-content:center; margin-top:36px;
}
.load-more-wrap.hidden{ display:none; }


/* ---------- Checkout modal ---------- */
.checkout-modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.95);
  width:420px; max-width:90vw; max-height:85vh; overflow-y:auto;
  background:var(--bg-soft); border:1.5px solid var(--line-strong); border-radius:4px;
  z-index:1000; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}
.checkout-modal.open{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
.checkout-modal-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 24px; border-bottom:1.5px solid var(--line);
}
.checkout-modal-head h3{ font-size:20px; text-transform:uppercase; color:var(--text); }
#checkoutForm{ padding:22px 24px; display:flex; flex-direction:column; gap:16px; }
.checkout-label{
  display:flex; flex-direction:column; gap:6px;
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.04em;
  text-transform:uppercase; color:var(--gray-light);
}
.checkout-label textarea,
.checkout-label input{
  font-family:'Inter',sans-serif; font-size:14px; color:var(--text);
  background:var(--surface); border:1.5px solid var(--line-strong); border-radius:2px;
  padding:10px 12px; resize:vertical; outline:none; transition:border-color .2s ease;
}
.checkout-label textarea:focus,
.checkout-label input:focus{ border-color:var(--yellow); }
.checkout-form-note{ font-size:12px; color:var(--gray-light); line-height:1.5; }
.checkout-form-error{
  font-size:12.5px; color:#e05656; display:none;
}
.checkout-form-error.show{ display:block; }
#checkoutForm .btn{ width:100%; justify-content:center; }