/* ==========================================================================
   Pantaphone — Single Product (v1.2)
   ========================================================================== */

/* =================== GLOBAL TOKENS ================= */
:root{
  --ppw:1424px;
  --pp-gap:24px;
  --pp-radius:14px;
  --pp-border:#e7e9ee;
  --pp-shadow:rgba(0,0,0,.08) 0 4px 16px;
  --pp-bg:#fff; --pp-brand:#0b1220; --pp-accent:#2232ff; --pp-muted:#666b76;
  --pp-h1:clamp(20px,2.2vw,26px);
  --pp-h2:clamp(16px,1.9vw,20px);
  --pp-body:14.5px; --pp-small:12.5px; --pp-chip:30px; --pp-pad:16px;

  /* Main gallery targets (slightly smaller) */
  --pp-img-w:400px;
  --pp-img-aspect:1.28;
  --pp-img-maxw: clamp(220px, 80vw, var(--pp-img-w));
  --pp-img-maxh: calc(var(--pp-img-maxw) * var(--pp-img-aspect));
  --pp-gallery-minh: 520px;

  --pp-price:#07A1FE;
}

@media (max-width:560px){
  :root{
    --pp-pad:18px;
    --pp-gallery-minh: 430px;
    --pp-img-maxw: clamp(200px, 68vw, 360px);
  }
}
@media (max-width:380px){
  :root{
    --pp-pad:14px;
    --pp-gallery-minh: 390px;
    --pp-img-maxw: clamp(190px, 64vw, 330px);
  }
}

