/* 2026-10-07 storefront layout pass
   Denser product grid, brand-grouped collections, collection jump links,
   compact hero, single-row buy controls, phone header and privacy bar fixes.
   Loaded after every other shop stylesheet; selectors are scoped to win over
   the earlier layered rules without editing them. */

/* Jump links (replaces the decorative quality strip) */
html body.catalog-page .collection-jump{display:flex;justify-content:flex-start;gap:6px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;padding:7px max(16px,calc((100% - 1180px)/2));min-height:0}
html body.catalog-page .collection-jump::-webkit-scrollbar{display:none}
html body.catalog-page .collection-jump a{flex:0 0 auto;padding:6px 12px;border:1px solid rgba(247,232,189,.35);border-radius:999px;color:#f7e8bd;text-decoration:none;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
html body.catalog-page .collection-jump a:hover,html body.catalog-page .collection-jump a:focus-visible{background:#f7e8bd;color:#0b382f}
html body.catalog-page .collection-jump a:before{content:none}

/* Compact hero: one line of shop facts, no shortcut cards */
html body.catalog-page .catalog-intro{padding-bottom:12px}
html body.catalog-page .store-facts{display:block;margin:14px 0 0;color:#4f655e;font-size:.82rem;line-height:1.55}
html body.catalog-page .store-facts a{color:#17614f;font-weight:700}
html body.catalog-page .store-facts #mode-label{font-weight:900;color:#173d35}
html body.catalog-page .store-facts .dot{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:#2f9e6b;vertical-align:1px}
html body.catalog-page .deal-banner{margin-top:10px;padding:8px 12px;font-size:.82rem}
html body.catalog-page .catalog-filters{margin-top:4px}

/* Brand groups and collection headings */
html body.catalog-page .brand-group{margin:0 0 48px;scroll-margin-top:110px}
html body.catalog-page .brand-group:last-child{margin-bottom:0}
html body.catalog-page .brand-head h2{font-family:"Noto Serif",Georgia,serif;font-size:1.9rem;margin:0 0 6px;color:#153a32}
html body.catalog-page .brand-group .collection-block{margin:0 0 30px;scroll-margin-top:110px}
html body.catalog-page .brand-group .collection-block:last-child{margin-bottom:0}
html body.catalog-page .collection-head h3{font-family:"Noto Serif",Georgia,serif;font-size:1.25rem;margin:.6rem 0 .2rem;color:#153a32}
html body.catalog-page .anchor-alias{display:block;position:relative;top:-110px}

/* Product grid: 4 / 3 / 2 columns, including Tropical Voyage and collector sets */
html body.catalog-page .product-grid,
html body.catalog-page #ciww-tropical-voyage .product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:1000px){
  html body.catalog-page .product-grid,
  html body.catalog-page #ciww-tropical-voyage .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
  html body.catalog-page .product-grid,
  html body.catalog-page #ciww-tropical-voyage .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}

/* Product card */
html body.catalog-page .product,
html body.catalog-page #ciww-tropical-voyage .bundle-product{display:flex;flex-direction:column;grid-template-columns:none;grid-column:auto}
html body.catalog-page .product-media,
html body.catalog-page #ciww-tropical-voyage .product-media,
html body.catalog-page #ciww-tropical-voyage .bundle-product .product-media,
html body.catalog-page .bundle-product .product-media{aspect-ratio:1/1;min-height:0;padding:10px}
html body.catalog-page .product-media.photo-hoodie{aspect-ratio:1592/2048;padding:0}
html body.catalog-page .product-body,
html body.catalog-page #ciww-tropical-voyage .bundle-product .product-body{display:flex;flex-direction:column;flex:1;justify-content:flex-start;padding:12px 12px 13px}
html body.catalog-page .product-brand{display:none}
html body.catalog-page .product h3,
html body.catalog-page #ciww-tropical-voyage .product h3{min-height:0;margin:0;font-size:1rem;line-height:1.3}
html body.catalog-page .product h3 a{color:inherit;text-decoration:none}
html body.catalog-page .product h3 a:hover{text-decoration:underline}
html body.catalog-page .product .product-summary,
html body.catalog-page #ciww-tropical-voyage .product .product-summary{display:-webkit-box;-webkit-line-clamp:2!important;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em!important;margin:.35rem 0 0;font-size:.74rem;line-height:1.45}

/* CreekCo / Unbranded version toggle */
html body.catalog-page .variant-toggle{display:flex;gap:4px;margin-top:10px;padding:3px;border:1px solid #d9ceb9;border-radius:10px;background:#fbf7ee}
html body.catalog-page .variant-toggle button{flex:1;min-width:0;min-height:32px;padding:4px 3px;white-space:nowrap;border:0;border-radius:7px;background:transparent;color:#4f655e;font:inherit;font-size:.7rem;font-weight:800;cursor:pointer}
html body.catalog-page .variant-toggle button[aria-pressed="true"]{background:#173d35;color:#fff}

/* Price and button on one row */
html body.catalog-page .product-actions,
html body.catalog-page #ciww-tropical-voyage .bundle-product .product-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:12px}
html body.catalog-page .product-actions .price{font-weight:900;color:#c45a1c;font-size:.95rem;white-space:nowrap}
html body.catalog-page .product-actions .price small{font-size:.66rem;font-weight:800;color:#8a6a52}
html body.catalog-page .product-actions .add-cart{flex:1 1 auto;width:auto;min-width:96px;min-height:40px;padding:.5rem .7rem;font-size:.76rem}

/* Tablet: keep logo and links on one row (an earlier rule made the links full width) */
@media(max-width:850px){
  html body.catalog-page .catalog-nav{flex-wrap:nowrap;align-items:center}
  html body.catalog-page .catalog-nav .navlinks{width:auto;margin-left:auto;flex-wrap:nowrap;align-items:center;gap:6px 14px}
  html body.catalog-page .catalog-nav .navlinks .pill{display:inline-flex;align-items:center;justify-content:center;padding:0 16px;line-height:1}
  html body.catalog-page .brand-group,html body.catalog-page .brand-group .collection-block{scroll-margin-top:130px}
  html body.catalog-page .anchor-alias{top:-130px}
}

/* Phone */
@media(max-width:620px){
  html body.catalog-page .catalog-header{position:sticky;top:0}
  html body.catalog-page .catalog-nav{flex-wrap:nowrap;padding-top:8px;padding-bottom:8px;min-height:0}
  html body.catalog-page .catalog-header .brand-copy{display:none}
  html body.catalog-page .catalog-nav .navlinks{min-width:0}
  html body.catalog-page .catalog-header .brand-icon{width:40px;height:40px}
  html body.catalog-page .catalog-header .brand-mark{width:40px;height:40px}
  html body.catalog-page .catalog-nav .navlinks .pill{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;line-height:1}
  html body.catalog-page .catalog-nav .nav-more{min-height:40px}
  html body.catalog-page .collection-jump{display:flex;padding-left:12px;padding-right:12px}
  html body.catalog-page .catalog-intro{padding-top:14px}
  html body.catalog-page .catalog-intro h1{font-size:2.1rem;margin:.2rem 0 .4rem}
  html body.catalog-page .catalog-intro p{font-size:.95rem}
  html body.catalog-page .hero-actions .btn{min-height:44px;padding:.6rem .9rem}
  html body.catalog-page .brand-group,html body.catalog-page .brand-group .collection-block{scroll-margin-top:118px}
  html body.catalog-page .anchor-alias{top:-118px}
  html body.catalog-page .brand-head h2{font-size:1.5rem}
  html body.catalog-page .product-body{padding:10px}
  html body.catalog-page .product h3,html body.catalog-page #ciww-tropical-voyage .product h3{font-size:.9rem}
  html body.catalog-page .product .product-summary,html body.catalog-page #ciww-tropical-voyage .product .product-summary{display:none}
  html body.catalog-page .product-actions{padding-top:8px;gap:6px}
  html body.catalog-page .product-actions .add-cart{flex-basis:100%;min-height:40px}
  html body.catalog-page .variant-toggle button{font-size:.64rem}
  html body.catalog-page .product-media:after{display:none}

  /* Privacy choices: slim bar instead of a half-screen dialog */
  .privacy-choice-bar{left:8px;right:8px;bottom:8px;padding:10px 12px;gap:8px;border-radius:12px}
  .privacy-choice-bar b{font-size:.9rem}
  .privacy-choice-bar p{font-size:.7rem;line-height:1.4;margin-top:.15rem}
  .privacy-choice-actions{display:grid;grid-template-columns:1fr 1.5fr auto;gap:6px}
  .privacy-choice-actions button,.privacy-choice-actions a{padding:.55rem .5rem;font-size:.7rem;text-align:center}
}