@import url('./catalog-masks.css?v=1');
:root { --white: #ffffff; --paper: #ffffff; --cream: #f4f5f3; }
:focus-visible { outline: 2px solid #c7431d; outline-offset: 5px; }
.announcement { background: #243d37; min-height: 30px; font-weight: 500; text-transform: none; font-size: 11px; }
.site-header, .product-header { background: #fff; min-height: 80px; border-color: #e5e8e6; }
.site-nav a, .product-header__nav a { font-size: 12px; text-transform: none; }
.cart-button, .product-cart-button { min-width: 48px; justify-content: center; gap: 6px; padding: 10px 0; }
.cart-icon { width: 21px; height: 21px; flex: 0 0 21px; }
.cart-count, .product-cart-count { color: #172b2a; background: transparent; font-size: 12px; }

.home-hero { min-height: 0; height: min(600px, calc(100svh - 220px)); align-items: flex-end; color: #fff; background: #243d37; }
.home-hero__picture { position: absolute; inset: 0; }
.home-hero__picture img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.home-hero__content { width: 100%; max-width: none; padding: 40px clamp(24px, 5vw, 76px); }
.home-hero h1 { font-size: 52px; line-height: 1.1; font-weight: 600; text-shadow: 0 2px 10px #0008; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.hero-actions .button { justify-content: center; min-height: 46px; margin: 0; padding: 13px 20px; border: 1px solid white; border-radius: 0; color: #193635; background: white; font-size: 11px; }
.hero-actions .button--outline { background: #162b2bcc; color: white; }
.hero-actions .button:hover { color: white; border-color: #a4351c; background: #a4351c; }
.collection { max-width: 1480px; padding-top: 42px; }
.section-heading { margin-bottom: 26px; }
.section-heading h2 { font-size: 32px; }
.eyebrow { font-size: 10px; margin-bottom: 9px; }
.collection-links { display: flex; gap: 28px; padding-bottom: 4px; }
.collection-links a { display: inline-flex; align-items: center; gap: 12px; color: #273d39; font-size: 13px; font-weight: 600; text-decoration: none; }
.collection-links a:hover { color: #c7431d; text-decoration: underline; text-underline-offset: 5px; }
.product-grid { column-gap: 20px; row-gap: 36px; }
.shop-card__image, .product-template .product-visual, .product-image-frame { background: #f4f5f3; }
[data-product-id="flying-tiger-pearl-snap"] { --catalog-mask: url("./assets/catalog-masks/flying-tiger-front.png"); }
[data-product-id="surf-squad-pearl-snap"] { --catalog-mask: url("./assets/catalog-masks/surf-squad-shirt-front.png"); }
[data-product-id="meat-lab-cap"] { --catalog-mask: url("./assets/catalog-masks/meat-lab-primary.png"); }
[data-product-id="raptor-performance-hat"] { --catalog-mask: url("./assets/catalog-masks/raptor-primary.png"); }
[data-product-id="surf-squad-hat"] { --catalog-mask: url("./assets/catalog-masks/surf-squad-hat-primary.png"); }
[data-product-id="retro-state-hat"] { --catalog-mask: url("./assets/catalog-masks/retro-state-primary.png"); }
/* Alpha-only masks reveal one shared backdrop while retaining the approved source pixels. */
.shop-card__image img, .product-gallery img, .product-gallery-controls img, .product-lightbox img {
  -webkit-mask-image: var(--catalog-mask, none);
  mask-image: var(--catalog-mask, none);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.shop-card[data-product-id="surf-squad-pearl-snap"] .shop-card__image img,
.product-surf-shirt img[src*="/surf-squad-shirt-front"] {
  -webkit-mask-size: 98% 98%;
  mask-size: 98% 98%;
  -webkit-mask-position: 50% 35%;
  mask-position: 50% 35%;
}
.shop-card__image img { padding: 0; }
/* Match the two approved shirt fronts without regenerating their artwork. */
.shop-card[data-product-id="surf-squad-pearl-snap"] .shop-card__image img,
.product-surf-shirt .product-image-frame img { transform: translateY(.5%) scale(1.134); }
.shop-card[data-product-id="surf-squad-pearl-snap"]:hover .shop-card__image img { transform: translateY(.5%) scale(1.168); }
.product-image-frame { display: block; aspect-ratio: 1; overflow: hidden; }
.product-image-frame:focus-within { outline: 3px solid var(--sea); outline-offset: -3px; }
.shop-card__details { padding-top: 14px; gap: 8px; }
.shop-card__details strong { font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1.4; text-transform: none; }
.shop-card__details b { padding-top: 1px; font-size: 14px; }
.shop-card__details small { font-size: 11px; }
.status-tag { border: 0; border-radius: 0; padding: 5px 7px; font-size: 9px; background: #ffffffed; }
.origin { min-height: 0; grid-template-columns: 1fr 1fr; background: #eaf1ef; }
.origin > img { max-height: 460px; min-height: 400px; }
.origin__copy { padding: 48px clamp(28px, 5vw, 76px); }
.origin h2 { max-width: 470px; font-size: 38px; line-height: 1.15; }
.origin__copy p:not(.eyebrow) { font-size: 14px; line-height: 1.8; }
.site-footer { background: #19322e; }
.category-hero { max-width: 1480px; padding-top: 42px; }
.category-hero h1 { font-size: 44px; }
.product-template .product-title { font-size: 36px; line-height: 1.15; }
.product-template .product-page { max-width: 1440px; padding-top: 108px; }
.product-gallery__item { margin: 0; }
.product-template .product-visual__caption, .product-gallery__item figcaption { font-family: var(--sans); text-transform: none; font-size: 11px; }

@media (min-width: 1050px) {
  .site-header, .product-header { grid-template-columns: 1fr 150px 1fr; gap: 20px; }
  .site-wordmark, .product-header__logo { grid-column: 2; grid-row: 1; justify-self: center; width: 148px; }
  .site-wordmark img, .product-header__logo img { height: 62px; }
  .site-nav, .product-header__nav { grid-column: 1; grid-row: 1; justify-content: flex-start; gap: 25px; }
  .cart-button, .product-cart-button { grid-column: 3; grid-row: 1; justify-self: end; }
}
@media (min-width: 961px) {
  .product-template .product-page { grid-template-columns: minmax(0, 1.35fr) minmax(340px, .85fr); gap: 22px 52px; }
  .product-template .product-gallery { gap: 18px; }
  .product-template .product-gallery:has(> :nth-child(4)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-template .product-gallery > .product-visual { grid-column: 1 / -1; }
  .product-template .product-info { top: 108px; }
}
@media (min-width: 761px) and (max-width: 1049px) {
  .home-hero { height: 440px; }
  .home-hero h1 { font-size: 44px; }
  .home-hero__content { padding-left: 28px; padding-right: 28px; }
  .hero-actions { gap: 8px; }
  .hero-actions .button { padding-inline: 13px; }
}
@media (max-width: 760px) {
  .site-header, .product-header { min-height: 64px; }
  .site-nav a, .product-header__nav a { font-size: 28px; }
  .home-hero { height: min(540px, calc(100svh - 218px)); min-height: 0; }
  .home-hero__picture img { object-position: 38% center; }
  .home-hero__content { padding: 28px 18px; text-align: left; }
  .home-hero h1 { font-size: 35px; line-height: 1.1; }
  .hero-actions { margin-top: 15px; justify-content: flex-start; gap: 9px; }
  .hero-actions .button { min-height: 40px; padding: 10px 16px; font-size: 10px; }
  .collection { padding-top: 28px; }
  .section-heading { flex-direction: row; align-items: end; gap: 16px; margin-bottom: 20px; }
  .section-heading h2 { font-size: 26px; }
  .collection-links { gap: 12px; flex-wrap: wrap; justify-content: end; }
  .collection-links a { font-size: 11px; gap: 5px; white-space: nowrap; }
  .product-grid { gap: 28px 12px; }
  .shop-card__details strong { font-size: 13px; }
  .shop-card__details b { font-size: 13px; }
  .shop-card__details small { font-size: 10px; }
  .origin { grid-template-columns: 1fr; }
  .origin > img { height: 320px; min-height: 0; }
  .origin__copy { padding: 36px 22px 42px; }
  .origin h2 { font-size: 30px; }
  .product-template .product-page { padding-top: 86px; }
  .product-template .product-title { font-size: 29px; }
}
@media (max-width: 600px) {
  .product-grid, .product-grid.category-product-grid { grid-template-columns: minmax(0, 1fr); row-gap: 34px; }
  .shop-card__details { flex-wrap: nowrap; gap: 12px; }
  .shop-card__details strong { font-size: 16px; }
  .shop-card__details b { font-size: 15px; }
  .shop-card__details small { font-size: 12px; }
  .status-tag { top: 12px; left: 12px; font-size: 10px; }
}
@media (max-width: 360px) {
  .home-hero__content { padding-top: 15px; }
  .home-hero h1 { font-size: 30px; }
  .hero-actions { margin-top: 12px; }
  .section-heading { flex-direction: column; align-items: flex-start; gap: 12px; }
}