/* ===== Tinuk "sharper" look (approved by Shulem Oct 21, 2026) — loaded after the page CSS ===== */
:root{--paper:#f5f3ef;--ink:#13212b;--muted:#5b6a75;--brand:#0e7c72;--brand-d:#0a5d56;--brand-l:#e6f4f2;--line:#e1e7e9}
body{font-size:18px;color:var(--ink)}
h1,h2,h3{letter-spacing:-.4px}
/* uppercase section labels, MAM-style */
.h-sec-head h2,.related-sec h2,.side-h,.cat-hero h1{text-transform:uppercase;letter-spacing:.06em}
.h-sec-head h2{font-size:24px;font-weight:800}
.h-sec-head a{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--brand-d)}
/* header nav: uppercase, more air */
nav a{text-transform:uppercase;letter-spacing:.07em;font-size:13.5px;font-weight:700}
.h-nav a{text-transform:uppercase;letter-spacing:.07em;font-size:13.5px;font-weight:700}
.util{font-size:13px;letter-spacing:.02em}

/* ---- HOME ---- */
.h-hero{padding:120px 0 104px}
.h-kicker{margin:0 0 14px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-d)}
.h-hero h1{font-size:clamp(36px,4.6vw,58px);line-height:1.06;max-width:16em;font-weight:800;letter-spacing:-1.2px}
.h-lead{font-size:19px;color:#34444f;max-width:34em}
.h-contact{display:none}
.h-actions .h-btn{padding:15px 34px;border-radius:999px;font-size:15px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}
/* trust strip */
.h-trust{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.h-trust-in{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:22px 0}
.h-trust-in div{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:700;letter-spacing:.01em;color:var(--ink)}
.h-trust-in svg{width:30px;height:30px;flex:none;fill:none;stroke:var(--brand);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.h-trust-in small{display:block;font-size:12.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
/* category tiles: photo-first, no borders */
.tiles{gap:22px}
.tile{border:0;border-radius:14px;background:transparent;transition:transform .2s}
.tile:hover{transform:translateY(-3px)}
.tile-img{aspect-ratio:1;padding:12%;background:var(--paper);border-radius:14px;transition:background .2s}
.tile:hover .tile-img{background:#ede9e3}
.tile-name{border:0;padding:12px 2px 0;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;text-align:center}
.tile-all{background:var(--brand);border-radius:14px}
.tile-all:hover{background:var(--brand-d)}
/* popular items: photo-first cards */
.pcards{gap:22px}
.pcards .pcard{border:0;background:transparent;padding:0;transition:transform .2s}
.pcards .pcard:hover{transform:translateY(-3px)}
.pcard-img{padding:10%;background:var(--paper);border-radius:14px}
.pcard-name{padding:12px 2px 0;font-size:16.5px;font-weight:700;line-height:1.3}
.pcard-sub{padding:3px 2px 0;font-size:14.5px;color:#34444f}
.pcard-no{padding:4px 2px 0;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.h-brands{border-top:1px solid var(--line)}

/* ---- CATALOG ---- */
.catalog-page .wrap{max-width:1320px}
.cat-hero{padding:40px 0 18px}
.cat-hero h1{font-size:30px;font-weight:800}
.cat-tabs button{border-radius:999px;font-size:13.5px;text-transform:uppercase;letter-spacing:.06em;height:40px}
@media (min-width:901px){.cat-layout{grid-template-columns:220px minmax(0,1fr);gap:36px}}
.pgrid{grid-template-columns:repeat(4,1fr);gap:26px 22px}
.pcard{border:0;border-radius:0;background:transparent;overflow:visible;transition:transform .2s}
.pcard:hover{transform:translateY(-3px)}
.pimg{padding:8%;background:var(--paper);border:0;border-radius:14px;transition:background .2s}
.pcard:hover .pimg{background:#ede9e3}
.pimg img{transition:transform .25s}
.pcard:hover .pimg img{transform:scale(1.04)}
.pbody{padding:14px 2px 0}
.pbody h3{font-size:16.5px;line-height:1.3;font-weight:700;margin:0 0 6px}
.pvar{display:none}
.pmeta{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.pfoot{margin-top:12px}
.add{width:100%;background:var(--brand);color:#fff;border-radius:999px;padding:12px 14px;font-size:13.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.add:hover{background:var(--brand-d)}
.utog{margin-top:10px}
.utog button{font-size:13px}
.plock{font-size:14px}
.side button{font-size:15px;font-weight:700}
.side .side-sub button{font-weight:600;font-size:14px}

/* ---- ITEM PAGE ---- */
.item-grid{gap:56px}
.item-photo{border:0;background:var(--paper);border-radius:18px;padding:7%}
.item-photo.has-zoom .pz-btn{background:var(--paper);padding:7%}
.eyebrow{color:var(--brand-d);font-size:12.5px;letter-spacing:.14em}
.item-info h1{font-size:clamp(28px,3vw,38px);line-height:1.12;font-weight:800;margin-bottom:14px}
.item-var{display:none}
.item-buy .btn{border-radius:999px;text-transform:uppercase;letter-spacing:.08em;font-size:14.5px;padding:15px 36px;font-weight:800}
.spec-h{margin:34px 0 8px;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.spec{border-top:2px solid var(--ink)}
.spec dt{font-weight:600;font-size:15.5px}
.spec dd{font-size:15.5px}
.item-sold{margin:18px 0 0;padding:14px 16px;background:var(--paper);border-radius:12px;font-size:15px;font-weight:600}
.item-sold span{display:block;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-d);margin-bottom:2px}
.related-sec .pgrid{grid-template-columns:repeat(5,1fr)}

@media (max-width:1000px){.pgrid{grid-template-columns:repeat(3,1fr)}.related-sec .pgrid{grid-template-columns:repeat(3,1fr)}.h-trust-in{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
  body{font-size:17px}
  .h-hero{padding:72px 0 60px}
  .h-hero h1{font-size:34px}
  .h-lead{font-size:16.5px}
  .h-trust-in{grid-template-columns:1fr 1fr;gap:12px;padding:16px 0}
  .h-trust-in div{font-size:13.5px}
  .tiles{gap:14px}
  .tile-name{font-size:12px;letter-spacing:.06em}
  .pgrid{grid-template-columns:1fr 1fr;gap:20px 12px}
  .related-sec .pgrid{grid-template-columns:1fr 1fr}
  .pbody h3{font-size:15px}
  .pmeta{font-size:11.5px}
  .add{font-size:12.5px;padding:11px 10px}
  .item-info h1{font-size:26px}
}

/* photos on white blend onto the soft card background (a display trick, the photo file is untouched) */
.pimg img,.tile-img img,.pcard-img img,.item-photo img,.pz-btn img{mix-blend-mode:multiply}
.related-sec .pgrid{grid-template-columns:repeat(5,1fr)}
.related-sec{background:#fff}

.tile-all{background:var(--brand)!important;border-color:var(--brand)!important}
.tile-all .tile-all-in{padding:22px}
.h-sec-head a{white-space:nowrap}
@media (max-width:760px){
  .h-hero h1{font-size:30px}
  .h-kicker{font-size:11px;letter-spacing:.12em}
  .h-sec-head h2{font-size:19px}
  .pbody h3{font-size:14px;line-height:1.3}
  .pmeta{font-size:11px;letter-spacing:.03em}
  .add{font-size:12px;letter-spacing:.05em;padding:10px 8px;white-space:nowrap}
  .pcard-name{font-size:14px}
  .pcard-no{font-size:11px}
  .tile-name{font-size:11px}
}

/* [sharper] 3: bigger product-page photo (zoom in place unchanged) */
@media (min-width:901px){.item-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
@media (max-width:900px){.item-photo{max-width:none;padding:6%}}
/* [sharper] 12: on phones the page numbers and sort sit below the items */
.pg-sort-b{display:none}
@media (max-width:760px){.pager-top .pg-nums{display:none}.pager-top{justify-content:center;gap:10px 18px;margin:0 0 14px}.pager-bottom .pg-per{display:none}.pager-bottom{margin-top:30px}} /* [ctrltop] Oct 28: on phones Sort by + per page at top, page numbers at bottom */
@media (max-width:640px){.util{letter-spacing:0;font-size:12.5px}} /* keep the phone top bar on one line */

/* [align] Oct 21 7:55 PM, Shulem: Add to cart lined up on every card; wider item boxes */
.pfoot{margin-top:auto;padding-top:12px}
.pbody{flex:1}
.catalog-page .wrap{max-width:1500px}
@media (min-width:901px){.cat-layout{grid-template-columns:200px minmax(0,1fr);gap:28px}}
.pgrid{gap:28px 18px}

/* [pbot] Oct 21 9 PM: case/inner line + Add to cart grouped at the card bottom */
.pbot{margin-top:auto}
.pbot .pfoot{margin-top:0;padding-top:8px}
.pbot .uonly,.pbot .utog{margin:10px 0 0}

/* [pcsside] pieces line beside the cart stepper */
.pfoot .pcs-side{margin:0;flex:1;text-align:left;font-size:13px}
.pfoot:has(.pcs-side){flex-wrap:wrap;justify-content:flex-start;gap:10px}
.pfoot:has(.pcs-side) .price{flex:1 0 100%}
@media (max-width:760px){.pfoot .pcs-side{font-size:12px}}

/* [stripfit] Oct 21 10:50 PM: all 7 categories fit in the home category strip */
@media (min-width:1000px){.h-strip-in{max-width:1400px;justify-content:space-between;gap:16px}}
@media (min-width:1000px) and (max-width:1439px){.h-strip-in{gap:10px}.h-strip-in a{font-size:13px;letter-spacing:.03em;font-weight:700}}

/* [box] Oct 21 11 PM: each item in its own bordered box (Amazon/mambaby idea) */
.pcard,.pcards .pcard{border:1px solid #dfe5e7;border-radius:14px;background:#fff;padding:12px;box-shadow:0 1px 2px rgba(19,33,43,.04);transition:box-shadow .2s,border-color .2s,transform .2s}
.pcard:hover,.pcards .pcard:hover{border-color:#c5d0d4;box-shadow:0 8px 22px rgba(19,33,43,.10);transform:translateY(-2px)}
.pcard .pimg,.pcards .pcard-img{border-radius:10px}
@media (max-width:760px){.pcard,.pcards .pcard{padding:8px;border-radius:12px}}

/* [both] case + inner in cart together */
.pboth{margin:10px 0 0;padding:6px 9px;border-radius:8px;background:#e8f4f2;color:#0e7c72;font-size:13px;font-weight:800;line-height:1.3}

/* [stack] case/inner lines stacked beside the cart button */
.pfoot .pcs-side span{display:block;white-space:nowrap}
.pfoot:has(.pcs-side) .add{flex:1;width:auto;min-width:0}
.pfoot:has(.pcs-side){flex-wrap:nowrap;align-items:center}
@media (max-width:760px){.pfoot:has(.pcs-side){flex-wrap:wrap}}

/* [tileframe] category tiles framed like product cards */
.tile:not(.tile-all){border:1px solid #dfe5e7;border-radius:14px;background:#fff;padding:12px 12px 14px;box-shadow:0 1px 2px rgba(19,33,43,.04);transition:box-shadow .2s,border-color .2s,transform .2s}
.tile:not(.tile-all):hover{border-color:#c5d0d4;box-shadow:0 8px 22px rgba(19,33,43,.10);transform:translateY(-2px)}
.tile:not(.tile-all) .tile-img{border-radius:10px}
@media (max-width:760px){.tile:not(.tile-all){padding:8px 8px 10px;border-radius:12px}}

/* [gridsafe] Safari: grid columns never grow wider than their share (a big photo can't stretch one card across the row) */
.pcards{grid-template-columns:repeat(4,minmax(0,1fr))}
.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
.pcards>.pcard,.tiles>.tile{min-width:0;max-width:100%}
.pcard-img,.tile-img{width:100%;max-width:100%;overflow:hidden}
.pcard-img img,.tile-img img{display:block;max-width:100%;max-height:100%}
@media (max-width:860px){.pcards,.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.pcards,.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* [hero3] minimalist hero: one sculptural teal shelf, short headline, one CTA */
.h-hero3{position:relative;overflow:hidden;background:#c7d9d7!important;padding:0!important;min-height:clamp(440px,46vw,640px)!important;display:flex;align-items:center;text-align:left!important}
.h-hero3::before,.h-hero3::after{display:none!important}
.h-hero3-art{position:absolute;top:0;bottom:0;right:0;width:min(78%,1180px);background:url("/img/hero/shelf.jpg") right center/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
.h-hero3-in{position:relative;width:100%}
.h-hero3-text{max-width:600px;padding:72px 0}
.h-hero3-kicker{margin:0 0 22px;font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#0e7c72}
.h-hero3 h1{margin:0 0 22px;font-size:clamp(40px,4.4vw,64px);line-height:.98;letter-spacing:-.035em;font-weight:800;color:#0b2b2f}
.h-hero3-lead{margin:0 0 36px;font-size:18px;line-height:1.5;color:#3d5559;max-width:380px}
.h-hero3-cta{display:inline-flex;align-items:center;gap:12px;padding:17px 30px;border-radius:999px;background:#0b3b3c;color:#fff!important;font-weight:700;font-size:16px;letter-spacing:.01em;text-decoration:none!important;box-shadow:0 14px 30px -12px rgba(11,59,60,.55);transition:transform .2s,box-shadow .2s,background .2s}
.h-hero3-cta:hover{background:#0e7c72;transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(14,124,114,.6)}
.h-hero3-cta span{transition:transform .2s}.h-hero3-cta:hover span{transform:translateX(4px)}
@media (max-width:860px){.h-hero3{display:block;min-height:0!important}.h-hero3-art{position:relative;inset:auto;width:100%;height:62vw;background-position:72% center;-webkit-mask-image:none;mask-image:none}.h-hero3-text{padding:34px 0 44px;max-width:none}.h-hero3 h1{font-size:44px}.h-hero3-lead{font-size:16px;margin-bottom:26px}}

/* [fitphone2] Oct 23: related items fit phones; phone number in top bar fits small phones */
@media (max-width:1000px){.related-sec .pgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.related-sec .pgrid{grid-template-columns:1fr 1fr}}
@media (max-width:400px){.util-callw{display:none}.util{font-size:11.5px}.util-in{gap:8px;padding-left:12px;padding-right:12px}}

@media (max-width:350px){.util-in{flex-wrap:wrap;justify-content:center;row-gap:2px}}

@media (max-width:760px){.pager-top{flex-wrap:nowrap;justify-content:space-between;gap:8px;margin:0 0 10px}.pager-top .pg-per{font-size:13.5px;gap:4px;white-space:nowrap}.pager-top .pg-per select{height:32px;padding:0 4px;font-size:13.5px;border-radius:8px}} /* [ctrltop2] one compact row */