/* Product page. Mobile first; 750px = two columns with thumbnails under the image; 990px = thumbnails column on the left. */
.product-section{background:var(--sand);padding:11px 0 40px}
.product{display:grid;grid-template-columns:minmax(0,1fr)}
.gallery{display:flex;flex-direction:column}
.gallery__main{order:1;padding:5px 0}
.gallery__slide{margin:0;border:1px solid var(--ink-15);border-radius:var(--radius-lg);overflow:hidden;background:var(--white);aspect-ratio:360/479}
.gallery__slide[hidden]{display:none}
.gallery__slide img{width:100%;height:100%;object-fit:contain;border-radius:var(--radius-lg)}
.gallery__thumbs{order:2;display:flex;align-items:center;margin-top:var(--space-10)}
.gallery__thumb-list{display:flex;gap:10px;flex:1;min-width:0;overflow:hidden;padding:5px;scroll-behavior:smooth}
.gallery__thumb-list li{flex:0 0 calc((100% - 20px)/3)}
.gallery__thumb{display:block;width:100%;aspect-ratio:1;border:1px solid transparent;border-radius:var(--radius-sm);overflow:hidden;background:var(--white);padding:0}
.gallery__thumb.is-active{border-color:var(--green)}
.gallery__thumb img{width:100%;height:100%;object-fit:cover}
.gallery__arrow{flex:none;width:30px;height:30px;border:1px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink);background:var(--sand)}
.gallery__arrow--prev .icon{transform:rotate(180deg)}
.gallery__arrow[disabled]{color:var(--ink-30);border-color:var(--ink-30);cursor:default}
.gallery__main{position:relative}
.gallery__zoom{position:absolute;z-index:1;left:13px;top:19px;width:30px;height:30px;border-radius:50%;border:1px solid var(--ink-15);background:rgba(244,242,236,.8);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.gallery__dots{display:none}

.product__info{padding-top:27px}
.product__title{font-size:var(--text-3xl);line-height:var(--lh-heading);margin:0 0 15px}
.product__rating{display:flex;align-items:center;gap:6px;margin:15px 0;font-size:var(--text-sm);line-height:var(--lh-tight);color:var(--ink-75)}
.product__rating .stars{display:flex;gap:2px;color:var(--success)}
.product__price{margin:15px 0 0}
.price{font-size:var(--text-md);line-height:var(--lh-body);color:var(--ink-75)}
.price__compare{margin-left:8px;font-size:.87em}
.product__price .price{font-size:var(--text-xl)}
/* live: the stock line sits 1px under the price block (the instalment/tax placeholders between them net out to 1px) */
.product__inventory{margin:1px 0 0;min-height:25px;font-size:var(--text-base);line-height:var(--lh-body)}
.inventory{display:flex;align-items:center;font-weight:var(--fw-bold);color:var(--warning)}
.inventory--in{color:var(--success)}
.inventory--out{color:var(--sale)}
/* status dot as on live: 19px halo at 30% of the status colour, 13px core with a white ring */
.inventory__dot{width:19px;height:19px;border-radius:50%;margin:0 8px 0 0;position:relative;flex:none}
.inventory__dot::before{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;opacity:.3}
.inventory__dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:currentColor;border:1.5px solid var(--white)}

.form-label{display:block;font-size:var(--text-control);font-weight:var(--fw-medium);line-height:var(--lh-body);color:var(--ink);margin:0 0 2px;padding:0 2px 0 0}
.variant-picker{border:0;margin:20px 0 0;padding:0 0 12px;min-width:0}
.variant-picker legend{padding:0 2px 0 0}
.pill{display:inline-block;margin:7px 5px 2px 0;cursor:pointer}

.product-form{margin:0}
.product-form__buttons{display:flex;flex-direction:column;gap:20px;margin:25px 0 25px}
.product-form__qty{display:flex;align-items:center;gap:15px}
.product-form__qty .form-label{margin:0 0 6px}
.product-form__submit{width:100%;min-height:43px;padding:12px 16px;border-radius:var(--radius-md);font-size:var(--text-control);line-height:var(--lh-tight)}
.product-form__submit[disabled]{background:var(--green);opacity:.7}
.product-form__message{margin:0 0 15px;font-size:var(--text-md);color:var(--ink)}
.product-form__message a{font-weight:var(--fw-bold)}