html,body{ overflow-x:hidden; }
body.single-product{ background:#fafbfe; }

/* Remove theme wrappers width constraints */
.woocommerce.single-product #main-content .container{max-width:100%!important;width:100%!important;padding-top:0!important;}
.woocommerce.single-product #main-content .container:before{display:none!important;}
.woocommerce.single-product #sidebar{display:none!important;}
.woocommerce.single-product #left-area{width:100%!important;float:none!important;}
@media (min-width:981px){ .et_right_sidebar #left-area{padding-right:0!important;} }

/* Kill Woo/Theme floats */
.woocommerce.single-product div.product .images,
.woocommerce.single-product div.product .summary{
  float:none!important; width:auto!important; margin:0!important; clear:none!important;
}

/* ---------- Centered content strip ---------- */
.pp-container{ max-width:var(--ppw); width:100%; margin-inline:auto; padding-inline:var(--pp-pad); box-sizing:border-box; }
.ppp-wrap{ padding-top:8px; padding-bottom:28px; display:flex; flex-direction:column; gap:22px!important; }
.ppp-wrap > *{ display:block; overflow:visible!important; }

/* ======================================================================
   GRID
   ====================================================================== */
body.single-product.woocommerce .ppp-wrap .ppp-columns{
  display:grid !important;
  grid-template-areas: "left right";
  grid-template-columns: 47% 47% !important;
  column-gap: 6% !important;
  align-items:start !important;
  width:100%;
  position:relative; isolation:isolate; row-gap:22px;
}
body.single-product.woocommerce .ppp-wrap .ppp-left,
body.single-product.woocommerce .ppp-wrap .ppp-right{ min-width:0; }
body.single-product.woocommerce .ppp-wrap .ppp-left{ grid-area:left; position:relative; }
body.single-product.woocommerce .ppp-wrap .ppp-right{ grid-area:right; position:sticky; top:72px; align-self:start; }

@media (min-width:1600px){
  body.single-product.woocommerce .ppp-wrap .ppp-columns{
    grid-template-columns: 660px 740px !important;
    column-gap: var(--pp-gap) !important;
  }
}

/* MOBILE/TABLET */
@media (max-width:1059.98px){
  body.single-product.woocommerce .ppp-wrap .ppp-columns{
    grid-template-areas:
      "left"
      "right";
    grid-template-columns:1fr !important;
    column-gap:0 !important;
    row-gap:18px !important;
  }
  body.single-product.woocommerce .ppp-wrap .ppp-right{ position:static; top:auto; }

  .pp-container{ padding-inline: var(--pp-pad); }
  .ppp-gallery .woocommerce-product-gallery__wrapper::after{ inset:-4%; }
}
@media (max-width:494px){
  .ppp-gallery .woocommerce-product-gallery__wrapper::after{ inset:-2%; }
}

/* Flex fallback */
@supports not (display:grid){
  body.single-product.woocommerce .ppp-wrap .ppp-columns{
    display:flex !important; gap:var(--pp-gap) !important; align-items:flex-start !important; flex-wrap:wrap;
  }
  .ppp-left,.ppp-right{ flex:1 1 100%; min-width:0; }
  @media (min-width:1060px){
    .ppp-left,.ppp-right{ flex:1 1 calc(50% - var(--pp-gap)); }
  }
}

/* Full-width blocks */
.woocommerce.single-product .ppp-related,
.woocommerce.single-product .ppp-usp,
.woocommerce.single-product .ppp-productinfo,
.woocommerce.single-product .ppp-trustblock,
.woocommerce.single-product .ppp-faq{ grid-column:1 / -1 !important; }

/* ---------------- Header ---------------- */
.ppp-title-mobile{ display:none!important; }
.ppp-header{
  position:relative; isolation:isolate;
  display:flex; align-items:flex-start; gap:12px;
  padding-bottom:10px; border-bottom:1px solid rgba(0,0,0,.06);
  flex-wrap:wrap;
}

/* Color splash behind header (mirrors gallery glow) */
.ppp-header::after{
  content:""; position:absolute; inset:-10px -8px 0 -8px; z-index:0;
  background:
    radial-gradient(40% 60% at 15% 30%, rgba(1,161,255,.20) 0%, rgba(1,161,255,0) 70%),
    radial-gradient(42% 60% at 70% 25%, rgba(51,190,255,.20) 0%, rgba(51,190,255,0) 72%),
    radial-gradient(50% 70% at 85% 80%, rgba(255,217,50,.18) 0%, rgba(255,217,50,0) 75%);
  filter:blur(22px) saturate(118%); pointer-events:none;
}
@media (max-width:560px){
  .ppp-header::after{ inset:-14px -12px -2px -12px; filter:blur(26px) saturate(130%); opacity:.95; }
}
@media (min-width:981px){ .ppp-header{ padding-bottom:12px; } }
.ppp-header > *{ position:relative; z-index:1; }

.ppp-title{ margin:0 0 4px; font-weight:800; font-size:var(--pp-h1); line-height:1.15; color:#0d1117; }

/* Stronger combo line (Välj ett alternativ | …) */
.ppp-combo{
  color:#23262d;
  font-size:clamp(13.5px, 1.2vw, 15px);
  font-weight:700;
  letter-spacing:.1px;
  opacity:.98;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ===== Price — right aligned ===== */
.ppp-pricewrap{
  margin-left:auto;
  text-align:right;
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
  min-width:fit-content; max-width:100%;
  overflow-wrap:anywhere;
}
.ppp-pricewrap .ppp-price{
  margin:0; font-weight:600; line-height:1.25;
  color:var(--pp-price);
  display:flex; align-items:baseline; gap:8px 10px; flex-wrap:wrap;
  white-space:normal; text-align:right;
  font-size:clamp(1.15rem, 5vw, 1.75rem);
}
.ppp-pricewrap .ppp-price .woocommerce-Price-amount{ font:inherit; color:inherit; font-weight:600; }
.ppp-pricewrap .ppp-price .woocommerce-Price-currencySymbol{ font:inherit; color:inherit; }
.ppp-pricewrap .ppp-price span[aria-hidden="true"]{ opacity:.75; margin-inline:4px; }
.ppp-vat{ font-size:var(--pp-small); color:#6b7280; margin-top:0; }

@media (max-width:560px){
  .ppp-pricewrap{ flex:1 1 100%; }
}

/* ---------------- Gallery ---------------- */
.woocommerce.single-product .ppp-left .woocommerce-product-gallery{
  box-sizing:border-box; width:100%!important; max-width:100%!important; margin:0 auto!important;
  position:relative; display:block; overflow:visible;
}
.ppp-gallery{ position:relative; padding:0; border-radius:0; overflow:visible; background:transparent; box-shadow:none; }
.ppp-left .clearfix{ display:contents!important; }
.ppp-gallery .woocommerce-product-gallery__wrapper{
  position:relative; z-index:2; width:100%; max-width:100%;
  min-height: var(--pp-gallery-minh);
  display:flex; align-items:center; justify-content:center;
}
/* Glow */
.ppp-gallery .woocommerce-product-gallery__wrapper::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-5deg);
  z-index:1; width:92%; height:92%;
  border-radius:50% 50% 64% 64% / 46% 46% 82% 82%;
  background:linear-gradient(165deg,#01a1ff 0%,#33beff 42%,#ffd932 100%);
  filter:blur(12px) saturate(115%); opacity:.62; pointer-events:none;
}
.ppp-gallery .woocommerce-product-gallery__wrapper::after{
  content:""; position:absolute; inset:-8%; z-index:0;
  background:radial-gradient(closest-side, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 58%, rgba(255,255,255,0) 85%);
  filter:blur(12px); pointer-events:none;
}
/* Image sizing */
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__wrapper a{
  position:relative; z-index:3; display:flex; align-items:center; justify-content:center; width:100%; height:100%;
}
.woocommerce-product-gallery__wrapper img{
  width:auto!important; height:auto!important;
  max-width: var(--pp-img-maxw) !important;
  max-height: var(--pp-img-maxh) !important;
  object-fit:contain; margin:0 auto!important;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.12));
}
/* Zoom trigger */
.woocommerce-product-gallery__trigger{
  position:absolute; right:12px; top:12px; z-index:4; background:rgba(255,255,255,.96);
  border-radius:999px; padding:6px 8px; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); box-shadow:0 1px 6px rgba(0,0,0,.08);
}

/* Plektrum badge */
.ppp-plectrum{
  position:absolute;
  left: calc(50% - (var(--pp-img-maxw) / 2) + 8px);
  bottom: calc(50% - (var(--pp-img-maxh) / 2) + 8px);
  width:96px; height:108px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  text-align:center; color:#0b1220; transform:rotate(-5deg);
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.12)); z-index:5; padding-top:8px; pointer-events:none;
}
.ppp-plectrum::before{
  content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,#fff 0%,#f6f8fb 100%);
  border:1px solid rgba(0,0,0,.08);
  border-radius:50% 50% 64% 64% / 46% 46% 82% 82%;
}
.ppp-plectrum__icon{ position:relative; z-index:2; line-height:0; opacity:.96; transform:translateY(-2px); }
.ppp-plectrum__icon svg{ width:40px; height:40px; color:#0b1220; display:block; }
.ppp-plectrum__text{ position:relative; z-index:2; margin-top:3px; font-weight:800; font-size:11.5px; line-height:1.1; color:#0b1220; padding:0 6px; }

@media (max-width:560px){
  .ppp-plectrum{
    transform:rotate(-5deg) scale(.82);
    width:84px; height:94px; padding-top:6px;
    left: max(6px, calc(50% - (var(--pp-img-maxw) / 2) + 6px));
    bottom: max(6px, calc(50% - (var(--pp-img-maxh) / 2) + 6px));
  }
  .ppp-plectrum__icon svg{ width:34px; height:34px; }
  .ppp-plectrum__text{ font-size:10.5px; }
}
@media (max-width:380px){
  .ppp-plectrum{ transform:rotate(-5deg) scale(.75); }
}

/* ---------------- Right column (selectors/meta) ---------------- */
.ppp-selectors{
  margin-top:12px; border:0; border-radius:0; background:transparent; box-shadow:none; padding:0; position:relative;
  margin-left:0; margin-right:0;
}

/* Stronger short description */
.ppp-selectors .woocommerce-product-details__short-description{
  margin:0 0 12px;
  color:#151922;
  font-size:clamp(14.5px, 1.2vw, 16px);
  line-height:1.55;
}

/* Variation table */
.ppp-selectors .variations_form.cart{ width:100%; }
.ppp-selectors table.variations{ width:100%; border-collapse:separate; border-spacing:0 12px; margin:0; }
.ppp-selectors .variations tr{ display:grid; grid-template-columns:1fr; gap:8px; margin:0; }
@media (min-width:761px){
  .ppp-selectors .variations tr{ grid-template-columns:160px 1fr; gap:12px; }
}
.ppp-selectors .variations th, .ppp-selectors .variations td{ padding:0; border:0; background:transparent; }

/* >>> BIGGER, CLEARER LABELS + CHIP FOR SELECTED VALUE <<< */
.ppp-selectors .variations th{
  align-self:center;
}
.ppp-selectors .variations th label{
  display:inline-flex; align-items:center; gap:8px;
  font-size:clamp(14px, 1.15vw, 15.5px);
  font-weight:800; color:#0b1220; letter-spacing:.15px;
}

/* Selected-variation chip */
.ppp-selectors .variations th .woo-selected-variation-item-name{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:999px;
  font-size:12.5px; line-height:1; font-weight:700;
  color:#1b233a; background:#eef2ff; border:1px solid #dfe5ff;
  translate: 0 0.5px;
}
.ppp-selectors .variations th .woo-selected-variation-item-name:empty{
  display:none;
}

/* ---------- Variable items LAYOUT (non-color only) ---------- */
.ppp-selectors .variable-items-wrapper.button-variable-items-wrapper{
  display:flex; flex-wrap:wrap; gap:10px;
}
@media (min-width:981px){
  .ppp-selectors .variable-items-wrapper.button-variable-items-wrapper:not([data-attribute_name*="color"]):not([data-attribute_name*="färg"]):not([data-attribute_name*="farg"]) .variable-item{
    flex:0 1 18%;
    max-width:18%;
    min-width:150px;
  }
}
@media (max-width:980.98px){
  .ppp-selectors .variable-items-wrapper.button-variable-items-wrapper:not([data-attribute_name*="color"]):not([data-attribute_name*="färg"]):not([data-attribute_name*="farg"]) .variable-item{
    flex:1 1 100%;
    max-width:100%;
  }
}

/* ---------- Variable items VISUALS (non-color) ---------- */
.ppp-selectors .variable-items-wrapper.button-variable-items-wrapper:not([data-attribute_name*="color"]):not([data-attribute_name*="färg"]):not([data-attribute_name*="farg"]) .variable-item{
  position:relative; min-height:3.5rem; margin-bottom:0; padding:.6rem .85rem;
  border-radius:12px; border:2px solid rgba(34,44,155,.35);
  background:linear-gradient(180deg,#f7fbff,#eaf7ff);
  color:#222c9b; user-select:none; font-size:.95rem; letter-spacing:.2px; font-weight:800;
  text-align:center; cursor:pointer;
  box-shadow:0 1px 1.5px rgba(34,44,155,.06) inset, 0 1px 8px rgba(0,0,0,.03);
  display:flex; align-items:center; justify-content:center;
  transition:transform .06s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.ppp-selectors .button-variable-items-wrapper .variable-item .variable-item-span{
  font-size:1em; letter-spacing:.2px; color:inherit; font-weight:800;
}
.ppp-selectors .button-variable-items-wrapper .variable-item:hover{
  transform:translateY(-1px); box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.ppp-selectors .button-variable-items-wrapper .variable-item:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(34,44,155,.22);
}
.ppp-selectors .button-variable-items-wrapper .variable-item.selected{
  background:#fff; border-color:#222c9b;
  box-shadow:0 0 0 2px rgba(34,44,155,.15) inset, 0 6px 16px rgba(0,0,0,.06);
}
.ppp-selectors .button-variable-items-wrapper .variable-item.selected::after{
  content:"✓"; position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-weight:900; font-size:1rem; line-height:1; color:#222c9b;
}
.ppp-selectors .button-variable-items-wrapper .variable-item.disabled,
.ppp-selectors .button-variable-items-wrapper .variable-item.wvs-disabled{
  opacity:.5; cursor:not-allowed; filter:grayscale(.1);
}
.ppp-selectors .button-variable-items-wrapper .variable-item.disabled::after,
.ppp-selectors .button-variable-items-wrapper .variable-item.wvs-disabled::after{
  content:"✕"; position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-weight:900; font-size:1rem; line-height:1; color:#b32d2e;
}
.ppp-selectors .button-variable-items-wrapper .variable-item.disabled *,
.ppp-selectors .button-variable-items-wrapper .variable-item.wvs-disabled *{ pointer-events:none; }

/* ---------- COLOR SWATCHES ---------- */

/* Target the UL, because data-attribute_name is on <ul>, not on .value */
.ppp-selectors ul.variable-items-wrapper[data-attribute_name*="color"],
.ppp-selectors ul.variable-items-wrapper[data-attribute_name*="färg"],
.ppp-selectors ul.variable-items-wrapper[data-attribute_name*="farg"]{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
}

/* Round chips – background is driven by --swatch from the .button-variable-item-* classes */
.ppp-selectors ul.variable-items-wrapper[data-attribute_name*="color"] li.variable-item,
.ppp-selectors ul.variable-items-wrapper[data-attribute_name*="färg"] li.variable-item,
.ppp-selectors ul.variable-items-wrapper[data-attribute_name*="farg"] li.variable-item{
  flex:0 0 auto !important;
  max-width:none !important;
  min-width:var(--pp-chip,30px) !important;
  min-height:var(--pp-chip,30px) !important;
  width:var(--pp-chip,30px) !important;
  height:var(--pp-chip,30px) !important;
  padding:0 !important;
  border-radius:9999px !important;
  position:relative;
  background:var(--swatch,#eee);
  border:1px solid rgba(0,0,0,.14);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  transition:box-shadow .12s ease, border-color .12s ease, transform .06s ease;
}

/* Make sure inner wrapper doesn’t hide the LI background */
.ppp-selectors ul.variable-items-wrapper[data-attribute_name*="color"] li.variable-item .variable-item-contents,
.ppp-selectors ul.variable-items-wrapper[data-attribute_name*="färg"] li.variable-item .variable-item-contents,
.ppp-selectors ul.variable-items-wrapper[data-attribute_name*="farg"] li.variable-item .variable-item-contents{
  width:100%;
  height:100%;
  border-radius:inherit;
  background:transparent;
}

/* Hover state */
.ppp-selectors ul.variable-items-wrapper[data-attribute_name*="color"] li.variable-item:hover,
.ppp-selectors ul.variable-items-wrapper[data-attribute_name*="färg"] li.variable-item:hover,
.ppp-selectors ul.variable-items-wrapper[data-attribute_name*="farg"] li.variable-item:hover{
  border-color:#c8d1ff;
  box-shadow:0 0 0 3px rgba(200,209,255,.45);
  transform:translateY(-1px);
}

/* Selected checkmark */
.ppp-selectors ul.variable-items-wrapper[data-attribute_name*="color"] li.variable-item.selected::after,
.ppp-selectors ul.variable-items-wrapper[data-attribute_name*="färg"] li.variable-item.selected::after,
.ppp-selectors ul.variable-items-wrapper[data-attribute_name*="farg"] li.variable-item.selected::after{
  content:"✓";
  position:absolute;
  right:-6px;
  top:-6px;
  background:#fff;
  border:2px solid #222c9b;
  border-radius:999px;
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  font-size:.72rem;
  color:#222c9b;
}

/* Disabled (out of stock) mark */
.ppp-selectors ul.variable-items-wrapper[data-attribute_name*="color"] li.variable-item.disabled::after,
.ppp-selectors ul.variable-items-wrapper[data-attribute_name*="färg"] li.variable-item.disabled::after,
.ppp-selectors ul.variable-items-wrapper[data-attribute_name*="farg"] li.variable-item.disabled::after{
  content:"✕";
  position:absolute;
  right:-6px;
  top:-6px;
  background:#fff;
  border:2px solid #b32d2e;
  border-radius:999px;
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  font-size:.72rem;
  color:#b32d2e;
  opacity:.9;
}

/* Hide the color text label so only the dot shows */
.ppp-selectors ul.variable-items-wrapper[data-attribute_name*="color"] .variable-item-span,
.ppp-selectors ul.variable-items-wrapper[data-attribute_name*="farg"]  .variable-item-span,
.ppp-selectors ul.variable-items-wrapper[data-attribute_name*="färg"]  .variable-item-span,
.ppp-selectors ul.variable-items-wrapper[data-attribute_name*="color"] .variable-item-span-button,
.ppp-selectors ul.variable-items-wrapper[data-attribute_name*="farg"]  .variable-item-span-button,
.ppp-selectors ul.variable-items-wrapper[data-attribute_name*="färg"]  .variable-item-span-button{
  font-size:0;
  color:transparent;
  text-indent:-9999px;
  overflow:hidden;
  white-space:nowrap;
  display:block;
}

/* Variation description stripe (blue vertical line) */
body.single-product .ppp-selectors .woocommerce-variation-description{
  margin:8px 0 4px;
  padding:8px 12px 8px 16px;
  border-left:3px solid #2232ff;      /* blue vertical line */
  background:#f4f6ff;
  border-radius:10px;
  font-size:13px;
  line-height:1.6;
  color:#111827;
}
body.single-product .ppp-selectors .woocommerce-variation-description p{
  margin:0;
}

/* ATC row */
.ppp-selectors .single_variation_wrap{ margin-top:12px; padding-top:12px; border-top:1px dashed rgba(0,0,0,.08); }
.ppp-selectors .woocommerce-variation{ margin-bottom:6px; }
.ppp-selectors .variations_button{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:stretch; }
@media (min-width:761px){ .ppp-selectors .variations_button{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; } }

/* Quantity input */
.woocommerce.single-product .ppp-selectors .quantity .qty,
.woocommerce.single-product .ppp-selectors .quantity input.qty,
.woocommerce.single-product .ppp-selectors .variations_button .quantity .input-text.qty,
.woocommerce.single-product input.input-text.qty{
  width:86px!important; max-width:100%!important;
  -moz-appearance:textfield; appearance:textfield;
  text-align:center!important;
  border:2px solid #e0e6ff!important; border-radius:12px!important; padding:10px 12px!important;
  font-size:14px!important; font-weight:800!important; color:#0b1220!important; background:#fff!important;
  transition:border-color .15s ease, box-shadow .15s ease, transform .06s ease!important;
  line-height:1!important;
}
.woocommerce.single-product .ppp-selectors .quantity .qty:hover{ border-color:#c8d1ff!important; }
.woocommerce.single-product .ppp-selectors .quantity .qty:focus{ outline:none!important; border-color:#aab7ff!important; box-shadow:0 0 0 3px rgba(170,183,255,.35)!important; }
.woocommerce.single-product .ppp-selectors .quantity .qty:active{ transform:translateY(1px); }
.woocommerce.single-product .ppp-selectors .quantity .qty::-webkit-outer-spin-button,
.woocommerce.single-product .ppp-selectors .quantity .qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* ATC button */
.ppp-selectors .variations_button .single_add_to_cart_button,
.ppp-selectors .variations_button .single_add_to_cart_button.button{
  background:linear-gradient(180deg,#121a2f,#0b1220)!important; color:#fff!important; border:0!important; border-radius:12px!important;
  font-weight:800!important; padding:.78rem 1.05rem!important; line-height:1!important; font-size:14px!important;
  box-shadow:0 6px 18px rgba(11,18,32,.18)!important;
}
.ppp-selectors .variations_button .single_add_to_cart_button:hover{ filter:brightness(1.07); }
.ppp-selectors .variations_button .single_add_to_cart_button:active{ transform:translateY(1px); }
.ppp-selectors .variations_button .single_add_to_cart_button.disabled,
.ppp-selectors .variations_button .single_add_to_cart_button[disabled],
.ppp-selectors .woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button{
  background:linear-gradient(180deg,#e9ecf3,#dfe3ea)!important; color:#7a8191!important; box-shadow:none!important; cursor:not-allowed!important;
}

/* Reset variations link */
.ppp-selectors a.reset_variations{
  display:inline-block; margin-top:10px;
  font-size:12.5px; font-weight:700; color:#2232ff; text-decoration:none;
}
.ppp-selectors a.reset_variations:hover{ text-decoration:underline; }

/* Meta / Klarna / Included */
.product_meta{ margin-top:10px; font-size:12.75px; color:#4a4f58; word-break:break-word; }
.ppp-klarna{ margin-top:12px; border:1px dashed #e6e6e6; border-radius:10px; padding:9px 10px; background:#fafafa; font-size:12.75px; }
.ppp-inbox{ margin-top:12px; border-top:1px solid rgba(0,0,0,.06); padding-top:10px; }
.ppp-inbox h2{ margin:0 0 8px; font-size:var(--pp-h2); }
.ppp-inbox__row{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--pp-border); background:#fff; border-radius:12px; font-size:var(--pp-body); line-height:1.45; color:#1a1d22; }
.ppp-inbox__icon{ width:20px; height:20px; flex:0 0 20px; display:inline-block; color:#0b1220; line-height:0; }
.ppp-inbox__icon svg{ width:100%; height:100%; display:block; }

/* ---------------- Product Info Tabs → stacked ---------------- */
.ppp-productinfo{ border:1px solid var(--pp-border); border-radius:16px; background:#fff; box-shadow:var(--pp-shadow); padding:0; }
.ppp-techtabs__list{ display:none !important; }
.ppp-techtabs__panes{ padding:16px; }
.ppp-techtabs__pane{ display:block !important; }
.ppp-techtabs__pane + .ppp-techtabs__pane{ margin-top: var(--pp-gap); }

/* Attributes table */
.ppp-attrs-table{ overflow:hidden; }
.ppp-attrs-table table{ width:100%; border-collapse:separate; border-spacing:0 8px; table-layout:fixed; }
.ppp-attrs-table tr th, .ppp-attrs-table tr td{
  padding:10px 12px; border:1px solid var(--pp-border); border-radius:12px; background:#fff; overflow-wrap:anywhere;
}
.ppp-attrs-table tr th{ width:220px; font-weight:800; }
@media (max-width:560px){
  .ppp-attrs-table tr th{ width:40%; }
  .ppp-attrs-table tr td, .ppp-attrs-table tr th{ font-size:13px; padding:10px; }
}

/* ---------------- FAQ ---------------- */
.ppp-faq{ border:1px solid var(--pp-border); border-radius:16px; background:#fff; box-shadow:var(--pp-shadow); padding:18px; }
.ppp-faq > h2{ margin:0 0 12px; font-size:var(--pp-h2); }
.ppp-qa{ margin:0; }
.ppp-qa + .ppp-qa{ margin-top:10px; }
.ppp-qa details{
  border:1px solid var(--pp-border); border-radius:12px; background:#fff; padding:0; overflow:hidden;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ppp-qa details[open]{ box-shadow:0 8px 22px rgba(16,24,40,.06); border-color:#dfe5ff; background:linear-gradient(180deg,#ffffff,#f7f9ff); }
.ppp-qa summary{
  list-style:none; display:flex; align-items:center; gap:10px;
  padding:12px 14px; cursor:pointer; font-weight:800; color:#0b1220; position:relative;
}
.ppp-qa summary::-webkit-details-marker{ display:none; }
.ppp-qa summary::after{
  content:""; margin-left:auto; width:12px; height:12px;
  border-right:2px solid #0b1220; border-bottom:2px solid #0b1220;
  transform:rotate(45deg); transition:transform .18s ease; opacity:.9;
}
.ppp-qa details[open] > summary::after{ transform:rotate(-135deg); }
.ppp-qa .a{ padding:0 14px 14px 14px; color:#1a1d22; line-height:1.5; font-size:14.5px; }

/* ---------------- USP ---------------- */
.pp-usp{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:981px){ .pp-usp{ grid-template-columns:repeat(3,minmax(260px,1fr)); gap:24px; } }
.pp-usp__card{ border:1px solid var(--pp-border); border-radius:16px; background:#fff; box-shadow:var(--pp-shadow); }
.pp-usp__content{ padding:18px; display:flex; align-items:flex-start; gap:12px; }
.pp-usp__iconwrap{ width:42px; height:42px; border-radius:10px; display:grid; place-items:center; background:#f1f4ff; color:#2232ff; flex:0 0 42px; }
.pp-usp__title{ margin:0; font-weight:800; }
.pp-usp__desc{ margin:0; color:#3a4050; }

/* ======================================================================
   RELATED PRODUCTS
   ====================================================================== */
.ppp-related{ overflow:visible; }
.ppp-related ul.products{
  list-style:none; margin:0; padding:0;
  display:grid!important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap:16px!important;
}
.ppp-related ul.products.columns-3{ display:grid!important; }
.ppp-related ul.products li.product{
  float:none!important; width:auto!important; margin:0!important; clear:none!important;
  display:block; min-width:0;
}
.ppp-related .pp-card-split{ display:block; text-decoration:none; color:inherit; }
.ppp-related .pp-card-split__content{
  border:1px solid #e6e9f2; border-radius:14px; background:#fff;
  padding:14px; height:100%;
  display:grid; grid-template-rows: auto 1fr; gap:10px;
  box-shadow:0 2px 10px rgba(16,24,40,.04);
  transition:transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}
.ppp-related .pp-card-split__content:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(16,24,40,.08);
  border-color:#d8def2;
}
.ppp-related .pp-card-split__img{ display:grid; place-items:center; padding:8px 0; }
.ppp-related .pp-card-split__img img{
  display:block; width:100%; max-width:180px; max-height:180px;
  height:auto; aspect-ratio:1/1; object-fit:contain; margin-inline:auto;
}
.ppp-related .pp-card-split__title{
  font-weight:800; font-size:15px; line-height:1.25; margin:0 0 6px; color:#0b1220;
}
.ppp-related .pp-card-split__colors{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 8px; }
.ppp-related .pp-color{
  --c:#ccc;
  width:16px; height:16px; border-radius:999px; border:1px solid rgba(0,0,0,.12); background:var(--c);
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.ppp-related .pp-card-split__pricewrap{ margin-top:auto; display:flex; align-items:baseline; justify-content:flex-start; gap:6px; }
.ppp-related .pp-card-split__from{ font-size:13px; color:#3a4050; }
.ppp-related .pp-card-split__pricewrap .woocommerce-Price-amount{ font-weight:800; font-size:15px; color:#0b1220; }
.ppp-related h2{ margin:0 0 10px; }
@media (min-width:981px){
  .ppp-related ul.products{ gap:20px!important; }
  .ppp-related .pp-card-split__img img{ max-width:190px; max-height:190px; }
}
@media (max-width:420px){
  .ppp-related ul.products{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; gap:14px!important; }
}

/* =========================================================
   Swatch color fallbacks – single product
   (map Woo/swatches classes -> real colors)
   ========================================================= */

/* ========= NEUTRALS / BASIC METALS ========= */
.button-variable-item-black,
.button-variable-item-svart{
  --swatch:#1F2020;
  background:#1F2020;
}

.button-variable-item-white,
.button-variable-item-vit{
  --swatch:#F9F6EF;
  background:#F9F6EF;
  border-color:#d8d8d8;
}

.button-variable-item-silver{
  --swatch:#C9C8C3;
  background:#C9C8C3;
}

.button-variable-item-space-gray,
.button-variable-item-space-grey{
  --swatch:#4B4E53;
  background:#4B4E53;
}

.button-variable-item-space-black{
  --swatch:#121212;
  background:#121212;
}

.button-variable-item-starlight{
  --swatch:#F5F5F0;
  background:#F5F5F0;
}

/* ========= CORE COLORS ========= */

/* Blues */
.button-variable-item-blue,
.button-variable-item-sky-blue{
  --swatch:#3A64A8;
  background:#3A64A8;
}

/* Extra blue tones */
.button-variable-item-dimbla{
  /* Dimblå – soft muted blue */
  --swatch:#7FA9D9;
  background:#7FA9D9;
}
.button-variable-item-djupbla{
  /* Djupblå – deep blue */
  --swatch:#18406A;
  background:#18406A;
}
.button-variable-item-himmelbla{
  /* Himmelblå – sky blue */
  --swatch:#9CC9FF;
  background:#9CC9FF;
}
.button-variable-item-ultramarin{
  /* Ultramarin – intense blue */
  --swatch:#1C3FA8;
  background:#1C3FA8;
}

/* Greens */
.button-variable-item-green{
  --swatch:#2E7D5B;
  background:#2E7D5B;
}

/* Extra green / teal */
.button-variable-item-salvia{
  /* Sage */
  --swatch:#89A88A;
  background:#89A88A;
}
.button-variable-item-teal{
  --swatch:#008C8C;
  background:#008C8C;
}

/* Yellows / gold */
.button-variable-item-yellow,
.button-variable-item-gul{
  --swatch:#FFE681;
  background:#FFE681;
}
.button-variable-item-gold,
.button-variable-item-guld{
  --swatch:#D4C9B1;
  background:#D4C9B1;
}
.button-variable-item-ljusguld{
  /* Ljusguld – lighter, champagne */
  --swatch:#F0D9A6;
  background:#F0D9A6;
}

/* Reds / pinks */
.button-variable-item-red{
  --swatch:#B41325;
  background:#B41325;
}
.button-variable-item-pink,
.button-variable-item-rosa{
  --swatch:#F5A9C4;
  background:#F5A9C4;
}

/* Purples / violets */
.button-variable-item-purple,
.button-variable-item-lila{
  --swatch:#A58AD5;
  background:#A58AD5;
}
.button-variable-item-djuplila{
  /* Deep purple */
  --swatch:#5A2C82;
  background:#5A2C82;
}
.button-variable-item-lavendel{
  --swatch:#C7A7FF;
  background:#C7A7FF;
}

/* ========= SPECIAL FINISHES / APPLE NAMES ========= */

/* Metals & specials */
.button-variable-item-graphite{
  --swatch:#5C5B57;
  background:#5C5B57;
}

.button-variable-item-rose-gold{
  --swatch:#E8C1B0;
  background:#E8C1B0;
}

/* Titanium family (existing) */
.button-variable-item-naturlig-titanium{
  --swatch:#9F9C93;
  background:#9F9C93;
}
.button-variable-item-sandfargad-titanium{
  --swatch:#DBBA81;
  background:#DBBA81;
  border-color:#d8d8d8;
}
.button-variable-item-titanium-gray{
  --swatch:#8E8E8E;
  background:#8E8E8E;
}
.button-variable-item-titanium-yellow{
  --swatch:#F4D06F;
  background:#F4D06F;
}
.button-variable-item-titanium-violet{
  --swatch:#A58AD5;
  background:#A58AD5;
}

/* Titanium aliases & new iPhone-17-ish names */
.button-variable-item-okentitan{
  --swatch:#D4B08A;      /* Ökentitan – desert titanium */
  background:#D4B08A;
}
.button-variable-item-svart-titan{
  --swatch:#202124;      /* Svart titan – black titanium */
  background:#202124;
}
.button-variable-item-vitt-titan{
  --swatch:#E5E3DD;      /* Vitt titan – white titanium */
  background:#E5E3DD;
}
.button-variable-item-naturtitan{
  /* Alias of Naturlig Titanium */
  --swatch:#9F9C93;
  background:#9F9C93;
}

/* if some plugin variant uses slugs without hyphen */
.button-variable-item-svarttitan{
  --swatch:#202124;
  background:#202124;
}
.button-variable-item-vitttitan{
  --swatch:#E5E3DD;
  background:#E5E3DD;
}

/* Cosmic Orange */
.button-variable-item-kosmisk-orange{
  --swatch:#FF8A3A;
  background:#FF8A3A;
}

/* Star-like / special white-gold mix */
.button-variable-item-stjarnglans{
  --swatch:#F5E7C8;
  background:#F5E7C8;
}

/* Midnight / spacey tones */
.button-variable-item-midnatt{
  --swatch:#050A1A;      /* Midnight blue/black */
  background:#050A1A;
}
.button-variable-item-rymdsvart{
  --swatch:#111317;      /* Space black-ish, softer than pure black */
  background:#111317;
}

/* Off-white tint */
.button-variable-item-molnvit{
  /* Molnvit – cloud white, slightly warm */
  --swatch:#F5F5F2;
  background:#F5F5F2;
  border-color:#D8D8D8;
}

/* ==========================================================================
   PPP PRODUCT BLOCK (inside Produktbeskrivning)
   ========================================================================== */
.ppp-product-block{
  --ppp-gap:24px;
  --ppp-card-radius:16px;
  --ppp-border:#ebedf2;
  --ppp-bg:#fff;
  --ppp-fg:#222;
  --ppp-muted:#60666f;
  --ppp-brand:#0b1220;
  --ppp-shadow:0 6px 22px rgba(0,0,0,.08);
  --ppp-max:1120px;
  --ppp-pad:clamp(12px,2vw,20px);
}
.ppp-product-block *{ box-sizing:border-box }
.ppp-product-block a{ color:var(--ppp-brand); text-decoration:underline }

/* container */
.ppp-product-block .ppp-wrap{ max-width:var(--ppp-max); margin:0 auto; padding:var(--ppp-pad) }

/* header */
.ppp-product-block .ppp-title{ font-size:clamp(22px,2.2vw,28px); line-height:1.2; margin:0 0 8px; color:#000 }
.ppp-product-block .ppp-lead{ color:var(--ppp-muted); font-size:clamp(15px,1.3vw,16px); line-height:1.6; margin:0 0 22px }

/* --- FORCE GRID: image left, features right --- */
.ppp-product-block .ppp-top{
  display:grid !important;
  grid-template-areas: "img features" !important;
  grid-template-columns: 1.05fr .95fr !important;
  gap: var(--ppp-gap) !important;
  align-items: start !important;
}
.ppp-product-block .ppp-top > .ppp-illus{
  grid-area: img !important; min-width:0 !important;
  justify-self:start;
}
@media (min-width:901px){
  .ppp-product-block .ppp-top > .ppp-illus{ margin-left: 14px; }
}
.ppp-product-block .ppp-top > .ppp-features{ grid-area: features !important; min-width:0 !important; }

@media (max-width:900px){
  .ppp-product-block .ppp-top{
    grid-template-areas:
      "img"
      "features" !important;
    grid-template-columns: 1fr !important;
  }
}

/* --- Illustration --- */
.ppp-product-block .ppp-illus{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  position:relative !important;
  z-index:0;
}
.ppp-product-block .ppp-illus img{
  display:block; width:100%; height:auto; object-fit:contain;
  max-width:min(82%, 520px);
  margin-inline:auto;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.10));
}

/* Rulers */
.ppp-product-block .ppp-illus{
  --ppp-line:#3c55ff33;
  --ppp-line-w:2px;
  --ppp-tick:12px;
  --ppp-safe-out:14px;
}

/* WIDTH */
.ppp-product-block .ppp-illus::after{
  content:""; position:absolute; left:0; right:0;
  bottom: calc(-1 * var(--ppp-safe-out));
  height: var(--ppp-line-w); background: var(--ppp-line);
  box-shadow: inset var(--ppp-tick) 0 0 0 var(--ppp-line),
              inset calc(-1 * var(--ppp-tick)) 0 0 0 var(--ppp-line);
}

/* HEIGHT */
.ppp-product-block .ppp-illus::before{
  content:""; position:absolute; top:0; bottom:0;
  left: calc(-1 * var(--ppp-safe-out));
  width: var(--ppp-line-w); background: var(--ppp-line);
  box-shadow: 0 var(--ppp-tick) 0 0 var(--ppp-line) inset,
              0 calc(-1 * var(--ppp-tick)) 0 0 var(--ppp-line) inset;
}

/* DEPTH + labels */
.ppp-product-block .ppp-illus .ppp-dims{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.ppp-product-block .ppp-illus .ppp-dims::after{
  content:""; position:absolute; top:0; right:0;
  width: min(28%, 140px); height:0;
  border-top: var(--ppp-line-w) solid var(--ppp-line);
  transform-origin: top right;
  transform: rotate(-45deg) translateY(-1px);
}
.ppp-product-block .ppp-illus .ppp-dim{
  pointer-events:auto;
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--ppp-border);
  padding:6px 10px; border-radius:999px; font-size:12px; color:#000;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  position:absolute;
}
.ppp-product-block .ppp-illus .ppp-dim:nth-child(1){
  left:50%;
  bottom: calc(-1 * (var(--ppp-safe-out) + 28px));
  transform:translateX(-50%);
}
.ppp-product-block .ppp-illus .ppp-dim:nth-child(2){
  top: -30px;
  right: 0;
  transform:none;
}
.ppp-product-block .ppp-illus .ppp-dim:nth-child(3){
  left: calc(-1 * (var(--ppp-safe-out) + 4px));
  top:50%;
  transform:translate(-100%,-50%);
  white-space:nowrap;
}
@media (max-width:560px){
  .ppp-product-block .ppp-illus{ --ppp-safe-out:10px; --ppp-tick:10px; }
  .ppp-product-block .ppp-illus .ppp-dims::after{ width:min(32%,110px); }
  .ppp-product-block .ppp-illus .ppp-dim:nth-child(1){ bottom: calc(-1 * (var(--ppp-safe-out) + 24px)); }
  .ppp-product-block .ppp-illus .ppp-dim:nth-child(2){ top:-26px; right:2px; }
}

/* --- Features card --- */
.ppp-product-block .ppp-features{
  background:var(--ppp-bg); border:1px solid var(--ppp-border);
  border-radius:var(--ppp-card-radius); box-shadow:var(--ppp-shadow);
  padding:18px
}
.ppp-product-block .ppp-features h3{ margin:0 0 12px; font-size:18px }
.ppp-product-block .ppp-feature-list{ display:grid; grid-template-columns:1fr; gap:12px }
.ppp-product-block .ppp-feature{
  display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:flex-start;
  padding:10px 12px; border:1px solid var(--ppp-border); border-radius:12px; background:#fff
}

/* --- Specs inside block --- */
.ppp-product-block .ppp-specs{
  margin-top:var(--ppp-gap); background:var(--ppp-bg); border:1px solid var(--ppp-border);
  border-radius:var(--ppp-card-radius); box-shadow:var(--ppp-shadow); padding:18px
}
.ppp-product-block .ppp-specs h3{ margin:0 0 12px; font-size:18px }
.ppp-product-block .ppp-spec-list{ display:grid; grid-template-columns:220px 1fr; gap:10px 12px }
.ppp-product-block .ppp-spec-list dt{
  color:#000; background:#f7f8fa; border:1px solid var(--ppp-border);
  padding:10px; border-radius:10px; font-weight:600
}
.ppp-product-block .ppp-spec-list dd{
  margin:0; color:#111; border:1px solid var(--ppp-border);
  padding:10px; border-radius:10px
}
@media (max-width:700px){ .ppp-product-block .ppp-spec-list{ grid-template-columns:1fr } .ppp-product-block .ppp-spec-list dt{ background:#fff } }
.ppp-product-block .ppp-sidenote{ font-size:12px; color:var(--ppp-muted); margin-top:8px }