/* KOZA chapter tuning — separate art directions for phone and desktop. */

/* The friends scrapbook note is rectangular; text stays independent of the bitmap. */
.extras #friends {
  background-image:url('assets/friends-rectangular-note-hd.png') !important;
}

/* Center the small captions on the same inner paper grid at every viewport. */
.extras #friends .extras-status,
.extras #paper .extras-status {
  align-self:center;
  margin-left:0;
  max-width:100%;
}

/* Collection: a shared title-and-tape row above each floating textile. */
.collection .collection-grid {align-items:start;}
.collection .product-card .product-open {display:flex;flex-direction:column;align-items:stretch;width:100%;}
.collection .product-card .product-meta {
  order:0;display:grid!important;grid-template-rows:clamp(66px,5.5vw,79px) 64px;
  justify-items:center;align-content:start;align-items:start!important;
  text-align:center;min-height:0!important;height:auto;
  padding:0 2px 5px!important;gap:3px;
}
.collection .product-card .product-meta h3 {
  display:block;align-self:start;width:100%;height:100%;
  min-height:0;margin:0!important;
  font-size:clamp(27px,2.7vw,39px);line-height:1.08;
  text-wrap:balance;text-align:center!important;justify-self:center;
}
.collection .product-card .product-image {order:1;margin:-11px 0 0!important;}
.collection .product-card:hover .product-meta h3,
.collection .product-card:focus-within .product-meta h3 {color:#8abbd6!important;}
.collection .product-card .product-badge,
.collection .product-two .product-badge,
.collection .product-three .product-badge {
  position:relative!important;inset:auto!important;
  flex:none;max-width:100%;width:244px;height:64px;
  isolation:isolate;background:none!important;
  padding:12px 43px 14px 17px!important;
  font-size:11px;line-height:1.2;letter-spacing:.015em;
  color:#1b405b!important;
  transform:rotate(-2deg)!important;
}
.collection .product-card .product-badge::before {
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url('assets/tape-collection-green-v2.png') center / 100% 100% no-repeat;
  filter:hue-rotate(128deg) saturate(.83) brightness(1.08);
}
.collection .product-two .product-badge {
  padding:12px 19px 14px 41px!important;
  transform:rotate(2deg)!important;
}
.collection .product-two .product-badge::before {
  background-image:url('assets/tape-process-green-v2.png');
}
.collection .product-three .product-badge {transform:rotate(-1deg)!important;}
@media(max-width:650px) {
  .collection .product-card .product-meta {
    grid-template-rows:clamp(76px,21vw,85px) 57px;
    min-height:0!important;padding:0 0 5px!important;gap:3px;
  }
  .collection .product-card .product-meta h3 {min-height:0;font-size:clamp(28px,7.7vw,37px)!important;}
  .collection .product-card .product-image {margin-top:-9px!important;}
  .collection .product-card .product-badge,
  .collection .product-two .product-badge,
  .collection .product-three .product-badge {width:216px;height:57px;font-size:10px;}
}

.pill.tape-pill.tape-olive {
  background-image:url('assets/tape-collection-green-v2.png') !important;
  background-size:100% 100%;
  min-width:192px;
  height:67px;
  padding:10px 45px 13px 18px;
  transform:rotate(-2deg);
  color:#2b381e;
}
.pill.tape-pill.tape-blue {
  background-image:url('assets/tape-process-green-v2.png') !important;
  min-width:206px;
  height:66px;
  padding:10px 31px 12px 28px;
  transform:rotate(1deg);
  color:#2b381e;
}

/* Warm white scallops are part of the ending process chapter itself. */
.process { position:relative; padding-bottom:74px; }
.extras {
  position:relative;
  isolation:isolate;
  padding-top:62px !important;
}
.extras::before {
  content:'';
  position:absolute;
  z-index:3;
  top:-1px;
  left:0;
  right:0;
  height:30px;
  pointer-events:none;
  background:radial-gradient(circle at 23px 0,#fffdf6 22px,transparent 23px) 0 0/46px 30px repeat-x;
}

@media (min-width:1001px) {
  .hero .hero-visual {transform:translateY(-22px) scale(.85) !important;}
}
@media (min-width:1550px) {
  .hero .hero-visual {transform:translateY(-68px) scale(.83) !important;}
}
@media (max-width:650px) {
  .hero .hero-visual {
    transform:translateY(-55px) scale(.87) !important;
    margin-bottom:-60px !important;
  }
  .pill.tape-pill.tape-olive { min-width:180px;height:62px;padding:10px 43px 13px 16px; }
  .pill.tape-pill.tape-blue { min-width:194px;height:62px;padding:9px 29px 12px 26px; }
  .process { padding-bottom:64px; }
  .extras { padding-top:39px !important; }
  .extras::before {
    height:24px;
    background:radial-gradient(circle at 17px 0,#fffdf6 16px,transparent 17px) 0 0/34px 24px repeat-x;
  }
}