/* ==========================================================================
   Savalan Kebab — native single-product page. Depends on design-system.css.
   The add-to-cart form is WooCommerce's own markup (so WAPF + variation
   swatches keep working); we only restyle it.
   ========================================================================== */
.svk-product, .svk-product *{box-sizing:border-box}

/* The theme header is an absolute overlay; JS sets --svk-hdr-init to its height. */
.svk-product{max-width:var(--svk-page);margin:0 auto;padding:var(--svk-hdr-init,84px) var(--svk-gutter) 90px;font-family:var(--f-body);color:var(--teal-900)}
@media (min-width:1025px){.svk-product{padding-top:var(--svk-hdr-init,210px)}}
/* Codevz .layout_ sets overflow:hidden, which would break the sticky column. */
body.single-product .layout_{overflow:visible !important}

/* ---- Breadcrumb ---- */
.svk-product__crumbs{padding:18px 0 22px}
.svk-product__crumbs a{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-head);font-weight:600;font-size:14px;
  color:var(--teal-600);text-decoration:none;transition:color .15s var(--ease)}
.svk-product__crumbs a:hover{color:var(--flame)}

/* ---- Layout ---- */
.svk-product__main{display:grid;grid-template-columns:1fr;gap:26px}
/* Grid items default to min-width:auto, so a long option name (e.g. "Lamb Shish &
   Lamb Doner Kebab & Chicken Kofte") would stop the column shrinking and push the
   page wider than the screen. min-width:0 lets them shrink and wrap instead. */
.svk-product__media,
.svk-product__info{min-width:0}
@media (min-width:900px){
  .svk-product__main{grid-template-columns:1fr 1fr;gap:52px;align-items:start}
  .svk-product__info{position:sticky;top:110px}
}

/* ---- Media (Redesign 2026: rounded food stage, sand placeholder) ---- */
.svk-product__stage{position:relative;aspect-ratio:1;border-radius:var(--r-img);overflow:hidden;background:var(--sg-sand);
  box-shadow:var(--sh-card);display:grid;place-items:center}
.svk-product__img{width:100%;height:100%;object-fit:cover;display:block}
.svk-product__placeholder{color:var(--sage-300);display:grid;place-items:center}
.svk-product__thumbs{list-style:none;display:flex;gap:10px;margin:12px 0 0;padding:0;overflow-x:auto;scrollbar-width:none}
.svk-product__thumbs::-webkit-scrollbar{display:none}
.svk-product__thumb{flex:0 0 auto;width:72px;height:72px;padding:0;border:2px solid transparent;border-radius:var(--r-sm);
  overflow:hidden;background:var(--cream);cursor:pointer;transition:border-color .15s var(--ease)}
.svk-product__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.svk-product__thumb.is-active,.svk-product__thumb:hover{border-color:var(--flame)}

/* ---- Info (Redesign 2026: calm display title, ink price) ---- */
.svk-product__title{font-family:var(--f-display);font-weight:400;font-size:clamp(32px,4.4vw,48px);line-height:1;
  letter-spacing:-.01em;color:var(--sg-ink);margin:6px 0 0;text-wrap:balance}
.svk-product__price{font-family:var(--f-body);font-weight:700;font-size:clamp(22px,2.6vw,28px);color:var(--sg-ink);margin:14px 0 0;
  font-variant-numeric:tabular-nums}
.svk-product__price del{color:var(--surface-500);font-weight:400;font-size:.7em;margin-right:8px}
.svk-product__price ins{text-decoration:none;color:var(--sg-forest)}
.svk-product__desc{font-size:16px;line-height:1.6;color:var(--sg-forest);margin:16px 0 0;max-width:56ch}

/* ---- WooCommerce add-to-cart form (restyled, markup untouched) ---- */
.svk-product__form{margin-top:24px}
.svk-product__form form.cart{display:block;margin:0}

/* Variation swatches / dropdowns.
   The theme styles table.variations with a border + display:flex (that draws an
   empty box), and woo-variation-swatches ships its own sizing for the swatches —
   both need overriding at strength. */
.svk-product__form table.variations{width:100% !important;display:block !important;border:0 !important;
  background:none !important;padding:0 !important;margin:0 0 18px !important;border-collapse:collapse}
.svk-product__form table.variations tbody,
.svk-product__form table.variations tr{display:block !important;width:100%;margin:0}
.svk-product__form table.variations tr + tr{margin-top:16px}
.svk-product__form table.variations th,
.svk-product__form table.variations td{display:block !important;width:100% !important;padding:0 !important;
  border:0 !important;text-align:left !important;background:none !important}