.product__instalments{display:flex;align-items:center;margin:15px 0;font-size:var(--text-base);line-height:var(--lh-body);color:var(--ink-75)}
.product__instalments img{width:48px;height:48px;margin-right:10px}

.delivery{margin:30px 0;padding:25px;background:var(--white);border-radius:var(--radius-lg)}
.delivery[hidden]{display:none}
/* the text column is as wide as the heading (live sizes it to the heading); the date scales with that width */
.delivery__content{width:fit-content;max-width:100%}
.delivery__heading{display:block;font-size:var(--text-base);font-weight:var(--fw-bold);line-height:var(--lh-body);color:var(--ink);margin:0 0 8px}
.delivery__text{width:0;min-width:100%;font-size:var(--text-md);line-height:var(--lh-body);color:var(--ink);container-type:inline-size}
.delivery__date{display:inline-block;max-width:100%;white-space:nowrap;font-size:clamp(20px,10.5cqw,60px);font-weight:var(--fw-bold);line-height:var(--lh-tight)}

/* seller line (skat-core, not on live): a one-line footnote under the description that sits in the section's
   bottom padding (negative bottom margin): description-to-banner distance stays as on live (64px mobile, 80px desktop) */
.product__seller{margin:-15px 0 -6px;font-size:var(--text-sm);line-height:var(--lh-body);color:var(--ink-75)}
/* flex column: block margins add up instead of collapsing (as measured on live) */
.product__description{display:flex;flex-direction:column;margin:25px 0;font-size:var(--text-base);line-height:var(--lh-body);color:var(--ink)}
.product__description>*{margin:1em 0}
.product__description>:first-child{margin-top:0}
.product__description>:last-child{margin-bottom:0}
.product__description blockquote{display:flow-root;margin:1em 40px;padding-left:10px;border-left:1px solid var(--ink-15);color:var(--ink-75)}
.product__description blockquote p{margin:-5px 0}
.product__description a{color:var(--ink)}

@media (min-width:750px){
  .product-section{padding:14px 0 50px}
  .product{grid-template-columns:1fr 1fr}
  .product__info{padding:0 0 0 30px}
  .gallery__main{padding:0}
  .gallery__slide{aspect-ratio:1}
  .gallery__thumbs{margin-top:var(--space-20)}
  .gallery__thumb-list{padding:0 5px}
  .gallery__thumb-list li{flex-basis:calc((100% - 30px)/4)}
  .product-form__qty{flex-direction:column;align-items:stretch;gap:0}
  .product-form__qty .form-label{margin:0 0 6px}
  .product-form__submit{min-height:47px;padding:12px 20px}
  .product__description blockquote{padding-left:15px}
}
@media (min-width:990px){
  .product-section{padding:20px 0 70px}
  .product{grid-template-columns:65% 35%}
  .product__info{padding:15px 0 0 40px}
  .gallery{flex-direction:row;align-items:flex-start;padding-top:15px}
  .gallery__thumbs{order:0;flex-direction:column;width:133px;height:550px;margin:0 20px 0 0}
  .gallery__arrow--prev{margin-bottom:6px}
  .gallery__arrow--next{margin-top:6px}
  .gallery__arrow--prev .icon{transform:rotate(-90deg)}
  .gallery__arrow--next .icon{transform:rotate(90deg)}
  .gallery__thumb-list{flex-direction:column;width:100%;padding:5px 5px 5px 1px}
  .gallery__thumb-list li{flex:0 0 127px}
  .gallery__main{flex:1;min-width:0}
  .product-form__buttons{flex-direction:row;align-items:flex-end}
  .product-form__qty,.product-form__submit{flex:0 0 calc(50% - 10px);min-width:0}
  .delivery__heading{margin-top:2px}
  /* live: the info column ends 10px under the description on desktop */
  .product__description{margin-bottom:var(--space-10)}
  .product__seller{margin:0 0 -20px}
  .variant-picker{margin-top:21px}
}
.product-form__qty .qty{display:flex;flex:none}
.product__price .price{display:block}
.delivery__heading{max-width:none;margin:0;font-size:var(--text-base);line-height:var(--lh-body)}
@media (min-width:750px){.gallery__zoom{display:none}}
@media (min-width:990px){.delivery__heading{margin:0}}
.woocommerce-price-suffix{margin-left:var(--space-5);font-size:var(--text-sm);font-weight:var(--fw-regular);color:var(--ink-muted)}