.product-main{max-width:1180px;padding:40px 28px 30px}
.breadcrumbs{display:flex;align-items:center;gap:10px;padding:25px 0 22px;color:var(--muted);font-size:11px}
.breadcrumbs a:hover{color:var(--rose)}
.product-detail{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);gap:clamp(34px,6vw,78px);align-items:start}
.detail-gallery{min-width:0;position:sticky;top:104px}
.detail-main-image{width:100%;aspect-ratio:1/1.05;border-radius:22px;background:#fff;overflow:hidden;display:grid;place-items:center;border:1px solid var(--line)}
.detail-main-photo{width:100%;height:100%;object-fit:contain;display:block}
.detail-image-placeholder{font-size:90px;color:#c5b7a8}
.product-thumbnails{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:12px}
.product-thumb{border:1px solid transparent;background:#fff;border-radius:12px;aspect-ratio:1;overflow:hidden;padding:0;cursor:pointer}
.product-thumb.active{border:2px solid var(--rose)}
.product-thumb img{width:100%;height:100%;object-fit:contain}
.gallery-dots{display:none}
.detail-information{min-width:0;padding:12px 0 30px}
.detail-eyebrow{font-size:10px;font-weight:700;letter-spacing:.16em;color:#987d70;margin-bottom:12px}
.detail-title{font-size:clamp(27px,3vw,39px);line-height:1.16;margin:0 0 12px}
.detail-price{font-size:21px;font-weight:700;margin-bottom:14px}
.detail-description{font-size:13px;line-height:1.75;color:var(--muted);margin-bottom:25px}
.variant-selectors{display:grid;gap:22px}
.variant-group{border:0;padding:0;margin:0;min-width:0}
.variant-group legend,.quantity-group>label{font-size:12px;font-weight:700;margin-bottom:11px;display:block}
.selected-option-name{font-weight:400;color:var(--muted);margin-left:8px}
.variant-choices{display:flex;gap:9px;flex-wrap:wrap}
.variant-choice{min-width:43px;min-height:42px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:rgba(255,249,239,.75);color:var(--ink);font-size:12px;font-weight:600;transition:border-color .18s,background .18s,color .18s}
.variant-choice:hover,.variant-choice.selected{border-color:var(--rose);background:#F8E7E9;color:#8f4e5d}
.color-choices{gap:12px}
.variant-choice.color-choice{min-width:38px;width:38px;height:38px;min-height:38px;padding:4px;border-radius:50%;display:grid;place-items:center;background:transparent}
.variant-choice.color-choice.selected{outline:2px solid var(--rose);outline-offset:3px;border-color:transparent}
.variant-color-dot{width:27px;height:27px;border-radius:50%;background:var(--swatch);border:1px solid rgba(52,47,43,.2);display:block}
.variant-note{font-size:12px;color:var(--muted)}
.quantity-group{margin-top:22px}
.quantity-control{display:inline-flex;align-items:center;gap:17px;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:5px 8px}
.quantity-control button{border:0;background:transparent;width:28px;height:28px;border-radius:50%;font-size:18px;color:var(--ink)}
.quantity-control output{min-width:15px;text-align:center;font-size:13px;font-weight:700}
.variant-availability{min-height:18px;font-size:11px;color:var(--muted);margin:12px 0}
.detail-purchase-actions{display:flex;gap:11px;align-items:center;margin:14px 0 28px}
.detail-add-button{flex:1;min-height:48px}
/* Add-to-bag confirmation: flip the button face into the Go to Bag action. */
.detail-add-button,.mobile-purchase-bar .btn{transform-style:preserve-3d;backface-visibility:hidden;transition:transform .18s ease,opacity .18s ease}
.bag-button-flip-out{transform:perspective(650px) rotateX(88deg);opacity:.25}
.bag-button-flip-in{animation:bagButtonFlipIn .42s cubic-bezier(.2,.75,.25,1) both}
@keyframes bagButtonFlipIn{
  0%{transform:perspective(650px) rotateX(-88deg);opacity:.25}
  65%{transform:perspective(650px) rotateX(9deg);opacity:1}
  100%{transform:perspective(650px) rotateX(0);opacity:1}
}
@media(prefers-reduced-motion:reduce){.bag-button-flip-out,.bag-button-flip-in{animation:none!important;transition:none!important;transform:none!important;opacity:1!important}}
.detail-add-button:disabled,.mobile-purchase-bar .btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.detail-wishlist{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--white);color:var(--ink);font-size:23px}
.detail-wishlist.active{background:#D94B61;border-color:#D94B61;color:white}
.detail-accordions{border-top:1px solid var(--line)}
.detail-accordions details{border-bottom:1px solid var(--line)}
.detail-accordions summary{list-style:none;cursor:pointer;padding:17px 2px;font-size:12px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.detail-accordions summary::-webkit-details-marker{display:none}
.detail-accordions summary:after{content:'+';font-size:18px;font-weight:400;color:var(--muted)}
.detail-accordions details[open] summary:after{content:'−'}
.accordion-content{font-size:12px;line-height:1.8;color:var(--muted);padding:0 2px 18px}
.mobile-purchase-bar{display:none}
.related-section{padding:70px 0 55px}
.related-heading{text-align:center;margin:0 auto 27px;max-width:500px}
.related-heading .eyebrow{margin-bottom:8px}
.related-heading h2{font-size:clamp(29px,4vw,40px);margin:0 0 7px}
.related-heading p{font-size:13px;color:var(--muted)}
.related-products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.related-card{min-width:0}
.related-card-image{aspect-ratio:1/1.04;background:#fff;border:1px solid var(--line);border-radius:17px;overflow:hidden;display:grid;place-items:center;color:#bbaea0}
.related-card-image img{width:100%;height:100%;object-fit:contain}
.related-card h3{font-size:16px;line-height:1.4;margin:11px 0 4px}
.related-card>span{font-size:13px;font-weight:700}
.product-loading{grid-column:1/-1;min-height:350px;display:grid;place-content:center;text-align:center;gap:14px;color:var(--muted)}

/* Reserve the product layout while the product API request is in flight.
   This prevents the loading placeholder from collapsing into the real gallery/details grid. */
.product-detail-loading{min-height:clamp(540px,52vw,650px)}
.product-loading-skeleton{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);gap:clamp(34px,6vw,78px);align-items:start;width:100%;min-height:inherit}
.skeleton-gallery,.skeleton-information{min-width:0}
.skeleton-main-image{width:100%;aspect-ratio:1/1.05;border-radius:22px;background:linear-gradient(100deg,#e9dfd1 25%,#f5eee4 38%,#e9dfd1 62%);background-size:300% 100%;animation:skeleton-shimmer 1.5s ease-in-out infinite}
.skeleton-thumbnails{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:12px}
.skeleton-thumbnails i{display:block;aspect-ratio:1;border-radius:12px;background:#e9dfd1}
.skeleton-information{padding:12px 0 30px;display:flex;flex-direction:column;gap:18px}
.skeleton-line{display:block;height:14px;border-radius:8px;background:#e9dfd1}
.skeleton-title{height:38px;width:85%;margin-bottom:5px}
.skeleton-price{height:24px;width:28%;margin-bottom:8px}
.skeleton-option{height:54px;width:100%;margin-bottom:2px}
.skeleton-option.short{width:72%}
.skeleton-button{height:49px;width:100%;border-radius:999px;margin-top:8px}
@keyframes skeleton-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
@media(max-width:760px){
 .product-detail-loading{min-height:0}
 .product-loading-skeleton{display:flex;flex-direction:column;gap:20px;min-height:0}
 .skeleton-gallery{width:100%}
 .skeleton-main-image{aspect-ratio:1/1;border-radius:17px}
 .skeleton-thumbnails{display:none}
 .skeleton-information{width:100%;padding:0 2px 95px;gap:15px}
 .skeleton-title{height:30px}
 .skeleton-option{height:45px}
}
@media(prefers-reduced-motion:reduce){.skeleton-main-image{animation:none}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:760px){
 .product-main{padding:30px 15px 25px}
 .breadcrumbs{padding:17px 0 14px;font-size:10px;white-space:nowrap;overflow:hidden}
 .product-detail{display:flex;flex-direction:column;gap:20px}
 .detail-gallery{position:relative;top:auto;width:100%}
 .detail-main-image{aspect-ratio:1/1;border-radius:17px}
 .product-thumbnails{display:none}
 .gallery-dots{display:flex;justify-content:center;gap:7px;margin-top:12px}
 .gallery-dot{width:7px;height:7px;border:0;padding:0;border-radius:50%;background:#d5c8b8}
 .gallery-dot.active{background:var(--rose);width:19px;border-radius:99px}
 .detail-information{padding:0 2px 95px;width:100%}
 .detail-title{font-size:28px}
 .detail-description{margin-bottom:21px}
 .variant-selectors{gap:19px}
 .detail-purchase-actions{display:none}
 .detail-accordions{margin-top:26px}
 .related-section{padding:45px 0 35px}
 .related-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
 .related-card h3{font-size:14px}
 .mobile-purchase-bar{position:fixed;z-index:20;left:0;right:0;bottom:0;display:flex;align-items:center;gap:14px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(255,249,239,.97);border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(76,56,39,.08);backdrop-filter:blur(12px)}
 .mobile-bar-price{font-weight:700;font-size:14px;white-space:nowrap}
 .mobile-purchase-bar .btn{flex:1;min-height:45px}
 .product-page footer{margin-bottom:70px}
}
@media(min-width:761px) and (max-width:980px){.product-detail{grid-template-columns:minmax(0,1fr) minmax(300px,.9fr);gap:28px}.detail-title{font-size:29px}.related-products{grid-template-columns:repeat(3,minmax(0,1fr))}}
.variant-choice:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}
@media(max-width:760px){.product-card-visual .wishlist-btn{width:36px;height:36px;top:9px;right:9px}}

.detail-main-image{border:1px solid var(--line);padding:0;cursor:zoom-in;color:inherit}
.product-lightbox{position:fixed;inset:0;z-index:60;background:rgba(28,24,21,.92);display:none;align-items:center;justify-content:center;padding:35px}
.product-lightbox.open{display:flex}
.product-lightbox img{max-width:min(90vw,1000px);max-height:88vh;object-fit:contain}
.lightbox-close{position:absolute;top:18px;right:22px;width:44px;height:44px;border:1px solid rgba(255,255,255,.4);border-radius:50%;background:transparent;color:white;font-size:30px;line-height:1}
@media(max-width:760px){.detail-main-image{cursor:grab;touch-action:pan-y}}
@media(min-width:761px){.detail-gallery{position:relative;top:auto}.detail-information{position:sticky;top:104px}}
@media(max-width:760px){.detail-information{position:static;top:auto}}


/* Product-page header: back control left, brand mark centered, bag right. */
.product-page .product-nav{position:relative;min-height:78px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.product-page .product-back-button{grid-column:1;justify-self:start}
.product-page .product-centered-logo{grid-column:2;justify-self:center;text-align:center;width:max-content;max-width:none;padding:0}
.product-page .product-centered-logo .brand-logo-image{width:176px;height:88px;max-height:74px}
.product-page .product-centered-logo span{padding-left:0}
.product-page .product-nav-actions{grid-column:3;justify-self:end}
@media(max-width:760px){
 .product-page .product-nav{min-height:68px;padding:10px 16px;grid-template-columns:1fr auto 1fr}
 .product-page .product-centered-logo{font-size:23px}
 .product-page .product-back-button,.product-page .product-nav-actions .icon-btn{width:38px;height:38px}
}

/* Full-width product information panel below the gallery/details columns. */
.product-info-section{
  width:100%;
  margin:clamp(38px,5vw,64px) 0 0;
}
.product-info-inner{
  width:100%;
  padding:clamp(22px,3.2vw,38px) clamp(20px,3.5vw,44px);
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,249,239,.42);
}
.product-info-heading{margin-bottom:14px}
.product-info-heading h2{
  margin:0;
  font-size:clamp(22px,2.4vw,30px);
  line-height:1.2;
}
.product-info-heading .detail-eyebrow{margin-bottom:8px}
.product-info-section .detail-accordions{width:100%;border-top:1px solid var(--line)}
.product-info-section .detail-accordions summary{padding:21px 2px;font-size:14px}
.product-info-section .accordion-content{max-width:100%;padding:2px 2px 24px;font-size:14px;line-height:1.85;overflow-wrap:anywhere}
.product-info-section .accordion-content br+br{display:block;content:"";margin-top:7px}
@media(max-width:760px){
  .product-info-section{margin:24px 0 0}
  .product-info-inner{padding:20px 17px;border-radius:16px}
  .product-info-heading h2{font-size:23px}
  .product-info-section .detail-accordions summary{padding:17px 1px;font-size:13px}
  .product-info-section .accordion-content{font-size:12px;line-height:1.8;padding-bottom:19px}
}


/* Playful, hand-drawn-feeling header controls to complement Schoolbell. */
.product-page .product-nav .icon-btn{
  width:52px;height:52px;border:1.4px solid #D7C5AE;background:#FFF9EF;
  color:#403630;box-shadow:0 2px 0 rgba(85,65,48,.04);
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.product-page .product-nav .icon-btn:hover{transform:translateY(-2px) rotate(-3deg);background:#FFFFFF;border-color:var(--rose)}
.product-page .product-nav .icon-btn svg{width:27px;height:27px;display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.product-page .product-back-button svg{width:29px;height:29px}
.product-page .product-bag-button svg{width:27px;height:27px}
.product-page .product-nav .cart-count{right:-3px;top:-4px;width:19px;height:19px;font:600 10px "DM Sans",sans-serif}
@media(max-width:760px){
 .product-page .product-nav{min-height:72px}
 .product-page .product-nav .icon-btn{width:46px;height:46px}
 .product-page .product-nav .icon-btn svg{width:25px;height:25px}
}

/* Reviews sit between the full-width product information and recommendations. */
.reviews-section{padding:clamp(42px,6vw,72px) 0 10px}
.reviews-heading{margin-bottom:24px}
.reviews-heading h2{font-size:clamp(27px,3.5vw,38px);line-height:1.15;margin:0 0 8px}
.reviews-heading p{color:var(--muted);font-size:14px;margin:0;line-height:1.65}
.reviews-empty{min-height:190px;border:1px solid var(--line);border-radius:20px;background:rgba(255,249,239,.48);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px 20px}
.reviews-empty-stars{font-size:27px;letter-spacing:5px;color:#C9A98B;margin-bottom:12px;font-family:"Schoolbell",sans-serif}
.reviews-empty h3{font-size:21px;margin:0 0 7px}
.reviews-empty p{max-width:480px;margin:0;color:var(--muted);font-size:13px;line-height:1.7}
@media(max-width:760px){
 .reviews-section{padding:38px 0 4px}
 .reviews-empty{min-height:160px;border-radius:16px;padding:24px 18px}
 .reviews-empty h3{font-size:19px}
 .reviews-empty p{font-size:12px}
}


/* Scrollable garment size guide tables, matching the supplied Printify chart. */
.size-guide-content{min-width:0}
.size-guide-intro,.size-chart-note{margin:0 0 17px;color:var(--muted);font-size:13px;line-height:1.7}
.size-chart-section{margin:22px 0 25px}
.size-chart-section h3{font-size:15px;color:var(--ink);margin:0 0 10px;font-weight:700}
.size-chart-scroll{width:100%;max-width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.65);overscroll-behavior-x:contain}
.size-chart-table{width:100%;min-width:760px;border-collapse:collapse;font-size:13px;line-height:1.45;color:var(--ink);font-variant-numeric:tabular-nums}
.size-chart-table th,.size-chart-table td{padding:12px 13px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.size-chart-table thead th{font-weight:700;background:rgba(243,233,215,.6)}
.size-chart-table thead th:first-child,.size-chart-table tbody th{min-width:210px}
.size-chart-table tbody th{font-weight:500}
.size-chart-table tr:last-child th,.size-chart-table tr:last-child td{border-bottom:0}
.size-chart-table th:last-child,.size-chart-table td:last-child{border-right:0}
.size-chart-note{margin:4px 0 0;font-size:12px}
@media(max-width:760px){.size-guide-intro{font-size:12px}.size-chart-section{margin:18px 0 22px}.size-chart-section h3{font-size:13px}.size-chart-table{font-size:12px;min-width:720px}.size-chart-table th,.size-chart-table td{padding:10px 11px}}

@media(max-width:760px){.product-page .product-centered-logo .brand-logo-image{width:136px;height:68px;max-height:62px}}

.related-heading h2{font-size:clamp(29px,4vw,40px)}
.related-heading .eyebrow,.related-heading p{display:none}
.related-heart{color:var(--rose);font-family:"Schoolbell",sans-serif;font-weight:400}

/* Subtle overlay controls for browsing product mockups. */
.gallery-arrows{position:absolute;top:0;left:0;right:0;height:auto;aspect-ratio:1/1.05;display:flex;align-items:center;justify-content:space-between;padding:0 14px;pointer-events:none;z-index:2}
.gallery-arrows[hidden]{display:none}
.gallery-arrow{pointer-events:auto;width:42px;height:42px;border:1px solid rgba(70,58,48,.13);border-radius:50%;background:rgba(255,249,239,.48);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);color:rgba(45,39,34,.72);font-size:30px;line-height:1;display:grid;place-items:center;cursor:pointer;transition:background .18s ease,opacity .18s ease}
.gallery-arrow:hover{background:rgba(255,249,239,.78)}
.gallery-arrow:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
@media(max-width:760px){.gallery-arrows{padding:0 10px;aspect-ratio:1/1}.gallery-arrow{width:36px;height:36px;font-size:26px}}
/* Directional slide motion for the main product image and gallery pagination. */
.detail-main-image{position:relative}
.detail-main-photo{animation-duration:320ms;animation-timing-function:cubic-bezier(.22,.7,.25,1);animation-fill-mode:both;will-change:transform,opacity}
.detail-main-photo.slide-next{animation-name:product-slide-next}
.detail-main-photo.slide-previous{animation-name:product-slide-previous}
@keyframes product-slide-next{from{opacity:.45;transform:translateX(34px)}to{opacity:1;transform:translateX(0)}}
@keyframes product-slide-previous{from{opacity:.45;transform:translateX(-34px)}to{opacity:1;transform:translateX(0)}}
.gallery-dot{transition:width .28s ease,background-color .28s ease,transform .28s ease}
.gallery-dot.active{transform:scale(1.04)}
.product-thumb{transition:border-color .22s ease,transform .22s ease,opacity .22s ease}
.product-thumb.active{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.detail-main-photo,.gallery-dot,.product-thumb{animation:none!important;transition:none!important}}

/* True directional product carousel: every image occupies one slide in a horizontal track. */
.detail-main-image{display:block;position:relative;overflow:hidden;touch-action:pan-y pinch-zoom;cursor:grab}
.detail-main-image:active{cursor:grabbing}
.product-gallery-track{display:flex;width:100%;height:100%;transform:translate3d(calc(var(--gallery-index,0) * -100%),0,0);transition:transform 420ms cubic-bezier(.22,.72,.22,1);will-change:transform}
.product-gallery-slide{flex:0 0 100%;width:100%;height:100%;display:grid;place-items:center;overflow:hidden}
.product-gallery-slide .detail-main-photo{width:100%;height:100%;object-fit:contain;display:block;animation:none;opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.product-gallery-track{transition:none}}

/* Persistent, directly-manipulated horizontal product carousel. */
.product-gallery-track{
  display:flex;width:100%;height:100%;
  transform:translate3d(calc(var(--gallery-index,0) * -100% + var(--drag-offset,0px)),0,0);
  transition:transform 380ms cubic-bezier(.22,.72,.22,1);
  will-change:transform;
}
.product-gallery-track.is-dragging{transition:none;cursor:grabbing}
.product-gallery-slide{flex:0 0 100%;width:100%;height:100%;min-width:100%;display:grid;place-items:center;overflow:hidden}
.product-gallery-slide .detail-main-photo{width:100%;height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none}
.gallery-dot{transition:width 260ms ease,background-color 260ms ease,opacity 260ms ease}
@media(prefers-reduced-motion:reduce){.product-gallery-track,.gallery-dot{transition:none!important}}