/* ==========================================================================
   CanadaEnvelope · Shared stylesheet
   Clean, practical storefront styling for a Canadian manufacturer.
   ========================================================================== */

:root{
  --ink:#1b3859;
  --ink-soft:#536579;
  --paper:#f7f8fa;
  --paper-card:#f2f5f8;
  --kraft:#9a6538;
  --stamp:#ed2939;
  --accent:#ed2939;
  --accent2:#c91f2d;
  --charcoal:#26384b;
  --line:#d9e0e7;
  --line-soft:#e9edf1;
  --white:#fff;
  --radius:3px;
  --shadow:0 8px 20px rgba(27,56,89,0.10);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Source Sans 3',Arial,sans-serif;
  background:var(--paper); color:var(--charcoal);
  padding-top:122px;
}
h1,h2,h3,.serif{ font-family:'Source Sans 3',Arial,sans-serif; }
.mono{ font-family:'Source Sans 3',Arial,sans-serif; letter-spacing:0.02em; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }

.page{ max-width:1240px; margin:0 auto; padding:0 28px; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* ---------------- top nav (Amazon-style dual bar) ---------------- */
.site-header{ position:fixed; top:0; left:0; width:100%; z-index:200; box-shadow:0 3px 14px rgba(29,59,93,0.14); }
.topbar{
  background:#fff; color:#1b3859; border-top:4px solid #ed2939;
  display:flex; align-items:center; justify-content:space-between; gap:28px; padding:8px 28px; height:78px;
}
.brand{
  display:inline-flex; align-items:center; gap:10px; color:#1b3859;
  text-decoration:none; white-space:nowrap; flex:0 0 auto;
}
.brand-mark{
  width:60px; height:56px; flex:0 0 60px; border-radius:5px;
  background:#fff url('canada-envelope-logo.jpg?v=brand3') center 38% / 118px auto no-repeat;
}
.brand-name{
  font-family:'Source Sans 3',Arial,sans-serif; font-size:1.3rem; font-weight:700;
  letter-spacing:0.02em; text-transform:uppercase;
}
.brand-envelope{ color:#ed2939; }
.topbar-links{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.topbar-links a{
  text-decoration:none; color:#1b3859; font-size:0.9rem; font-weight:600;
  display:inline-flex; align-items:center; gap:7px; line-height:1; white-space:nowrap;
  padding:9px 10px; border-radius:4px; transition:color .15s, background .15s;
}
.topbar-links a:hover, .topbar-links a[aria-current="page"]{ color:#ed2939; background:#f4f6f8; }
.nav-symbol{ min-width:20px; text-align:center; font-size:1.08rem; line-height:1; }
.cart-link{ position:relative; }
.cart-badge{
  display:none; align-items:center; justify-content:center;
  background:#ed2939; color:#fff; font-size:0.7rem; font-weight:700;
  min-width:18px; height:18px; border-radius:20px; padding:0 5px;
}
.deptbar{
  background:#ed2939; height:44px; display:flex; align-items:center;
  gap:26px; padding:0 24px; overflow-x:auto;
  border-bottom:3px solid #1b3859;
}
.deptbar a{
  color:var(--white); text-decoration:none; font-size:0.92rem; font-weight:600;
  white-space:nowrap; opacity:0.88;
}
.deptbar a:hover, .deptbar a.active{ opacity:1; border-bottom:2px solid #1b3859; padding-bottom:2px; }
.deptbar .quote-nav-link{
  margin-left:4px; padding:7px 13px; color:#ed2939; background:#fff; border:1px solid rgba(255,255,255,0.9);
  border-radius:3px; opacity:1; font-weight:700; box-shadow:0 1px 3px rgba(27,56,89,0.18);
}
.deptbar .quote-nav-link:hover, .deptbar .quote-nav-link[aria-current="page"]{
  color:#930d15; background:#fff; border-bottom:1px solid rgba(255,255,255,0.9); padding-bottom:7px;
  box-shadow:0 2px 6px rgba(27,56,89,0.25);
}
.nav-toggle{ display:none; }

@media (max-width:900px){
  body{ padding-top:122px; }
  .topbar{ padding:8px 16px; gap:12px; }
  .brand-mark{ width:50px; height:48px; flex-basis:50px; background-size:108px auto; }
  .brand-name{ font-size:1.05rem; }
  .topbar-links{ gap:2px; }
  .topbar-links a{ padding:8px 7px; font-size:0.76rem; }
  .deptbar{ padding:0 16px; gap:16px; }
}
@media (max-width:620px){
  .topbar{ height:78px; }
  .brand{ gap:5px; }
  .brand-mark{ width:44px; height:44px; flex-basis:44px; background-size:100px auto; }
  .brand-name{ font-size:0.9rem; letter-spacing:0; }
  .topbar-links a{ gap:3px; padding:8px 5px; }
  .nav-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .nav-symbol{ font-size:1.2rem; }
}

/* ---------------- footer ---------------- */
.site-footer{ border-top:1px solid var(--line); padding:40px 0 60px; margin-top:60px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; }
.footer-grid h4{ font-family:'Source Sans 3',Arial,sans-serif; font-size:0.82rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--stamp); margin-bottom:12px; }
.footer-grid p, .footer-grid a{ font-size:0.88rem; color:var(--ink-soft); line-height:1.9; text-decoration:none; display:block; }
.footer-grid a:hover{ color:var(--ink); }
.footer-note{ text-align:center; padding-top:30px; margin-top:30px; border-top:1px solid var(--line-soft); font-size:0.82rem; color:var(--ink-soft); font-family:'Source Sans 3',Arial,sans-serif; }
@media (max-width:700px){ .footer-grid{ grid-template-columns:1fr; gap:26px; } }

/* ---------------- buttons ---------------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:3px; padding:12px 22px; font-weight:600; font-size:0.9rem; cursor:pointer; text-decoration:none; border:1px solid transparent; transition:transform .15s, box-shadow .15s, background .15s; }
.btn-primary{ background:var(--stamp); color:#fff; }
.btn-primary:hover{ background:#930d15; }
.btn-accent{ background:var(--stamp); color:var(--white); }
.btn-accent:hover{ transform:translateY(-1px); background:#930d15; box-shadow:0 8px 18px rgba(181,18,27,0.24); }
.btn-ink{ background:var(--ink); color:#fff; }
.btn-ink:hover{ background:var(--ink-soft); }
.btn-ghost{ background:#fff; border-color:var(--line); color:var(--ink-soft); }
.btn-ghost:hover{ border-color:var(--ink); color:var(--ink); }
.btn-block{ width:100%; }
.btn-sm{ padding:8px 14px; font-size:0.8rem; }

/* ---------------- breadcrumb ---------------- */
.breadcrumb{ font-size:0.82rem; color:var(--ink-soft); margin:20px 0 10px; }
.breadcrumb a{ text-decoration:none; color:var(--ink-soft); }
.breadcrumb a:hover{ color:var(--ink); text-decoration:underline; }
.breadcrumb .sep{ margin:0 6px; opacity:0.5; }

/* ---------------- hero (home) ---------------- */
.hero{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:44px; align-items:center; padding:44px 0 50px; }
.hero-eyebrow{ font-family:'Source Sans 3',Arial,sans-serif; font-size:0.8rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--stamp); display:inline-block; margin-bottom:16px; }
.hero h1{ font-size:clamp(2.1rem,4.4vw,3.25rem); font-weight:700; line-height:1.05; color:var(--ink); letter-spacing:-0.025em; }
.hero p{ font-size:1.05rem; color:var(--ink-soft); max-width:480px; margin-top:18px; line-height:1.6; }
.hero-ctas{ margin-top:28px; display:flex; gap:12px; flex-wrap:wrap; }
.hero-art{ display:flex; align-items:center; justify-content:center; }
.hero-machine{
  position:relative; width:100%; max-width:560px; overflow:hidden; padding:12px;
  background:#eef2f5; border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); isolation:isolate;
}
.machine-photo-wrap{ position:relative; overflow:hidden; aspect-ratio:16/10; border-radius:6px; background:#d7dde2; }
.machine-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.82) contrast(1.04); opacity:0; }
.machine-photo:nth-of-type(1){ animation:machine-frame-feed 12s ease-in-out infinite; }
.machine-photo:nth-of-type(2){ animation:machine-frame-fold 12s ease-in-out infinite; }
.machine-photo:nth-of-type(3){ animation:machine-frame-finish 12s ease-in-out infinite; }
.machine-photo-wrap::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(18,35,50,.05),transparent 45%,rgba(18,35,50,.22)); }
.machine-photo-shine{ position:absolute; top:0; bottom:0; left:-24%; width:16%; z-index:2; background:linear-gradient(90deg,transparent,rgba(255,255,255,.27),transparent); transform:skewX(-14deg); animation:machine-light-sweep 6.8s ease-in-out infinite; pointer-events:none; }
.machine-callout{ position:absolute; z-index:4; padding:4px 7px; color:#fff; background:rgba(21,43,62,.78); border-left:3px solid var(--stamp); border-radius:3px; box-shadow:0 3px 8px rgba(0,0,0,.2); font-size:.58rem; font-weight:700; letter-spacing:.08em; opacity:0; }
.machine-callout b{ color:#ffb3ba; margin-right:3px; }
.callout-feed{ left:8%; top:48%; animation:callout-feed 12s ease-in-out infinite; }
.callout-fold{ left:46%; top:34%; animation:callout-fold 12s ease-in-out infinite; }
.callout-finish{ right:7%; top:51%; animation:callout-finish 12s ease-in-out infinite; }
.machine-photo-footer{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 2px 0; color:var(--ink-soft); }
.machine-photo-footer span{ display:inline-flex; align-items:center; gap:6px; font-size:.68rem; font-weight:700; }
.machine-photo-footer span i{ width:7px; height:7px; border-radius:50%; background:#2f9a62; box-shadow:0 0 0 3px rgba(47,154,98,.13); }
.machine-photo-footer small{ font-size:.62rem; text-align:right; }
@keyframes machine-frame-feed{ 0%,27%{ opacity:1; } 34%,100%{ opacity:0; } }
@keyframes machine-frame-fold{ 0%,27%{ opacity:0; } 34%,60%{ opacity:1; } 67%,100%{ opacity:0; } }
@keyframes machine-frame-finish{ 0%,60%{ opacity:0; } 67%,94%{ opacity:1; } 100%{ opacity:0; } }
@keyframes machine-light-sweep{ 0%,18%{ left:-24%; opacity:0; } 28%{ opacity:1; } 60%,100%{ left:116%; opacity:0; } }
@keyframes callout-feed{ 0%,4%{ opacity:0; transform:translateY(4px); } 9%,25%{ opacity:1; transform:translateY(0); } 32%,100%{ opacity:0; transform:translateY(-2px); } }
@keyframes callout-fold{ 0%,33%{ opacity:0; transform:translateY(4px); } 38%,59%{ opacity:1; transform:translateY(0); } 66%,100%{ opacity:0; transform:translateY(-2px); } }
@keyframes callout-finish{ 0%,66%{ opacity:0; transform:translateY(4px); } 71%,93%{ opacity:1; transform:translateY(0); } 100%{ opacity:0; transform:translateY(-2px); } }
@media (max-width:560px){
  .hero-machine{ padding:8px; }
  .machine-photo-footer small{ font-size:.56rem; }
  .machine-callout{ font-size:.5rem; padding:3px 5px; }
}
.envelope-scale-stage{
  position:relative; width:100%; height:100%; min-height:56px; overflow:hidden;
  background-color:#f7f5f0;
  background-image:linear-gradient(rgba(27,56,89,0.045) 1px,transparent 1px),linear-gradient(90deg,rgba(27,56,89,0.045) 1px,transparent 1px);
  background-size:12px 12px;
}
.letter-sheet-reference{
  position:absolute; left:50%; top:45%; z-index:1; transform:translate(-50%,-50%);
  border:1px dashed rgba(27,56,89,0.34); border-radius:2px; background:rgba(255,255,255,0.7);
}
.letter-sheet-reference span{
  position:absolute; right:3px; bottom:2px; color:rgba(27,56,89,0.56);
  font-size:clamp(0.38rem,0.65vw,0.52rem); font-weight:700; letter-spacing:0.02em; white-space:nowrap;
}
.real-envelope-cutout{
  position:absolute; left:50%; top:45%; z-index:2; transform:translate(-50%,-50%);
  overflow:visible; border:0; border-radius:2px; background:transparent;
}
.envelope-photo{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; border-radius:1px; }
.drawn-envelope{
  position:absolute; inset:0; overflow:hidden; border:1px solid rgba(27,42,68,0.28); border-radius:3px;
  background:#fff; box-shadow:0 5px 12px rgba(27,42,68,0.18); isolation:isolate;
}
.drawn-envelope::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg, transparent 49.7%, rgba(27,56,89,0.07) 49.9%, rgba(27,56,89,0.07) 50.1%, transparent 50.3%);
}
.drawn-envelope.kraft-envelope{ background:#c99558; border-color:rgba(112,67,31,0.38); }
.drawn-envelope.kraft-envelope::before{
  background:linear-gradient(90deg, transparent 49.7%, rgba(112,67,31,0.11) 49.9%, rgba(112,67,31,0.11) 50.1%, transparent 50.3%);
}
.drawn-flap{
  position:absolute; left:-1px; right:-1px; top:-1px; height:28%; z-index:2;
  background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(238,241,244,0.98));
  border:0; clip-path:polygon(0 0,100% 0,87% 100%,50% 74%,13% 100%);
  transform-origin:50% 0; box-shadow:0 2px 4px rgba(27,42,68,0.08);
}
.drawn-envelope.kraft-envelope .drawn-flap{ background:linear-gradient(180deg,#d6a86d,#bd8346); border-color:rgba(112,67,31,0.38); }
.drawn-envelope.security-envelope .drawn-flap{ background:linear-gradient(180deg,#fff,#f2f5f7); }
.drawn-fold{ position:absolute; bottom:-1px; width:52%; height:58%; z-index:1; opacity:0.5; pointer-events:none; }
.drawn-fold-left{ left:-7%; clip-path:polygon(0 100%,100% 0,100% 100%); background:rgba(255,255,255,0.42); }
.drawn-fold-right{ right:-7%; clip-path:polygon(0 0,100% 100%,0 100%); background:rgba(27,56,89,0.08); }
.drawn-envelope.kraft-envelope .drawn-fold-left{ background:rgba(255,231,193,0.34); }
.drawn-envelope.kraft-envelope .drawn-fold-right{ background:rgba(112,67,31,0.1); }
.drawn-security-tint{
  position:absolute; left:4%; right:4%; top:7%; height:12%; z-index:3; opacity:0.75;
  background:repeating-linear-gradient(135deg,rgba(110,139,164,0.32) 0 2px,rgba(220,231,239,0.25) 2px 4px);
  border-radius:2px; mix-blend-mode:multiply;
}
.drawn-window{
  position:absolute; left:12%; top:47%; width:31%; height:23%; z-index:3; border:1px solid rgba(27,56,89,0.2); border-radius:5px;
  background:repeating-linear-gradient(135deg,#dce8ef 0 2px,#f8fbfc 2px 4px); box-shadow:inset 0 0 0 2px rgba(255,255,255,0.42);
}
.drawn-window-two{ top:74%; }
.drawn-seal-line{ position:absolute; left:8%; right:8%; bottom:7%; height:1px; z-index:3; background:rgba(27,56,89,0.16); }
.drawn-sheen{ display:none; }
.opening-edge{ position:absolute; left:0; top:0; width:100%; height:3px; background:var(--stamp); box-shadow:0 1px 0 rgba(255,255,255,0.75); }
.true-size-label{
  position:absolute; left:6px; right:6px; bottom:5px; z-index:3; padding:2px 5px;
  overflow:hidden; color:var(--ink); font-size:clamp(0.48rem,0.7vw,0.62rem); font-weight:700;
  line-height:1.2; text-align:center; text-overflow:ellipsis; white-space:nowrap;
  background:rgba(255,255,255,0.9); border:1px solid rgba(27,56,89,0.12); border-radius:2px;
}
@media (max-width:820px){ .hero{ grid-template-columns:1fr; padding:30px 0 20px; } .hero-art{ order:-1; max-width:280px; margin:0 auto 10px; } }

/* ---------------- dept tiles (home) ---------------- */
.section{ padding:44px 0; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:24px; flex-wrap:wrap; }
.section-head h2{ font-size:clamp(1.4rem,2.6vw,1.9rem); color:var(--ink); font-weight:600; }
.section-head a{ font-size:0.86rem; color:var(--stamp); text-decoration:none; font-weight:600; white-space:nowrap; }
.eyebrow{ font-family:'Source Sans 3',Arial,sans-serif; font-size:0.78rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--stamp); display:block; margin-bottom:8px; }

.dept-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.dept-tile{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px;
  text-decoration:none; color:inherit; transition:border-color .15s, box-shadow .15s; display:flex; flex-direction:column; gap:10px;
}
.dept-tile:hover{ border-color:#a9b7c6; box-shadow:var(--shadow); }
.dept-photo{ height:132px; background:#fff; border-radius:3px; overflow:hidden; }
.dept-photo img{ width:100%; height:100%; object-fit:contain; object-position:center; padding:8px; transition:transform .2s ease; }
.dept-tile:hover .dept-photo img{ transform:scale(1.025); }
.dept-tile h3{ font-size:1.02rem; color:var(--ink); font-weight:600; }
.dept-tile p{ font-size:0.82rem; color:var(--ink-soft); line-height:1.5; }
@media (max-width:900px){ .dept-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .dept-grid{ grid-template-columns:1fr; } }

/* ---------------- product grid + cards ---------------- */
.shop-page{ background:#fff; }
.product-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:42px 22px; }
.product-card{
  min-width:0; background:transparent; border:0; border-radius:0; padding:0;
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
}
.product-photo-panel{
  width:100%; aspect-ratio:4/3; overflow:hidden; background:#fff;
  border:1px solid #e3e6e8;
}
.tile-product-photo{ width:100%; height:100%; object-fit:contain; object-position:center; padding:10px; background:#fff; transition:transform .25s ease; }
.tile-product-photo.contain-photo{ object-fit:contain; padding:20px; background:#fff; }
.product-card:hover .tile-product-photo{ transform:scale(1.025); }
.product-card-copy{ display:flex; flex:1; flex-direction:column; padding:15px 2px 0; }
.product-card .fam{ font-family:'Source Sans 3',Arial,sans-serif; font-size:0.7rem; font-weight:700; color:var(--stamp); text-transform:uppercase; letter-spacing:0.055em; }
.product-card h3{ margin-top:7px; font-size:1.02rem; font-weight:700; color:var(--ink); line-height:1.28; }
.product-card .dims{ margin-top:5px; font-size:0.8rem; color:var(--ink-soft); }
.tile-description{
  display:-webkit-box; overflow:hidden; margin-top:8px; color:#697684; font-size:0.79rem; line-height:1.45;
  -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
.product-card .cta-row{ margin-top:14px; display:flex; justify-content:space-between; gap:10px; align-items:center; }
.tile-link{ color:var(--ink); font-size:0.78rem; font-weight:700; white-space:nowrap; }
.product-card:hover h3, .product-card:hover .tile-link{ color:var(--stamp); }
.badge{ display:inline-block; font-size:0.72rem; font-family:'Source Sans 3',Arial,sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:0.03em; padding:3px 8px; border-radius:2px; border:1px solid var(--line); color:var(--ink-soft); }
.badge.tint{ color:var(--accent); border-color:rgba(181,18,27,0.3); }
.badge.kraft{ color:var(--kraft); border-color:rgba(185,131,90,0.4); }
.badge.window{ color:#28657e; border-color:#a9c6d3; }

/* Product families are separated so size, opening and finish never read as one combined item. */
.product-groups{ display:flex; flex-direction:column; gap:52px; }
.product-group{ scroll-margin-top:130px; }
.product-group-head{ display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:18px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.product-group-head h2{ color:var(--ink); font-size:clamp(1.15rem,2vw,1.45rem); font-weight:600; }
.product-group-head p{ color:var(--stamp); font-family:'Source Sans 3',Arial,sans-serif; font-size:0.76rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; white-space:nowrap; }
@media (max-width:560px){
  .product-group-head{ align-items:start; flex-direction:column; gap:5px; }
}

/* ---------------- browse layout (filters + grid) ---------------- */
.browse-layout{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:52px; align-items:start; padding:24px 0 60px; }
.filters{ position:sticky; top:128px; }
.filters h4{ font-family:'Source Sans 3',Arial,sans-serif; font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--stamp); margin:22px 0 10px; }
.filters h4:first-child{ margin-top:0; }
.filter-opt{ display:flex; align-items:center; gap:8px; font-size:0.87rem; padding:5px 0; cursor:pointer; color:var(--ink-soft); }
.filter-opt input{ accent-color:var(--ink); }
.filter-opt.active-label{ color:var(--ink); font-weight:600; }
.filter-primary{ font-weight:600; color:var(--ink); }
.filter-subgroup{ margin:8px 0 12px; }
.filter-parent-option{ color:var(--ink); font-size:0.9rem; font-weight:600; margin-bottom:2px; }
.filter-child{ margin-left:7px; padding-left:12px; border-left:2px solid var(--line); }
.filter-tree-node.depth-0{ margin-bottom:18px; }
.filter-tree-children{ margin:4px 0 0 9px; padding-left:11px; border-left:1px solid var(--line); }
.filter-tree-button{
  display:flex; width:100%; align-items:center; justify-content:space-between; gap:10px;
  padding:5px 0; border:0; background:none; color:var(--ink-soft);
  font:inherit; font-size:0.88rem; font-weight:600; text-align:left; cursor:pointer;
}
.filter-tree-button:hover, .filter-tree-button.active{ color:var(--stamp); }
.filter-caret{ flex:0 0 auto; color:#8190a0; font-size:1.15rem; line-height:1; transition:transform .16s ease; }
.filter-tree-node.is-expanded > .filter-tree-button .filter-caret{ transform:rotate(90deg); }
.filter-tree-children[hidden]{ display:none; }
.depth-0 > .filter-tree-button{ color:var(--ink); font-size:0.96rem; font-weight:700; }
.depth-0 > .filter-tree-button.active{ color:var(--stamp); }
.depth-1 > .filter-tree-button{ color:var(--ink); font-weight:600; }
.depth-2 > .filter-tree-button{ font-size:0.84rem; }
.filter-tree-leaf{ padding:3px 0; font-size:0.84rem; }
.filters .clear-filters{ font-size:0.8rem; color:var(--stamp); background:none; border:none; cursor:pointer; padding:0; text-decoration:underline; margin-top:16px; }
.results-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
.results-head .count{ font-size:0.88rem; color:var(--ink-soft); }
.results-head p{ color:var(--ink-soft); font-size:0.8rem; }
.scale-key{ display:flex; align-items:center; gap:7px; color:var(--ink-soft); font-size:0.76rem; }
.scale-key span{ width:13px; height:17px; border:1px dashed rgba(27,56,89,0.45); background:rgba(255,255,255,0.8); }
.mobile-filter-toggle{ display:none; }
@media (max-width:860px){
  .browse-layout{ grid-template-columns:1fr; }
  .filters{ position:static; display:none; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin-bottom:18px; }
  .filters.open{ display:block; }
  .mobile-filter-toggle{ display:inline-flex; }
  .product-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .product-grid{ grid-template-columns:1fr; gap:34px; }
}

/* ---------------- product detail ---------------- */
.product-detail{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(360px,0.92fr); gap:56px; padding:16px 0 50px; align-items:start; }
.product-media{ min-width:0; max-width:100%; overflow:hidden; }
.product-main-photo{
  display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:4/3;
  overflow:hidden; background:#f3f1ec; border:1px solid var(--line); border-radius:4px;
}
.product-main-photo img{ width:100%; height:100%; object-fit:contain; }
.product-thumbnails{ display:flex; gap:10px; margin-top:12px; overflow-x:auto; padding:2px 2px 7px; }
.product-thumbnail{
  width:76px; height:64px; flex:0 0 76px; padding:0; overflow:hidden; cursor:pointer;
  background:#f3f1ec; border:1px solid var(--line); border-radius:3px;
}
.product-thumbnail img{ width:100%; height:100%; object-fit:cover; }
.product-thumbnail:hover, .product-thumbnail.active{ border-color:var(--stamp); box-shadow:0 0 0 1px var(--stamp); }
.gallery-note{ margin-top:4px; color:var(--ink-soft); font-size:0.78rem; }
.artwork-preview-panel{ min-width:0; max-width:100%; overflow:hidden; margin-top:26px; padding:24px; background:#fff; border:1px solid #d5dce3; border-radius:6px; box-shadow:0 10px 28px rgba(27,56,89,0.08); }
.artwork-preview-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; }
.artwork-preview-head h2{ margin-top:4px; color:var(--ink); font-size:1.35rem; font-weight:700; letter-spacing:-0.01em; }
.preview-status{ display:inline-flex; align-items:center; gap:7px; color:var(--ink-soft); font-size:0.74rem; white-space:nowrap; }
.preview-status i{ width:7px; height:7px; border-radius:50%; background:#2f9a62; box-shadow:0 0 0 3px rgba(47,154,98,0.12); }
.product-media .icon-frame{ background:#fff; border:1px solid var(--line); border-radius:3px; padding:0; aspect-ratio:11/8; overflow:hidden; }
.product-media .custom-preview{ position:relative; width:100%; max-width:100%; min-height:430px; overflow:hidden; border-color:#cbd4dd; border-radius:5px; background:#f1f3f4; aspect-ratio:16/11; }
.envelope-drawing{ position:absolute; inset:0; }
.custom-preview .envelope-scale-stage{
  background:#f8fafc;
  background-image:none;
}
.custom-preview .letter-sheet-reference{ display:none; }
.custom-preview .real-envelope-cutout{
  top:51%; width:80% !important; height:auto !important; aspect-ratio:var(--preview-envelope-ratio);
  border:0; box-shadow:none; overflow:visible;
  transform-origin:center;
}
.custom-preview .drawn-envelope{
  border:0;
  box-shadow:0 24px 44px rgba(27,42,68,0.22),0 3px 8px rgba(27,42,68,0.12);
}
.custom-preview.business-shape .real-envelope-cutout{ width:90% !important; }
.custom-preview.open-side-shape .real-envelope-cutout{ width:78% !important; }
.custom-preview.open-end-shape .real-envelope-cutout{ width:auto !important; height:84% !important; }
.custom-preview .true-size-label{
  display:none;
}
.custom-print-overlay{
  position:absolute; left:var(--brand-left,6.58%); top:var(--brand-top,12.12%); width:60%; min-height:0; z-index:4;
  display:flex; align-items:flex-start; gap:0; color:#1b3859; pointer-events:none;
}
.custom-print-overlay.has-logo{ gap:4px; }
.custom-print-overlay.is-placeholder{ opacity:0.42; }
.preview-logo{
  width:var(--brand-logo-flex,8.77%); height:auto; max-height:none; aspect-ratio:1;
  flex:0 0 var(--brand-logo-flex,8.77%); object-fit:contain;
}
.preview-copy{ display:flex; min-width:0; flex-direction:column; line-height:1.18; text-align:left; }
.preview-copy strong{ font-size:clamp(0.34rem,0.56vw,0.54rem); line-height:1.08; overflow-wrap:anywhere; }
.preview-copy span{ margin-top:2px; font-size:clamp(0.28rem,0.42vw,0.42rem); line-height:1.15; white-space:pre-line; overflow-wrap:anywhere; }
.recipient-proof{
  position:absolute; left:var(--window-left,6.58%); top:var(--window-top,54.55%); z-index:3;
  width:var(--window-width,47.37%); height:var(--window-height,27.27%); padding:2% 3%;
  display:flex; flex-direction:column; justify-content:center; color:rgba(27,56,89,0.72); line-height:1.3; text-align:left;
}
.recipient-proof[hidden]{ display:none; }
.recipient-proof b{ font-size:clamp(0.35rem,0.72vw,0.56rem); }
.recipient-proof small{ margin-top:2%; font-size:clamp(0.3rem,0.58vw,0.46rem); line-height:1.42; }
.proof-outline{ position:absolute; inset:0; z-index:7; width:100%; height:100%; overflow:visible; pointer-events:none; }
.proof-outline rect{
  fill:none; stroke:var(--stamp); stroke-width:2; vector-effect:non-scaling-stroke;
  stroke-dasharray:1; stroke-dashoffset:1; opacity:0;
}
.proof-size-badge{
  position:absolute; right:18px; top:18px; z-index:8; padding:6px 10px; color:var(--ink);
  background:rgba(255,255,255,0.94); border:1px solid #d2d9df; border-radius:2px;
  box-shadow:0 5px 14px rgba(27,42,68,0.08); font-size:0.7rem; font-weight:700; letter-spacing:0.02em;
}
.custom-preview .proof-outline{ display:none; }
.custom-preview .opening-edge{ display:none; }
.preview-disclaimer{
  position:absolute; left:14px; top:14px; z-index:9; max-width:calc(100% - 28px);
  padding:5px 9px; color:#c51f2f; background:rgba(237,41,57,0.09);
  border:1px solid rgba(237,41,57,0.32); border-radius:999px; box-shadow:0 4px 12px rgba(27,56,89,0.08);
  font-size:0.68rem; font-weight:700; letter-spacing:0.01em; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none;
}
.custom-preview .drawn-envelope::before{ background:none; }
.custom-preview .drawn-fold,
.custom-preview .drawn-seal-line,
.custom-preview .drawn-flap{ display:none; }
.custom-preview.proof-animating .real-envelope-cutout{ animation:drawn-envelope-in 0.72s cubic-bezier(.2,.75,.2,1) both; }
.custom-preview.proof-animating .drawn-envelope{ animation:none; }
.custom-preview.proof-animating .drawn-flap{ animation:drawn-flap-settle 0.85s cubic-bezier(.2,.75,.2,1) 0.08s both; }
.custom-preview.proof-animating .drawn-sheen{ animation:none; }
.custom-preview.proof-animating .proof-size-badge{ animation:none; }
.custom-preview.proof-animating .proof-outline rect{ animation:proof-trace 0.95s ease-out 0.08s both; }
.custom-preview.proof-animating .proof-size-badge{ animation:proof-badge 1.05s ease-out both; }
.custom-preview.proof-animating .custom-print-overlay{ animation:proof-ink 0.5s ease-out 0.18s both; }
@keyframes proof-settle{
  0%{ opacity:0.35; transform:translate(-50%,-50%) scale(0.92); }
  58%{ opacity:1; transform:translate(-50%,-50%) scale(1.025); }
  100%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
}
@keyframes drawn-envelope-in{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(0.92); }
  60%{ opacity:1; transform:translate(-50%,-50%) scale(1.02); }
  100%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
}
@keyframes drawn-flap-settle{
  0%{ transform:perspective(500px) rotateX(-16deg); opacity:0.65; }
  65%{ transform:perspective(500px) rotateX(3deg); opacity:1; }
  100%{ transform:perspective(500px) rotateX(0); opacity:1; }
}
@keyframes drawn-sheen{
  0%{ left:-55%; opacity:0; }
  20%{ opacity:0.2; }
  100%{ left:135%; opacity:0; }
}
@keyframes proof-trace{
  0%{ stroke-dashoffset:1; opacity:0; }
  12%{ opacity:0.72; }
  78%{ stroke-dashoffset:0; opacity:0.62; }
  100%{ stroke-dashoffset:0; opacity:0; }
}
@keyframes proof-badge{
  0%{ opacity:0; transform:translateY(-5px) scale(0.96); }
  30%,70%{ opacity:1; transform:translateY(0) scale(1); }
  100%{ opacity:0.78; transform:translateY(0) scale(1); }
}
@keyframes proof-ink{
  0%{ opacity:0; transform:translateY(3px); }
  100%{ opacity:1; transform:translateY(0); }
}
.custom-preview.proof-animating .custom-print-overlay.is-placeholder{ animation-name:proof-placeholder; }
@keyframes proof-placeholder{
  0%{ opacity:0; transform:translateY(4px); }
  100%{ opacity:0.42; transform:translateY(0); }
}
.preview-caption{ margin-top:12px; color:var(--ink-soft); font-size:0.78rem; line-height:1.45; }
.preview-caption a{ color:var(--ink); font-weight:600; }
@media (prefers-reduced-motion:reduce){
  .hero-machine .machine-photo,
  .hero-machine .machine-photo-shine,
  .hero-machine .machine-callout{ animation:none; }
  .hero-machine .machine-photo:first-of-type{ opacity:1; }
  .hero-machine .callout-feed{ opacity:1; transform:none; }
  .custom-preview.proof-animating .real-envelope-cutout,
  .custom-preview.proof-animating .drawn-envelope,
  .custom-preview.proof-animating .drawn-flap,
  .custom-preview.proof-animating .drawn-sheen,
  .custom-preview.proof-animating .proof-outline rect,
  .custom-preview.proof-animating .proof-size-badge,
  .custom-preview.proof-animating .custom-print-overlay{ animation:none; }
}
.product-info .fam{ font-family:'Source Sans 3',Arial,sans-serif; font-size:0.78rem; font-weight:700; color:var(--stamp); text-transform:uppercase; letter-spacing:0.05em; }
.product-info h1{ font-size:clamp(1.5rem,3vw,2.1rem); color:var(--ink); margin:8px 0 12px; font-weight:600; }
.product-info .desc{ font-size:1rem; color:var(--ink-soft); line-height:1.65; margin-bottom:20px; }
.spec-table{ width:100%; border-collapse:collapse; margin-bottom:24px; }
.spec-table tr{ border-top:1px solid var(--line-soft); }
.spec-table tr:first-child{ border-top:none; }
.spec-table td{ padding:9px 0; font-size:0.88rem; }
.spec-table td:first-child{ color:var(--ink-soft); width:40%; font-family:'Source Sans 3',Arial,sans-serif; font-size:0.78rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
.spec-table td:last-child{ color:var(--ink); font-weight:500; }

.customizer-card{ background:#fff; border:1px solid var(--line); border-top:3px solid var(--stamp); border-radius:var(--radius); padding:22px; margin:0 0 22px; }
.customizer-kicker{ display:block; color:var(--stamp); font-size:0.74rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; }
.customizer-card h2{ margin:3px 0 5px; color:var(--ink); font-size:1.25rem; font-weight:700; }
.customizer-intro{ color:var(--ink-soft); font-size:0.88rem; line-height:1.45; }
.customizer-fields label{ display:block; margin:14px 0 5px; color:var(--ink); font-size:0.8rem; font-weight:700; }
.customizer-fields input[type="text"], .customizer-fields textarea{
  width:100%; padding:10px 12px; border:1px solid #bcc8d3; border-radius:3px;
  color:var(--charcoal); background:#fff; font:inherit; font-size:0.92rem; outline:none;
}
.customizer-fields textarea{ min-height:78px; resize:vertical; }
.customizer-fields input:focus, .customizer-fields textarea:focus{ border-color:var(--ink); box-shadow:0 0 0 2px rgba(27,56,89,0.08); }
.logo-upload{ width:100%; padding:9px; border:1px dashed #aab8c6; border-radius:3px; background:var(--paper); color:var(--ink-soft); font:inherit; font-size:0.82rem; }
.logo-upload::file-selector-button{ margin-right:10px; padding:7px 11px; border:1px solid var(--line); border-radius:2px; background:#fff; color:var(--ink); font:inherit; font-weight:600; cursor:pointer; }
.logo-status{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:7px; color:var(--ink-soft); font-size:0.76rem; }
.logo-status span{ min-width:0; overflow-wrap:anywhere; }
.logo-status button{ flex:0 0 auto; border:0; background:none; color:var(--stamp); font:inherit; font-weight:600; text-decoration:underline; cursor:pointer; }
.customizer-actions{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft); }
.customizer-actions span{ color:var(--ink-soft); font-size:0.76rem; line-height:1.35; text-align:right; }

.buy-box{ background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; }
.buy-box label{ font-family:'Source Sans 3',Arial,sans-serif; font-size:0.78rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); display:block; margin:14px 0 6px; }
.buy-box label:first-child{ margin-top:0; }
.pack-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.pack-chip{ border:1px solid var(--line); background:#fff; border-radius:20px; padding:7px 14px; font-size:0.82rem; cursor:pointer; color:var(--ink-soft); }
.pack-chip.selected{ background:var(--ink); border-color:var(--ink); color:#fff; }
.qty-row{ display:flex; align-items:center; gap:10px; }
.qty-row input{ width:110px; padding:10px 12px; border:1px solid var(--line); border-radius:3px; font-size:0.95rem; }
.buy-box textarea{ width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:3px; font-size:0.9rem; font-family:'Source Sans 3',Arial,sans-serif; min-height:76px; resize:vertical; }
.buy-box .added-msg{ display:none; margin-top:12px; font-size:0.84rem; color:var(--accent); font-weight:600; }
.buy-box .note{ font-size:0.78rem; color:var(--ink-soft); margin-top:14px; line-height:1.5; }

/* ---------------- cart page ---------------- */
.cart-layout{ display:grid; grid-template-columns:1fr 340px; gap:36px; align-items:start; padding:10px 0 60px; }
.cart-line{ display:grid; grid-template-columns:74px 1fr auto; gap:16px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line-soft); }
.cart-line .icon-frame{ background:var(--paper-card); border-radius:3px; overflow:hidden; aspect-ratio:11/8; }
.cart-line h4{ font-size:0.96rem; color:var(--ink); font-weight:600; }
.cart-line .dims{ font-size:0.8rem; color:var(--ink-soft); margin-top:2px; }
.cart-line .notes{ font-size:0.78rem; color:var(--ink-soft); margin-top:6px; line-height:1.45; white-space:pre-line; }
.cart-line .line-actions{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.cart-line .qty-edit{ display:flex; align-items:center; gap:6px; }
.cart-line .qty-edit input{ width:74px; padding:7px 8px; border:1px solid var(--line); border-radius:3px; font-size:0.86rem; }
.cart-line .remove-btn{ background:none; border:none; color:var(--stamp); font-size:0.78rem; cursor:pointer; text-decoration:underline; padding:0; }
.cart-empty{ text-align:center; padding:60px 20px; color:var(--ink-soft); }
.cart-empty h2{ color:var(--ink); margin-bottom:10px; }

.summary-box{ background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; position:sticky; top:128px; }
.summary-box .row{ display:flex; justify-content:space-between; font-size:0.9rem; padding:6px 0; color:var(--ink-soft); }
.summary-box .row b{ color:var(--ink); }

.request-form{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; margin-top:24px; }
.request-form label{ font-family:'Source Sans 3',Arial,sans-serif; font-size:0.78rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); display:block; margin:14px 0 6px; }
.request-form label:first-child{ margin-top:0; }
.request-form input, .request-form textarea{ width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:3px; font-size:0.92rem; font-family:'Source Sans 3',Arial,sans-serif; outline:none; }
.request-form input:focus, .request-form textarea:focus{ border-color:var(--ink); }
.request-form textarea{ min-height:90px; resize:vertical; }
.form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .form-grid-2{ grid-template-columns:1fr; } }

@media (max-width:860px){
  .product-detail{ grid-template-columns:1fr; gap:28px; }
  .cart-layout{ grid-template-columns:1fr; }
  .summary-box{ position:static; }
}
@media (max-width:520px){
  .envelope-drawing{ inset:0; }
  .artwork-preview-panel{ padding:18px; }
  .product-media .custom-preview{ min-height:270px; aspect-ratio:4/3; }
  .custom-print-overlay{ gap:8px; }
  .preview-copy strong{ font-size:0.46rem; }
  .preview-copy span{ font-size:0.36rem; }
  .customizer-actions{ align-items:flex-start; flex-direction:column; }
  .customizer-actions span{ text-align:left; }
  .artwork-preview-head{ align-items:flex-start; flex-direction:column; gap:7px; }
}

/* ---------------- trust strip ---------------- */
.trust-strip{ display:flex; gap:28px; flex-wrap:wrap; padding:26px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trust-item{ display:flex; align-items:center; gap:10px; font-size:0.86rem; color:var(--ink-soft); }
.trust-item b{ color:var(--ink); font-family:'Source Sans 3',Arial,sans-serif; font-size:1rem; font-weight:700; }

/* ---------------- generic content pages (about/location) ---------------- */
.content-section{ background:#fff; border:1px solid var(--line); border-radius:6px; padding:52px 48px; margin:26px 0; }
.credit-list{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:30px; }
.credit-list article{ padding:22px; border:1px solid var(--line); border-radius:4px; background:var(--paper-card); }
.credit-list h2{ color:var(--ink); font-size:1.05rem; }
.credit-list p{ margin:8px 0 12px; color:var(--ink-soft); font-size:0.88rem; line-height:1.55; }
.credit-list a{ color:var(--stamp); font-size:0.84rem; font-weight:700; }
@media (max-width:700px){ .credit-list{ grid-template-columns:1fr; } }
@media (max-width:700px){ .content-section{ padding:34px 22px; } }

/* ---------------- info pages (about/location) ---------------- */
.info-hero{ padding:10px 0 6px; max-width:640px; }
.info-hero h1{ font-size:clamp(1.8rem,3.6vw,2.6rem); color:var(--ink); margin:12px 0 14px; font-weight:600; }
.info-hero p{ font-size:1.02rem; color:var(--ink-soft); line-height:1.65; }
.info-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:22px; }
.info-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; }
.info-card .idx{ font-family:'Source Sans 3',Arial,sans-serif; font-size:0.72rem; font-weight:700; color:var(--stamp); letter-spacing:0.04em; }
.info-card h3{ font-size:1rem; color:var(--ink); margin:10px 0 6px; font-weight:600; }
.info-card p{ font-size:0.86rem; color:var(--ink-soft); line-height:1.5; }
@media (max-width:900px){ .info-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .info-grid{ grid-template-columns:1fr; } }

.contact-row{ display:flex; flex-wrap:wrap; gap:44px; margin-top:8px; }
.contact-info{ flex:1 1 220px; }
.contact-info h3{ font-size:1.05rem; color:var(--ink); margin-bottom:14px; }
.contact-info p{ margin-bottom:16px; font-size:0.95rem; color:var(--ink-soft); line-height:1.55; }
.contact-info p strong{ display:block; color:var(--ink); font-size:0.78rem; font-family:'Source Sans 3',Arial,sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px; }
.contact-info .placeholder{ color:var(--ink); font-weight:500; }
.map-container{ border-radius:4px; overflow:hidden; border:1px solid var(--line); margin-top:18px; }
.map-container iframe{ display:block; width:100%; height:340px; border:0; }
@media (max-width:700px){ .map-container iframe{ height:240px; } }

/* toast */
#toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:12px 22px; border-radius:4px; font-size:0.88rem;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:500; box-shadow:var(--shadow);
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }