/*
 * Víkingur 26: the product page (single-product.php), after the design's
 * ProductPage (ui_kits/web/ShopPages.jsx). The add-to-cart form is
 * WooCommerce's own (with the YITH plugins' parts, and Breakdance's quantity
 * buttons, which it still swaps in); WooCommerce's stylesheets are not
 * loaded, so this file styles it to the design.
 */

.vik-pdp-top{padding-top:24px}

.vik-pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}

/* ── Photo and thumbnails ── */
.vik-pdp__media{position:sticky;top:100px;display:grid;gap:12px;min-width:0}
.vik-pdp__main{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius-card);background:var(--canvas)}
.vik-pdp__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vik-pdp__shield{position:absolute;left:50%;top:50%;width:30%;height:auto;aspect-ratio:980/1043;transform:translate(-50%,-50%);color:var(--gray-200)}
.vik-pdp__label{position:absolute;left:16px;top:16px}
.vik-pdp__thumbs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.vik-pdp__thumbs::-webkit-scrollbar{display:none}
.vik-pdp__thumb{flex:none;width:72px;height:72px;padding:0;overflow:hidden;border:1px solid var(--border-hairline);border-radius:var(--radius-md);background:var(--canvas);cursor:pointer}
.vik-pdp__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.vik-pdp__thumb.is-active{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.vik-pdp__thumb:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ── Name, price, text ── */
.vik-pdp__info{display:grid;gap:28px;min-width:0}
.vik-pdp__head{display:grid;gap:14px;padding-bottom:28px;border-bottom:1px solid var(--border-hairline)}
.vik-pdp__type{font-family:var(--font-condensed);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.vik-pdp__title{margin:0;font-family:var(--font-display);font-weight:900;font-size:clamp(44px,4.6vw,68px);line-height:.88;text-transform:uppercase;text-wrap:balance}
.vik-pdp__price{font-family:var(--font-condensed);font-weight:700;font-size:28px;color:var(--ink)}
.vik-pdp__price del{margin-left:8px;font-size:17px;font-weight:400;color:var(--text-secondary)}
.vik-pdp__price ins{text-decoration:none;color:var(--vik-astrida)}
.vik-pdp__price .woocommerce-price-suffix,.vik-pdp__form .woocommerce-price-suffix{margin-left:6px;font-family:var(--font-body);font-weight:400;font-size:13px;color:var(--text-secondary)}
.vik-pdp__short{max-width:520px;font-size:17px;line-height:1.55;color:var(--text-secondary)}
.vik-pdp__short p{margin:0}
.vik-pdp__short p+p{margin-top:10px}

/* ── The add-to-cart form (WooCommerce's markup) ── */
.vik-pdp__form{display:grid;gap:16px}
.vik-pdp__form form.cart{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;margin:0}
.vik-pdp__form form.variations_form{display:grid;gap:20px}
.vik-pdp__form table.variations,.vik-pdp__form table.variations tbody{display:grid;gap:20px;width:100%;margin:0;border:0;border-collapse:collapse}
.vik-pdp__form table.variations tr{display:grid;gap:10px}
.vik-pdp__form table.variations th,.vik-pdp__form table.variations td{display:block;padding:0;border:0;text-align:left}
.vik-pdp__form table.variations label{font-family:var(--font-condensed);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.vik-pdp__form select{width:100%;height:48px;padding:0 14px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--white);font:inherit;font-size:15px;color:var(--ink)}
.vik-pdp__form select:focus{outline:2px solid var(--focus-ring);outline-offset:1px}
.vik-pdp__form .bde-woo-select__arrow{display:none}
.vik-pdp__form .reset_variations{display:inline-block;margin-top:10px;font-size:13px;color:var(--text-secondary)}
.vik-pdp__form .single_variation_wrap{display:grid;gap:16px}
.vik-pdp__form .woocommerce-variation-price .price{font-family:var(--font-condensed);font-weight:700;font-size:22px}
.vik-pdp__form .woocommerce-variation-availability p,.vik-pdp__form p.stock{margin:0;font-size:14px;color:var(--text-secondary)}
.vik-pdp__form .stock.out-of-stock{color:var(--vik-astrida);font-weight:700}
.vik-pdp__form .woocommerce-variation-add-to-cart{display:flex;flex-wrap:wrap;gap:8px}
/* Quantity stepper. */
.vik-pdp__form .quantity{display:flex;align-items:center;height:56px;border:1px solid var(--border-hairline)}
.vik-pdp__form .quantity input.qty{width:44px;height:100%;padding:0;border:0;background:transparent;font:inherit;font-weight:700;font-size:16px;text-align:center;-moz-appearance:textfield}
.vik-pdp__form .quantity input.qty::-webkit-outer-spin-button,.vik-pdp__form .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.vik-pdp__form .bde-quantity-button{position:relative;width:44px;height:100%;padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
.vik-pdp__form .bde-quantity-button::before{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;background:currentColor;transform:translate(-50%,-50%)}
.vik-pdp__form .bde-quantity-button--inc::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:14px;background:currentColor;transform:translate(-50%,-50%)}
.vik-pdp__form .bde-quantity-button:hover{background:var(--gray-50)}
/* The button: the design's large primary button. */
.vik-pdp__form .single_add_to_cart_button{flex:1;min-width:200px;height:56px;padding:0 24px;border:0;border-radius:var(--radius-pill);background:var(--action-primary);color:#fff;cursor:pointer;font-family:var(--font-condensed);font-weight:700;font-size:16px;letter-spacing:.04em;text-transform:uppercase;transition:background var(--dur-fast)}
.vik-pdp__form .single_add_to_cart_button:hover{background:var(--action-primary-hover)}
.vik-pdp__form .single_add_to_cart_button.disabled,.vik-pdp__form .single_add_to_cart_button:disabled{opacity:.45;cursor:not-allowed}
.vik-pdp__form .single_add_to_cart_button:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
/* YITH add-ons (name and number printing on kits) keep their own layout; type follows the page. */
.vik-pdp__form .yith-wapo-container{width:100%;font-family:var(--font-body);font-size:15px}
.vik-pdp__form .yith-wapo-container:empty{display:none}

/* ── Facts and accordions ── */
.vik-pdp__facts{display:grid;gap:12px;margin:0;padding:20px 0;list-style:none;border-top:1px solid var(--border-hairline);border-bottom:1px solid var(--border-hairline);font-size:15px}
.vik-pdp__facts li{display:flex;align-items:center;gap:12px}
.vik-pdp__facts .vik-icon{flex:none;color:var(--text-secondary)}
.vik-pdp__facts a{color:var(--ink)}
.vik-acc{border-bottom:1px solid var(--border-hairline)}
.vik-acc summary{display:flex;justify-content:space-between;align-items:center;padding:20px 0;cursor:pointer;list-style:none;font-family:var(--font-condensed);font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase}
.vik-acc summary::-webkit-details-marker{display:none}
.vik-acc summary .vik-icon{transition:transform var(--dur-fast)}
.vik-acc[open] summary .vik-icon{transform:rotate(45deg)}
.vik-acc summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.vik-acc__body{padding:0 0 24px;font-size:16px;line-height:1.6;color:var(--text-secondary)}
/* The description is editors' HTML: headings, lists and photos. Two photos
   on one line sit side by side. ([gallery] does not work here: wp_kses_post
   strips its <style> tag and leaves the CSS as text.) */
.vik-acc__body>*{margin:0}
.vik-acc__body>*+*{margin-top:14px}
.vik-acc__body h2,.vik-acc__body h3,.vik-acc__body h4{margin-top:28px;font-family:var(--font-condensed);font-weight:700;font-size:18px;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.vik-acc__body>:first-child{margin-top:0}
.vik-acc__body ul,.vik-acc__body ol{padding-left:1.2em}
.vik-acc__body img{display:block;max-width:100%;height:auto}
.vik-acc__body p:has(>img+img){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.vik-acc__body p:has(>img+img) img{width:100%}

.vik-pdp-more .vik-shop-grid{gap:24px}

@media (max-width:900px){
	.vik-pdp{grid-template-columns:1fr;gap:32px}
	.vik-pdp__media{position:static}
}
@media (max-width:640px){
	.vik-pdp__title{font-size:clamp(36px,10vw,48px)}
	.vik-pdp__form .single_add_to_cart_button{min-width:0}
}

/* Size buttons (product.js), over the dropdown they drive. */
.vik-sizes{display:flex;flex-wrap:wrap;gap:8px}
.vik-size{min-width:64px;min-height:48px;padding:6px 14px;border:1px solid var(--border-hairline);background:var(--white);color:var(--ink);cursor:pointer;font-family:var(--font-condensed);font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase;transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
.vik-size:hover{border-color:var(--ink)}
.vik-size.is-selected{background:var(--ink);border-color:var(--ink);color:#fff}
.vik-size:disabled{color:var(--gray-400);text-decoration:line-through;cursor:not-allowed;border-color:var(--border-hairline)}
.vik-size:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.vik-hidden-select{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}

/* Add-ons sold with the product (inc/extras.php): a checkbox per product,
   its own size buttons under it, inside the add-to-cart form. */
.vik-extras{flex:1 0 100%;display:grid;gap:8px;min-width:0;margin:0 0 8px;padding:0;border:0}
.vik-extras__title{margin:0 0 4px;padding:0;font-family:var(--font-condensed);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.vik-extra{display:grid;gap:12px;padding:16px;border:1px solid var(--border-hairline);border-radius:var(--radius-md);background:var(--white);transition:border-color var(--dur-fast)}
.vik-extra.is-on{border-color:var(--ink)}
.vik-extra__head{display:flex;align-items:center;gap:12px;cursor:pointer}
.vik-extra__check{flex:none;width:20px;height:20px;margin:0;accent-color:var(--ink);cursor:pointer}
.vik-extra__img{flex:none;width:44px;height:44px;object-fit:cover;border-radius:var(--radius-sm);background:var(--gray-100)}
.vik-extra__name{flex:1;min-width:0;font-family:var(--font-condensed);font-weight:700;font-size:17px;line-height:1.2;text-transform:uppercase}
.vik-extra__price{flex:none;font-family:var(--font-condensed);font-weight:700;font-size:17px;white-space:nowrap}
.vik-extra__price del{margin-right:4px;font-weight:400;color:var(--text-secondary)}
.vik-extra__price ins{text-decoration:none}
.vik-extra__sizes{display:flex;flex-wrap:wrap;gap:8px;padding-left:32px}
.vik-extra__size{position:relative;display:block}
.vik-extra__size input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.vik-extra__size span{display:flex;align-items:center;justify-content:center;min-width:56px;min-height:44px;padding:6px 12px;border:1px solid var(--border-hairline);background:var(--white);font-family:var(--font-condensed);font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase;transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
.vik-extra__size:hover span{border-color:var(--ink)}
.vik-extra__size input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
/* A product's only size is chosen ahead, but looks chosen only once ticked. */
.vik-extra:not(.is-on) .vik-extra__size input:checked+span{background:var(--white);border-color:var(--border-hairline);color:var(--ink)}
.vik-extra__size input:disabled{cursor:not-allowed}
.vik-extra__size input:disabled+span{color:var(--gray-400);text-decoration:line-through;border-color:var(--border-hairline)}
.vik-extra__size input:focus-visible+span{outline:2px solid var(--focus-ring);outline-offset:2px}
.vik-extra__error{margin:0;padding-left:32px;font-size:14px;font-weight:700;color:var(--vik-astrida)}
@media (max-width:640px){
	.vik-extra__sizes,.vik-extra__error{padding-left:0}
}