.svk-product__form table.variations th.label label{font-family:var(--f-form);font-size:12px;font-weight:600;color:var(--teal-700);
  text-transform:uppercase;letter-spacing:.06em;margin:0 0 9px;display:block}
.svk-product__form table.variations select{width:100%;min-height:48px;padding:12px 14px;background:#fff;
  border:1px solid var(--surface-300);border-radius:var(--r-input);font-family:var(--f-form);font-size:15px;color:var(--teal-900)}
.svk-product__form .reset_variations{display:inline-block;margin-top:8px;font-size:13px;color:var(--flame)}

/* woo-variation-swatches — button style (e.g. LRG / SML, but also long combo names) */
.svk-product__form .variable-items-wrapper{display:flex !important;flex-wrap:wrap;gap:9px;margin:0 !important;padding:0 !important;
  list-style:none;max-width:100%}
.svk-product__form .variable-items-wrapper .variable-item.button-variable-item{
  margin:0 !important;padding:0 !important;box-shadow:none !important;
  width:auto !important;min-width:auto !important;height:auto !important;min-height:0 !important;
  /* Some options are long ("Lamb Shish & Lamb Doner Kebab & Chicken Kofte") — cap the
     pill to the column and let the label wrap rather than overflow the screen. */
  max-width:100% !important;
  border:1.5px solid var(--surface-300) !important;border-radius:var(--r-pill) !important;background:#fff !important;
  transition:border-color .15s var(--ease),background .15s var(--ease)}
.svk-product__form .variable-items-wrapper .variable-item.button-variable-item .variable-item-contents{display:block !important;max-width:100%}
.svk-product__form .variable-items-wrapper .variable-item.button-variable-item .variable-item-span{
  display:block !important;padding:11px 22px !important;margin:0 !important;
  font-family:var(--f-body) !important;font-weight:700 !important;font-size:14px !important;line-height:1.3 !important;
  color:var(--sg-ink) !important;
  white-space:normal !important;overflow-wrap:anywhere;text-align:center}
.svk-product__form .variable-items-wrapper .variable-item.button-variable-item:hover{border-color:var(--sg-forest) !important}
.svk-product__form .variable-items-wrapper .variable-item.button-variable-item.selected{
  border-color:var(--sg-flame) !important;background:var(--sg-flame) !important}
.svk-product__form .variable-items-wrapper .variable-item.button-variable-item.selected .variable-item-span{color:var(--sg-ink) !important}
.svk-product__form .woocommerce-variation-price{margin:0 0 14px;font-family:var(--f-body);font-weight:700;font-size:20px;color:var(--sg-ink)}
.svk-product__form .woocommerce-variation-availability{margin-bottom:10px;font-size:14px;color:var(--teal-600)}

/* WAPF — "Your Allergens" and any other custom product fields */
.svk-product__form .wapf-field-group{margin:0 0 18px}
.svk-product__form .wapf-field-label label,
.svk-product__form .wapf-field-label{font-family:var(--f-form);font-size:12px;font-weight:600;color:var(--teal-700);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;display:block}
.svk-product__form .wapf-field-container input[type="text"],
.svk-product__form .wapf-field-container textarea,
.svk-product__form .wapf-field-container select{width:100%;min-height:48px;padding:12px 14px;background:#fff;
  border:1px solid var(--surface-300);border-radius:var(--r-input);font-family:var(--f-form);font-size:15px;color:var(--teal-900)}
.svk-product__form .wapf-field-container input[type="text"]:focus,
.svk-product__form .wapf-field-container textarea:focus{border-color:var(--flame);outline:none;box-shadow:0 0 0 3px rgba(255,142,91,.14)}
.svk-product__form .wapf--description,
.svk-product__form .wapf-field-description{font-size:12.5px;color:var(--teal-500);margin-top:6px}

/* Quantity + Add row */
.svk-product__form .svk-qtyrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px}
/* width:auto !important — the theme forces .quantity to width:100%, which would
   fill the row and push the Add button onto its own line. */
.svk-product__form .quantity{display:flex;align-items:center;gap:0;background:#fff;border:1px solid var(--surface-300);
  border-radius:var(--r-pill);overflow:hidden;height:54px;flex:0 0 auto;width:auto !important;min-width:0;
  /* the theme adds a 15px bottom margin, which align-items:center would centre as
     part of the margin box and knock it ~7px out of line with the button */
  margin:0 !important}
