@charset "utf-8";
/* ==========================================================================
   SIMPLE N EASY ELECTRONICS  -  "Circuit Pop" redesign layer (loaded last)
   Logo palette: navy + orange. Look: paper-white with a dotted grid, 2px navy
   outlines, hard offset shadows that "press" on hover, chunky Space Grotesk
   headings and highlighter-style accents. Buttons: orange gradient that wipes
   to a navy gradient on hover.
   ========================================================================== */

:root {
  --bg: #faf8ff;
  --surface: #ffffff;
  --surface-2: #f1edff;
  --ink: #1a1147;
  --ink-2: #453f7a;
  --muted: #7a75a8;
  --line: #e2dcf5;
  --accent: #6d4aff;            /* electric violet */
  --accent-2: #4a2fd0;          /* deep violet */
  --accent-3: #ffd84a;          /* highlighter yellow */
  --accent-soft: #ece6ff;       /* lilac */
  --sky: #d9f3ea;               /* mint */
  --peach: #ffe0e8;
  --sun-soft: #fff1b8;
  --grad: linear-gradient(120deg, #fff08a 0%, #ffd84a 55%, #ffb82e 100%);
  --grad-violet: linear-gradient(135deg, #9a80ff 0%, #6d4aff 55%, #4a2fd0 100%);
  /* 200% wide: default = yellow gradient, hover wipes to violet gradient */
  --btn-grad: linear-gradient(90deg, #fff08a 0%, #ffe14f 26%, #ffc93a 48%, #ffb82e 50%, #8f73ff 50%, #6d4aff 74%, #3d24b8 100%);
  --shadow-sm: 0 2px 10px rgba(26, 17, 71, .06);
  --shadow: 6px 6px 0 var(--ink);
  --shadow-coral: 4px 4px 0 var(--ink);
  --radius: 22px;
  --f-head: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  --f-body: "DM Sans", "Plus Jakarta Sans", system-ui, sans-serif;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--f-body); color: var(--ink-2); background: var(--bg);
  background-image: radial-gradient(rgba(26, 17, 71, .09) 1.2px, transparent 1.4px); background-size: 26px 26px;
}
::selection { background: var(--accent); color: var(--ink); }
p { color: var(--ink-2); }

/* ---------- scroll reveal ---------- */
.has-reveal .rv { opacity: 0; transform: translateY(34px); transition: opacity .75s cubic-bezier(.2, .7, .2, 1) var(--rv-delay, 0ms), transform .75s cubic-bezier(.2, .7, .2, 1) var(--rv-delay, 0ms); }
.has-reveal .rv.in { opacity: 1; transform: none; }
.has-reveal .prodbox-row.rv { transition: opacity .75s cubic-bezier(.2, .7, .2, 1) var(--rv-delay, 0ms), transform .75s cubic-bezier(.2, .7, .2, 1) var(--rv-delay, 0ms), box-shadow .3s ease, border-color .3s ease; }
.has-reveal .prodbox-row.rv.in:hover { transform: translate(-5px, -5px); }

/* ---------- headings ---------- */
h1, h2, h3, h4, .prodbx-head, .prodbx-prc, .prod-nameHdng, .common-head1, .common-head2 {
  font-family: var(--f-head); font-weight: 700; letter-spacing: -.025em; color: var(--ink); text-transform: none; line-height: 1.04;
}
h1 { font-size: clamp(2.7rem, 5.6vw, 5rem); }
h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); }
h3 { font-size: 1.25rem; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 7px 14px 7px 12px;
  font-family: var(--f-head); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  background: var(--accent-soft); border: 2px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink);
}
.eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 0 rgba(255, 216, 74, .6); animation: ping 1.8s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(255, 190, 30, .8); } 100% { box-shadow: 0 0 0 9px rgba(255, 190, 30, 0); } }

/* highlighter marker on hero + section words */
.hero h1 span {
  font-style: normal; color: var(--ink); -webkit-text-fill-color: var(--ink); padding: 0 .08em;
  background: linear-gradient(100deg, #fff08a, #ffd84a 60%, #ffb82e) no-repeat 0 88% / 100% .42em;
  animation: marker 1.1s .3s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes marker { from { background-size: 0 .42em; } to { background-size: 100% .42em; } }

/* ==========================================================================
   BUTTONS  -  orange gradient tile, navy outline + hard shadow.
   Hover: gradient wipes to navy, text turns white, button "presses" down.
   ========================================================================== */
.shop-btn, .submit, .submit-btn, .continue-shpbtn, #browse, .yes-btn, a.add-to-cart, .proceed-chkbtn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 56px; padding: 0 26px; line-height: 1; margin-top: 30px;
  font-family: var(--f-head); font-size: 1rem; font-weight: 700; letter-spacing: .02em; text-transform: capitalize; text-align: center;
  color: var(--ink); -webkit-text-fill-color: var(--ink);
  background: var(--btn-grad); background-size: 200% 100%; background-position: 0 0;
  border: 2px solid var(--ink); border-radius: 14px; box-shadow: 5px 5px 0 var(--ink);
  transition: background-position .55s cubic-bezier(.7, 0, .2, 1), color .35s ease .12s, transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s cubic-bezier(.2, .8, .2, 1);
  cursor: pointer;
}
.shop-btn { width: auto; min-width: 240px; }
.shop-btn::before { display: none; }
.shop-btn:hover, .submit:hover, .submit-btn:hover, .continue-shpbtn:hover, #browse:hover, .yes-btn:hover, a.add-to-cart:hover, .proceed-chkbtn:hover {
  background: var(--btn-grad); background-size: 200% 100%; background-position: 100% 0; color: #fff; -webkit-text-fill-color: #fff;
  transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--ink); transition-delay: 0s, 0s, 0s, 0s;
}
.shop-btn:active, .submit:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink); }
.shop-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.submit { width: 100%; height: 64px; margin-top: 24px; font-size: 1.25rem; border-radius: 14px; }
.submit-btn { width: 100%; }
.continue-shpbtn, #browse { height: 46px; padding: 0 22px; margin: 10px 8px 0 0; font-size: .95rem; float: none; border: 2px solid var(--ink); }
a.add-to-cart { width: min(320px, 100%); float: none; margin: 26px 0 0; }
.yes-btn { height: 44px; margin: 0; box-shadow: 3px 3px 0 var(--ink); border-color: #fff; }
.no-btn {
  height: 44px; padding: 0 22px; margin: 0; font-family: var(--f-head); font-weight: 700; font-size: .95rem; background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .6); border-radius: 14px; transition: all .25s ease;
}
.no-btn:hover { background: rgba(255, 255, 255, .14); border-color: #fff; transform: translateY(-2px); }

/* cookie bar */
.pop-up-bg { background: rgba(26, 17, 71, .6); }
.pop-up-bg-in { background: var(--ink); border-top: 3px solid var(--accent-3); }
.pop-up-left-txt span { font-family: var(--f-head); color: var(--accent-3); }
.pop-btn { display: inline-flex; gap: 10px; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav-sec { background: #fff; border-bottom: 2px solid var(--ink); backdrop-filter: none; }
.fixed-nav .nav-sec { box-shadow: 0 6px 0 rgba(26, 17, 71, .08); }
ul.menu-list { align-items: center; gap: 6px; margin: 11px 0 0; }
@media only screen and (min-width: 768px) { ul.menu-list { display: flex; } }
ul.menu-list li { margin: 0; }
ul.menu-list li a {
  position: relative; display: inline-block; padding: 9px 16px; font-family: var(--f-head); font-size: .95rem; font-weight: 600; letter-spacing: .01em; color: var(--ink);
  border: 2px solid transparent; border-radius: 12px; transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
ul.menu-list li a:hover { background: var(--accent-soft); border-color: var(--ink); transform: translateY(-2px); }
ul.menu-list li:last-child a {
  display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; padding: 9px 18px; color: var(--ink);
  background: var(--btn-grad); background-size: 200% 100%; background-position: 0 0; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  transition: background-position .5s cubic-bezier(.7, 0, .2, 1), color .3s ease .1s, transform .2s ease, box-shadow .2s ease;
}
ul.menu-list li:last-child a::before {
  content: ""; width: 17px; height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310163f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l1 13H5L6 7z'/%3E%3Cpath d='M9 10V6a3 3 0 0 1 6 0v4'/%3E%3C/svg%3E") center / contain no-repeat; transition: filter .3s ease;
}
ul.menu-list li:last-child a:hover { background-position: 100% 0; color: #fff; transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); border-color: var(--ink); }
ul.menu-list li:last-child a:hover::before { filter: brightness(0) invert(1); }
.mob-mnu-ic .bar1, .mob-mnu-ic .bar2, .mob-mnu-ic .bar3 { background: var(--ink); }
.mobilemenu { background: #fff; border-top: 2px solid var(--ink); }
.mobilemenu li a { font-family: var(--f-head); font-weight: 600; color: var(--ink); }
.mobilemenu li a:hover { color: var(--accent-2); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; overflow: visible; padding: 80px 0 110px; background: transparent; }
.hero::before, .hero::after { display: none; }
/* drifting shapes in the back */
.hero-grid { position: relative; }
.hero-grid::before, .hero-grid::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
}
.hero-grid::before { width: 130px; height: 130px; left: 44%; top: -52px; border: 3px dashed rgba(74, 47, 208, .35); border-radius: 50%; animation: spinSlow 30s linear infinite; }
.hero-grid::after { width: 74px; height: 74px; right: 46%; bottom: -30px; background: var(--accent-3); border: 2px solid var(--ink); border-radius: 16px; transform: rotate(14deg); animation: bob 5s ease-in-out infinite; }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.hero h1 { max-width: 620px; }
.lead { font-size: 1.15rem; line-height: 1.65; color: var(--ink-2); max-width: 500px; }
.hero .shop-btn { margin-top: 34px; }

.hero-img { overflow: visible; border-radius: 26px; box-shadow: none; aspect-ratio: auto; transform: rotate(2deg); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.hero-img::after { display: none; }
.hero-img img {
  display: block; height: auto; aspect-ratio: 7 / 6; object-fit: cover; border: 3px solid var(--ink); border-radius: 26px; background: #fff;
  box-shadow: 14px 14px 0 var(--accent), 14px 14px 0 3px var(--ink);
}
.hero-img:hover { transform: rotate(0deg) translate(-4px, -4px); }
.hero-img.show-mob { transform: none; margin: 20px 0; }

.sticker { position: absolute; z-index: 3; right: -34px; bottom: -56px; width: 138px; height: 138px; display: grid; place-items: center; color: var(--ink); }
.sticker::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--grad); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.sticker-ring { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); animation: spinSlow 14s linear infinite; }
.sticker-ring text { font-family: var(--f-head); font-weight: 700; font-size: 11.4px; letter-spacing: .09em; fill: var(--ink); }
.sticker-bolt { position: relative; width: 38px; height: 38px; color: var(--ink); }

/* ==========================================================================
   TRUST STRIP
   ========================================================================== */
.strip { background: var(--ink); border-block: 3px solid var(--accent-3); padding: 18px 0; }
.strip-inner { font-family: var(--f-head); font-weight: 600; font-size: 1rem; letter-spacing: .01em; color: #fff; }
.strip-inner div { padding: 4px 22px 4px 0; position: relative; }
.strip-inner div + div::before { content: ""; position: absolute; left: -22px; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: var(--accent); transform: rotate(45deg); }
.strip-inner img { max-width: 42px; padding: 6px; background: #fff; border-radius: 12px; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.strip-inner div:hover img { transform: rotate(-10deg) scale(1.1); }

/* ==========================================================================
   INTRO
   ========================================================================== */
.intro { background: transparent; padding: 100px 0 60px; }
.intro-img { overflow: visible; border-radius: 26px; box-shadow: none; aspect-ratio: auto; }
.intro-img::after { display: none; }
.intro-img img { display: block; height: auto; aspect-ratio: 4 / 4; border: 3px solid var(--ink); border-radius: 26px; box-shadow: 12px 12px 0 var(--accent-3), 12px 12px 0 3px var(--ink); transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease; }
.intro-img:hover img { transform: translate(-4px, -4px); box-shadow: 16px 16px 0 var(--accent-3), 16px 16px 0 3px var(--ink); }
.intro-img-badge {
  left: auto; right: -20px; bottom: -24px; z-index: 2; padding: 14px 20px; text-align: left; background: #fff; backdrop-filter: none;
  border: 2px solid var(--ink); border-radius: 16px; box-shadow: 4px 4px 0 var(--ink); transform: rotate(-3deg);
}
.intro-img-badge span { color: var(--muted); font-family: var(--f-head); }
.intro-img-badge b { font-family: var(--f-head); font-size: 1.3rem; background: var(--grad-violet); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.intro-copy h2 { margin-bottom: 16px; }
.intro-copy p { color: var(--ink-2); line-height: 1.75; }
.intro-card {
  position: relative; padding: 26px 28px 26px 32px; background: #fff; border: 2px solid var(--ink); border-radius: 18px; box-shadow: 5px 5px 0 var(--ink);
}
.intro-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; border-radius: 16px 0 0 16px; background: var(--grad); }
.intro-card h3 { background: none; -webkit-text-fill-color: var(--ink); color: var(--ink); }

/* ==========================================================================
   BENEFITS  -  bento tiles
   ========================================================================== */
.benefit-sec { padding: 40px 0 100px; }
.benefit-grid { gap: 22px; }
.benefit {
  position: relative; overflow: hidden; padding: 28px 24px 26px; background: #fff; border: 2px solid var(--ink); border-radius: 22px; box-shadow: 5px 5px 0 var(--ink);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s cubic-bezier(.2, .8, .2, 1);
}
.benefit:nth-child(1) { background: var(--sun-soft); }
.benefit:nth-child(2) { background: var(--accent-soft); }
.benefit:nth-child(3) { background: var(--ink); }
.benefit:nth-child(4) { background: var(--sky); }
.benefit:nth-child(3) h3 { color: #fff; }
.benefit:nth-child(3) p { color: rgba(255, 255, 255, .78); }
.benefit:hover { transform: translate(-5px, -5px); box-shadow: 10px 10px 0 var(--accent); border-color: var(--ink); }
.benefit .icon { width: 62px; height: 62px; margin-bottom: 20px; background: var(--grad); border: 2px solid var(--ink); border-radius: 18px 6px 18px 6px; box-shadow: 3px 3px 0 var(--ink); transition: transform .4s cubic-bezier(.2, .8, .2, 1), border-radius .4s ease; }
.benefit:hover .icon { transform: rotate(-8deg) scale(1.08); border-radius: 6px 18px 6px 18px; }
.benefit h3 { font-family: var(--f-head); font-size: 1.3rem; }
.benefit p { font-size: .95rem; line-height: 1.6; }

/* ==========================================================================
   PRODUCT BOXES
   ========================================================================== */
.section3 { float: left; width: 100%; padding: 100px 0 110px; background: var(--ink); position: relative; overflow: hidden; }
.section3::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .12) 1.2px, transparent 1.4px); background-size: 26px 26px; }
.section3::after { content: ""; position: absolute; right: -8%; top: -20%; width: 46vw; height: 46vw; border-radius: 50%; background: radial-gradient(circle, rgba(122, 92, 255, .5), transparent 62%); pointer-events: none; animation: driftG 9s ease-in-out infinite alternate; }
@keyframes driftG { to { transform: translate(-16vw, 14%) scale(1.15); } }
.section3 .container { position: relative; z-index: 1; }
.section3 h2 { color: #fff; }
.section3 .eyebrow { background: var(--accent-3); }

.prodBox { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin-top: 50px; }
.prodbox-row {
  position: relative; float: none; width: auto; display: flex; flex-direction: column; padding: 14px 14px 22px; overflow: visible;
  background: #fff; border: 2px solid var(--ink); border-radius: 24px; box-shadow: 6px 6px 0 var(--accent);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s cubic-bezier(.2, .8, .2, 1);
}
.prodbox-row:hover { transform: translate(-5px, -5px); box-shadow: 11px 11px 0 var(--accent-3); border-color: var(--ink); }
.prodbox-row:nth-child(1) { --plate: #fff1b8; }
.prodbox-row:nth-child(2) { --plate: #ece6ff; }
.prodbox-row:nth-child(3) { --plate: #ffdfe8; }
.prodbox-row:nth-child(4) { --plate: #d9f3ea; }
.prd-img-bg {
  position: relative; float: none; width: 100%; height: 250px; display: grid; place-items: center; overflow: hidden; border: 2px solid var(--ink); border-radius: 16px;
  background: radial-gradient(circle at 50% 45%, #fff 0, rgba(255, 255, 255, 0) 62%), var(--plate, #fff1b8);
}
.prd-img-bg::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(26, 17, 71, .12) 1.2px, transparent 1.4px); background-size: 16px 16px; opacity: .6; }
.prod-1 { position: relative; z-index: 1; max-width: 84%; max-height: 210px; width: auto; height: auto; margin: 0 auto; object-fit: contain; filter: drop-shadow(0 14px 12px rgba(26, 17, 71, .22)); animation: prodBob 4.6s ease-in-out infinite; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.prodbox-row:nth-child(2) .prod-1 { animation-delay: .5s; }
.prodbox-row:nth-child(3) .prod-1 { animation-delay: 1s; }
.prodbox-row:nth-child(4) .prod-1 { animation-delay: 1.5s; }
@keyframes prodBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.prodbox-row:hover .prod-1 { transform: scale(1.08) rotate(-3deg); }
/* sticker tag */
.tag {
  position: absolute; z-index: 3; top: -12px; left: 18px; margin: 0; padding: 7px 14px; transform: rotate(-4deg);
  font-family: var(--f-head); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  background: var(--grad); border: 2px solid var(--ink); border-radius: 8px; box-shadow: 2px 2px 0 var(--ink);
}
.prodbx-head { float: none; margin-top: 20px; font-size: 1.28rem; line-height: 1.12; }
.prodbx-para { float: none; flex: 1; margin-top: 10px; font-size: .92rem; line-height: 1.6; color: var(--ink-2); }
.ord-bx { float: none; margin-top: 14px; }
.prodbx-prc { float: none; font-size: 1.55rem; line-height: 1.1; color: var(--ink); }
.prodbox-row .clearall { display: none; }
.prodBox-list .prodbox-row a.shop-btn { width: 100%; min-width: 0; margin: 16px 0 0; height: 52px; }

/* ==========================================================================
   WHY
   ========================================================================== */
.why {
  position: relative; overflow: hidden; padding: 100px 0 110px; background: var(--accent); background-image: linear-gradient(135deg, #8f73ff 0%, #6d4aff 50%, #4a2fd0 100%); background-attachment: scroll; color: #fff;
}
.why::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .16) 1.4px, transparent 1.6px); background-size: 26px 26px; }
.why .container { position: relative; z-index: 1; }
.why h2 { color: #fff; }
.why .eyebrow { background: #fff; color: var(--ink); backdrop-filter: none; }
.why .center p { color: #fff; }
.why-grid { gap: 26px; margin-top: 50px; }
.why-card {
  position: relative; padding: 38px 34px 34px; text-align: left; color: var(--ink); background: #fff; backdrop-filter: none; border: 2px solid var(--ink); border-radius: 24px; box-shadow: 7px 7px 0 var(--ink);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s cubic-bezier(.2, .8, .2, 1), background .3s ease;
}
.why-card:hover { transform: translate(-5px, -5px); box-shadow: 12px 12px 0 var(--ink); background: #fff; }
.why-card h3 { color: var(--ink); font-size: 1.45rem; }
.why-card p { color: var(--ink-2); font-size: 1rem; line-height: 1.65; }
.why-num { display: inline-grid; place-items: center; min-width: 62px; height: 62px; padding: 0 12px; margin-bottom: 20px; font-family: var(--f-head); font-size: 1.7rem; font-weight: 700; color: #fff; background: var(--ink); border-radius: 18px 6px 18px 6px; transition: transform .4s cubic-bezier(.2, .8, .2, 1), background .3s ease; }
.why-card:hover .why-num { transform: rotate(-6deg) scale(1.08); background: var(--accent-2); }

/* ==========================================================================
   INNER PAGES
   ========================================================================== */
.prodBreadcrm {
  padding: 14px 0 16px; position: relative; background: var(--accent-soft); border-bottom: 2px solid var(--ink); letter-spacing: 0;
}
.prodBreadcrm p, .prodBreadcrm p a { font-family: var(--f-head); font-size: .9rem; font-weight: 600; color: var(--ink); }
.prodBreadcrm p a:hover { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }

/* product detail */
.prod-dtls1-slide { border: 2px solid var(--ink); border-radius: 24px; background: #fff; box-shadow: 8px 8px 0 var(--accent); }
.prod-nameHdng { font-size: clamp(2rem, 3.4vw, 2.8rem); color: var(--ink); }
.prod-nameHdng span, .prod-nmhd1 { font-family: var(--f-head); font-weight: 700; color: var(--ink); background: var(--accent-soft); border: 2px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink); }
.details-para, .proDetls1-rgt-pnts li { font-family: var(--f-body); color: var(--ink-2); }
.pkg-bx { border: 2px solid var(--ink); border-radius: 18px; box-shadow: 4px 4px 0 var(--ink); background: #fff; animation: none; transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s cubic-bezier(.2, .8, .2, 1), background .25s ease; }
.pkg-bx:hover { animation: none; border: 2px solid var(--ink); box-shadow: 7px 7px 0 var(--accent); transform: translate(-3px, -3px); }
.pkg-bx.addprice { animation: none; border: 2px solid var(--ink); background: linear-gradient(160deg, #fff1b8, #ffe066); box-shadow: 7px 7px 0 var(--ink); transform: translate(-3px, -3px); }
.pck-prc p, p.price, .price { font-family: var(--f-head); font-weight: 700; color: var(--ink); }
.select-txt, .prd-txt1 { font-family: var(--f-head); font-weight: 700; color: var(--ink); }

/* cart / checkout */
.safebox { display: block; padding: 14px 22px; color: #fff; background: var(--ink); border: 2px solid var(--ink); border-bottom: 4px solid var(--accent-3); border-radius: 16px 16px 0 0; }
.safebox p { font-family: var(--f-head); font-size: 1.3rem; font-weight: 700; color: #fff; margin: 0; float: none; width: auto; }
.frm1, .frm2 { padding: 22px 20px 12px; background: #fff; border: 2px solid var(--ink); border-top: 0; border-radius: 0 0 16px 16px; }
.frmElmnts label { font-family: var(--f-body); font-weight: 600; color: var(--ink); }
.frmfld, .frmfld1 { border-radius: 12px; }
.frmfld input, .frmfld select, .frmfld1 input, .frmfld1 select, .frm1 .frmfld input, .frm1 .frmfld select { border: 2px solid var(--ink); border-radius: 12px; font-family: var(--f-body); background-color: #fff; transition: box-shadow .25s ease, border-color .25s ease; }
.frmfld input:focus, .frmfld select:focus, .frmfld1 input:focus, .frmfld1 select:focus { border-color: var(--accent-2); box-shadow: 4px 4px 0 var(--accent); outline: 0; }
.trm a, a.what, .agreetxt a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
input[type=checkbox] { accent-color: var(--accent); }
.cart-smry, .crt-smry-hdng { font-family: var(--f-head); }

/* contact + terms */
.contact-sec .common-head2, .common-head2, .trm-bx h1, .trm-bx h3 { font-family: var(--f-head); font-weight: 700; color: var(--ink); }
.cont-sec1Lft h4, .cntc-inr h4 { font-family: var(--f-head); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer { position: relative; float: left; width: 100%; padding: 60px 0 34px; background: var(--ink); border-top: 6px solid var(--accent-3); color: #fff; }
footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .1) 1.2px, transparent 1.4px); background-size: 26px 26px; }
footer .container { position: relative; z-index: 1; }
footer .foo-logo { padding: 8px 14px; background: #fff; border-radius: 12px; }
.ftr-nav li, .ftr-nav li a, footer p, .other-links li a { font-family: var(--f-body); color: rgba(255, 255, 255, .86); }
.ftr-nav li a { border-bottom: 1px solid rgba(255, 216, 74, .6); }
.other-links li a { position: relative; font-family: var(--f-head); font-weight: 600; color: #fff; transition: color .2s ease; }
.other-links li a:hover { color: var(--accent-3); }
.other-links li { border-color: rgba(255, 216, 74, .5); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media only screen and (max-width: 1100px) {
  .prodBox { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media only screen and (max-width: 767px) {
  .hero { padding: 40px 0 70px; }
  .hero-grid::before, .hero-grid::after { display: none; }
  .hero h1 { font-size: clamp(2.5rem, 12vw, 3.4rem); }
  .hero .shop-btn { width: 100%; }
  .hero-img.show-mob img { box-shadow: 8px 8px 0 var(--accent), 8px 8px 0 3px var(--ink); }
  .sticker { display: none; }
  .intro { padding: 60px 0 30px; }
  .intro-img img { box-shadow: 8px 8px 0 var(--accent-3), 8px 8px 0 3px var(--ink); }
  .intro-img-badge { right: 8px; bottom: -18px; }
  .benefit-sec { padding: 30px 0 60px; }
  .section3, .why { padding: 64px 0 72px; }
  .prodBox { grid-template-columns: 1fr; gap: 30px; }
  .why-card { text-align: left; }
  .strip-inner div + div::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* keep the desktop/mobile duplicates from showing together (.eyebrow display was overriding .show-mob) */
.eyebrow.show-mob { display: none; }
@media only screen and (max-width: 767px) {
  .eyebrow.show-mob { display: inline-flex; }
  .eyebrow.hide-mob { display: none; }
}

/* decorative offsets must never cause sideways scroll */
.hero, .intro, .benefit-sec, .section3, .why, footer { overflow-x: clip; }

/* selected package box: keep the price readable on the yellow tint */
.pkg-bx .pck-prc, .pkg-bx .pck-prc p, .pkg-bx.addprice .pck-prc, .pkg-bx.addprice .pck-prc p, .pkg-bx p { color: var(--ink); }
.pkg-bx.addprice .pck-prc p { color: var(--accent-2); }