.svk-product__form .quantity input.qty{width:54px;height:100%;border:0;text-align:center;background:transparent;
  font-family:var(--f-head);font-weight:600;font-size:16px;color:var(--teal-900);-moz-appearance:textfield;padding:0}
.svk-product__form .quantity input.qty::-webkit-outer-spin-button,
.svk-product__form .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* The Xtra theme injects its own .quantity-down / .quantity-up arrows. We replace
   them with real, accessible <button> steppers (see product.js), so hide theirs
   rather than showing two sets. */
.svk-product__form .quantity .quantity-down,
.svk-product__form .quantity .quantity-up{display:none !important}
.svk-qtybtn{width:44px;height:100%;border:0;background:transparent;cursor:pointer;font-size:20px;line-height:1;
  color:var(--teal-700);display:grid;place-items:center;transition:color .15s var(--ease)}
.svk-qtybtn:hover{color:var(--flame)}
.svk-qtybtn:disabled{opacity:.35;cursor:not-allowed}

.svk-product__form button.single_add_to_cart_button{flex:1 1 220px;min-height:54px;padding:0 28px;
  background:var(--sg-flame) !important;color:var(--sg-ink) !important;border:none !important;border-radius:var(--r-full) !important;
  font-family:var(--f-body) !important;font-weight:700 !important;font-size:16px !important;letter-spacing:0 !important;
  cursor:pointer;box-shadow:none;transition:background .15s var(--ease),opacity .15s var(--ease),transform .15s var(--ease);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0 !important;float:none !important}
.svk-product__form button.single_add_to_cart_button:hover{background:var(--sg-flame-700) !important}
.svk-product__form button.single_add_to_cart_button:active{transform:translateY(1px)}
.svk-product__form button.single_add_to_cart_button.disabled,
.svk-product__form button.single_add_to_cart_button:disabled,
.svk-product__form button.single_add_to_cart_button.wc-variation-selection-needed{opacity:.5;cursor:not-allowed;filter:none}
.svk-product__form button.single_add_to_cart_button.is-loading{opacity:.75;pointer-events:none}
/* Safety net: if anything still tries to hide the button or inject a "View cart"
   link after an ajax add, keep the button and drop the link (we have the drawer). */
.svk-product__form button.single_add_to_cart_button.added{display:inline-flex !important}
.svk-product__form .added_to_cart{display:none !important}

/* ---- Trust ---- */
.svk-product__trust{list-style:none;margin:26px 0 0;padding:20px 0 0;border-top:1px solid var(--surface-200);
  display:flex;flex-direction:column;gap:11px;font-size:14px;color:var(--teal-600)}
.svk-product__trust li{display:flex;align-items:center;gap:11px}
.svk-product__trust svg{width:19px;height:19px;flex:0 0 auto;color:var(--sage)}

/* ---- Related (Redesign 2026: calm display heading, hairline) ---- */
.svk-product__related{margin-top:72px}
.svk-product__related-h{font-family:var(--f-display);font-weight:400;font-size:clamp(26px,3vw,32px);color:var(--sg-ink);margin:0 0 24px;
  display:flex;align-items:center;gap:16px;line-height:1;letter-spacing:-.01em}
.svk-product__related-h::after{content:"";flex:1;height:1px;background:var(--sg-line)}

/* ---- Mobile sticky add bar ---- */
.svk-product__bar{position:fixed;left:0;right:0;bottom:0;z-index:9000;display:none;align-items:center;gap:14px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#fff;
  border-top:1px solid var(--surface-200);box-shadow:0 -4px 20px rgba(36,62,59,.10)}
.svk-product__bar-price{font-family:var(--f-head);font-weight:700;font-size:19px;color:var(--teal-900);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.svk-product__bar-price del{display:none}
.svk-product__bar-add{flex:1;min-height:50px;justify-content:center}
@media (max-width:899px){
  /* only reveal once the real button is scrolled out of view (JS toggles is-on) */
  .svk-product__bar.is-on{display:flex}
  body.single-product{padding-bottom:0}
  /* the drawer FAB would overlap the bar */
  .svk-product__bar.is-on ~ .svk-bag-trigger,
  body.single-product .svk-bag-trigger{bottom:90px}
}

/* ---- Small screens ---- */
@media (max-width:600px){
  .svk-product{padding-left:16px;padding-right:16px;padding-bottom:110px}
  .svk-product__form .quantity{height:50px}
  .svk-product__form button.single_add_to_cart_button{min-height:50px;flex:1 1 100%}
  .svk-product__trust{font-size:13.5px}
}

/* ==========================================================================
   Allergen declaration (FIR 2014). Shown before ordering, on every dish.
   The "unconfirmed" state is deliberately prominent: silence would imply safe.
   ========================================================================== */
.svk-allergens{
  margin:22px 0 0;padding:16px 18px;
  background:var(--surface-0);border:1px solid var(--ink-100);
  border-left:3px solid var(--sage);border-radius:var(--r-sm);
}
.svk-allergens__h{
  display:flex;align-items:center;gap:8px;margin:0 0 10px;
  font-family:var(--f-head);font-weight:700;font-size:15px;color:var(--sage-900);
}
.svk-allergens__h svg{color:var(--sage);flex:0 0 auto}
.svk-allergens__row{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin:0 0 7px;font-size:14px;color:var(--ink-900);line-height:1.5}
.svk-allergens__k{
  flex:0 0 auto;padding:2px 9px;border-radius:var(--r-pill);
  font-family:var(--f-form);font-weight:700;font-size:11px;letter-spacing:.03em;text-transform:uppercase;
}
.svk-allergens__k--has{background:#FDECEC;color:var(--error)}
.svk-allergens__k--may{background:var(--tertiary-50);color:#8A5A12}
.svk-allergens__k--none{background:var(--green-50);color:var(--green)}
.svk-allergens__note{margin:10px 0 0;font-size:12px;line-height:1.55;color:var(--ink-600)}

/* Not yet declared — say so, and give them the phone. */
.svk-allergens.is-unconfirmed{border-left-color:var(--flame);background:var(--flame-50)}
.svk-allergens.is-unconfirmed .svk-allergens__h{color:var(--flame-900)}
.svk-allergens.is-unconfirmed .svk-allergens__h svg{color:var(--flame)}
.svk-allergens__ask{margin:0;font-size:13.5px;line-height:1.6;color:var(--flame-900)}
.svk-allergens__call{
  display:inline-flex;align-items:center;gap:7px;margin-top:10px;
  font-family:var(--f-head);font-weight:700;font-size:15px;color:var(--flame);text-decoration:none;
}
.svk-allergens__call::before{
  content:"";width:15px;height:15px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a1 1 0 0 1 1-1h2.6a1 1 0 0 1 .95.68l1 3a1 1 0 0 1-.5 1.2L9 9.6a11 11 0 0 0 5.4 5.4l.72-1.05a1 1 0 0 1 1.2-.5l3 1a1 1 0 0 1 .68.95V19a1 1 0 0 1-1 1A15 15 0 0 1 4 5Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a1 1 0 0 1 1-1h2.6a1 1 0 0 1 .95.68l1 3a1 1 0 0 1-.5 1.2L9 9.6a11 11 0 0 0 5.4 5.4l.72-1.05a1 1 0 0 1 1.2-.5l3 1a1 1 0 0 1 .68.95V19a1 1 0 0 1-1 1A15 15 0 0 1 4 5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.svk-allergens__call:hover{color:var(--flame-900)}

/* ==========================================================================
   "Your allergens" — native optional add-to-cart field (replaces WAPF).
   ========================================================================== */
.svk-allergynote{margin:0 0 20px;max-width:440px}
.svk-allergynote__label{display:block;font-family:var(--f-form,var(--f-body));font-weight:600;font-size:13px;
  color:var(--sg-ink);margin:0 0 6px}
.svk-allergynote__opt{font-weight:500;color:var(--sg-forest);opacity:.75}
.svk-allergynote__input{width:100%;box-sizing:border-box;height:48px;padding:0 14px;
  font-family:var(--f-body);font-size:15px;color:var(--sg-ink);background:#fff;
  border:1px solid var(--surface-300,var(--sg-line));border-radius:var(--r-input,10px)}
.svk-allergynote__input::placeholder{color:var(--sg-forest);opacity:.55}
.svk-allergynote__input:focus{outline:none;border-color:var(--sg-forest);box-shadow:0 0 0 3px rgba(0,71,60,.12)}
.svk-allergynote__help{margin:7px 0 0;font-size:13px;line-height:1.45;color:var(--sg-forest)}