/* ==========================================================
   Fullwidth produktna stran – zgornji del (new design).
   Mobile first, dva stolpca od 900 px naprej. Vsi razredi imajo
   predpono .pp-; spodaj so prilagoditve za WooCommerce markup
   (količina, cena, variacije, drobtinice).
   ========================================================== */

.pp-wrap{
  --pp-green:#009a3b;
  --pp-green-dark:#007a2f;
  --pp-green-soft:#eef8f1;
  --pp-green-line:#d3eadb;
  --pp-ink:#14231a;
  --pp-text:#2a3530;
  --pp-muted:#5f6964;
  --pp-line:#e3e7e4;
  --pp-star:#f5a623;
  --pp-stock-bg:#fff4e2;
  --pp-stock-text:#8a5a00;
  --pp-stock-dot:#f29d12;
  --pp-red:#e8505b;
  --pp-red-text:#d93641;
  --pp-red-soft:#fef2f3;
  --pp-radius:10px;
  --pp-sans:'Source Sans Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  --pp-serif:'Source Serif 4',Georgia,serif;

  width:100%;max-width:1192px;margin:0 auto;padding:0 16px;
  color:var(--pp-text);font-family:var(--pp-sans);-webkit-font-smoothing:antialiased;text-align:left;
}
.pp-wrap *,.pp-wrap *::before,.pp-wrap *::after{box-sizing:border-box}
.pp-wrap img{max-width:100%;display:block}
.pp-wrap button,.pp-wrap input{font:inherit;color:inherit}
.pp-wrap p{margin:0}

/* ---------- Drobtinice ---------- */
.pp-breadcrumb{padding-top:12px;font-size:12px;color:#4a544f}
.pp-breadcrumb .breadcrumbs{margin:0;padding:0;font:inherit;color:inherit;background:none}
/* The theme pads .breadcrumbs 15px 10px; on a phone keep the vertical room but align the trail with the page gutter. */
@media (max-width:899px){.pp-wrap .pp-breadcrumb{padding-top:0}.pp-wrap .pp-breadcrumb .breadcrumbs{padding:12px 0 !important}}
.pp-wrap .pp-breadcrumb .breadcrumbs{margin-bottom:0 !important}
.pp-wrap .pp-breadcrumb a,.pp-wrap .pp-breadcrumb span,.pp-wrap .pp-breadcrumb .breadcrumbs .breadcrumbs__link,.pp-wrap .pp-breadcrumb .breadcrumbs__link span{color:inherit;font-size:inherit;font-weight:400;text-decoration:none}
.pp-wrap .pp-breadcrumb a:hover{color:var(--pp-green)}
.pp-wrap .pp-breadcrumb .breadcrumbs__separator{margin:0 4px;color:#9aa19d}
.pp-breadcrumb .breadcrumbs__current{color:inherit}

/* ---------- Postavitev ---------- */
.pp-product{display:grid;grid-template-columns:minmax(0,1fr);margin-top:10px;padding-bottom:28px}

/* ---------- Galerija ---------- */
.pp-gallery__stage{position:relative;border:1px solid var(--pp-line);border-radius:var(--pp-radius);overflow:hidden;background:#fff}
.pp-gallery__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;aspect-ratio:1/1}
.pp-gallery__track::-webkit-scrollbar{display:none}
.pp-wrap .pp-gallery__slide{flex:0 0 100%;width:100%;max-width:none;height:100%;object-fit:cover;scroll-snap-align:center}
.pp-wrap .pp-gallery__slide.is-contain{object-fit:contain;padding:6%}
.pp-tag{position:absolute;z-index:2;top:12px;left:12px;background:var(--pp-green);color:#fff;font-weight:600;font-size:10.5px;line-height:1.2;letter-spacing:.5px;text-transform:uppercase;padding:5px 9px;border-radius:4px}
.pp-gallery__dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:7px}
.pp-gallery__dots button{width:7px;height:7px;min-height:0;padding:0;border:0;border-radius:50%;background:#cfd4d1;cursor:pointer}
.pp-gallery__dots button.is-active{background:var(--pp-green)}
/* One row of thumbnails under the main image (scrolls when there are more), arrows on the image. */
.pp-gallery__dots{display:none}
.pp-gallery__thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.pp-gallery__thumbs::-webkit-scrollbar{display:none}
.pp-gallery__thumbs button{flex:0 0 calc((100% - 32px) / 5);aspect-ratio:1/1;min-height:0;padding:0;border:1px solid var(--pp-line);border-radius:8px;overflow:hidden;background:#fff;cursor:pointer;scroll-snap-align:start}
/* Active keeps its 1px border (the outline adds the second px), so the thumbnail does not shift. */
.pp-gallery__thumbs button.is-active{border-color:var(--pp-green);outline:1px solid var(--pp-green);outline-offset:-2px}
.pp-wrap .pp-gallery__thumbs img{width:100%;height:100%;object-fit:cover}
.pp-wrap .pp-gallery__thumbs .is-contain img{object-fit:contain;padding:6px}
/* Arrows as on the live product gallery (page.css .woocommerce-product-gallery__wrapper .slick-arrow). */
.pp-wrap .pp-gallery__arrow{position:absolute;top:0;bottom:0;z-index:2;display:flex;align-items:center;justify-content:center;width:52px;height:auto;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;cursor:pointer}
.pp-wrap .pp-gallery__arrow svg{width:36px;height:36px;fill:var(--pp-green);transition:opacity .2s}
.pp-wrap .pp-gallery__arrow:hover svg{opacity:.7}
.pp-gallery__arrow--prev{left:0}
.pp-gallery__arrow--prev svg{transform:scale(-1)}
.pp-gallery__arrow--next{right:0}
.pp-gallery .aplikacije_wrap{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.pp-gallery .aplikacije_item img{height:40px;width:auto}

/* ---------- Naslov, ocena ---------- */
.pp-wrap .pp-brand{display:block;height:auto;width:auto;max-width:110px;object-fit:contain;margin-top:22px}
.pp-wrap .pp-title{font-family:var(--pp-serif);font-weight:700;font-size:28px;line-height:1.15;letter-spacing:-.2px;color:var(--pp-ink);margin:8px 0 0;padding:0;text-align:left;text-transform:none}
.pp-wrap h1.pp-title{margin:10px 0 0 !important}
.pp-rating{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-size:13px;color:var(--pp-text);text-decoration:none}
.pp-stars{color:var(--pp-star);font-size:15px;letter-spacing:1px;line-height:1}
.pp-rating__link{text-decoration:underline;text-underline-offset:2px}
.pp-rating:hover .pp-rating__link{color:var(--pp-green)}
.pp-wrap .pp-subtitle{margin:10px 0 0;font-size:14.5px;line-height:1.4;color:var(--pp-muted)}
.pp-desc{margin-top:16px;font-size:14px;line-height:1.5}
.pp-desc p+p{margin-top:10px}

/* ---------- Prednosti ---------- */
.pp-wrap .pp-benefits{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.pp-wrap .pp-benefits li{position:relative;margin:0;padding:0 0 0 28px;font-size:14px;line-height:1.35;min-height:18px;color:var(--pp-text);background:none}
.pp-wrap .pp-benefits li::before{content:"";position:absolute;left:0;top:.5px;width:18px;height:18px;border-radius:50%;
  background:var(--pp-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2 2L8 3' stroke='%23fff' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat}
.pp-benefits b,.pp-benefits strong{font-weight:600;color:var(--pp-ink)}

/* ---------- Nakup ---------- */
.pp-buy{margin-top:22px;padding-top:20px;border-top:1px solid var(--pp-line)}
.pp-price-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.pp-price{font-family:var(--pp-serif);font-weight:700;font-size:32px;line-height:1;color:var(--pp-green)}
.pp-price .woocommerce-Price-amount{color:inherit;font:inherit}
.pp-price ins{text-decoration:none;background:none;color:inherit}
.pp-price del{font-size:.55em;font-weight:400;color:#8b938e;margin-right:6px}
.pp-price del .woocommerce-Price-amount{color:inherit}
.pp-stock{display:inline-flex;align-items:center;gap:6px;background:var(--pp-stock-bg);color:var(--pp-stock-text);font-size:11.5px;font-weight:500;line-height:1.2;padding:5px 10px;border-radius:999px}
.pp-stock i{width:7px;height:7px;border-radius:50%;background:var(--pp-stock-dot)}
.pp-stock--out{background:#f1f2f1;color:#5f6964}
.pp-stock--out i{background:#9aa19d}
.pp-wrap .pp-vat{margin:5px 0 0;font-size:11.5px;color:#6b7570}
.pp-wrap .price_include--promo{margin:4px 0 0;font-size:11.5px;color:#6b7570;text-align:left}

/* Variacije: obstoječi parnad swatchi v novi obliki */
.pp-form table.variations{margin:16px 0 0;border:0;border-collapse:collapse;width:auto}
.pp-form table.variations th,.pp-form table.variations td{padding:0;border:0;background:none;text-align:left;vertical-align:middle}
.pp-form table.variations th.parnad-variation-label-cell{display:none}
.pp-form table.variations th.label{padding-right:10px;font-size:13.5px;font-weight:600;color:var(--pp-ink)}
.pp-form table.variations tr+tr td{padding-top:10px}
.pp-form .parnad-variation-picker{display:flex;align-items:center;gap:10px;font-size:13.5px}
.pp-form .parnad-variation-label{margin:0;font-size:0;line-height:1.2}
.pp-form .parnad-variation-label .label{font-size:13.5px;font-weight:600;color:var(--pp-ink);margin-right:4px}
.pp-form .parnad-variation-label .label::after{content:":"}
.pp-form .parnad-variation-label .selected-value{font-size:13.5px;font-weight:400;color:var(--pp-text);text-transform:lowercase}
.pp-form .parnad-color-swatches{display:flex;align-items:center;gap:10px;margin:0}
.pp-form .parnad-color-swatch{position:relative;display:block;width:22px;height:22px;min-width:0;min-height:0;padding:0;margin:0;border-radius:50%;
  border:1.5px solid transparent;background:var(--swatch-color,#ccc);box-shadow:0 0 0 2px #fff inset,0 0 0 3px rgba(0,0,0,.12) inset;cursor:pointer}
.pp-form .parnad-color-swatch.is-selected{border-color:var(--pp-green)}
.pp-form .parnad-color-swatch:focus-visible{outline:2px solid var(--pp-green);outline-offset:2px}
.pp-form .parnad-color-swatch .check{display:none}
.pp-form .parnad-variation-select{display:none}
.pp-form .reset_variations{display:none!important}
.pp-form .single_variation .woocommerce-variation-price,
.pp-form .single_variation .woocommerce-variation-description{display:none}
.pp-form .single_variation .stock{margin:10px 0 0;font-size:13px}
.pp-form .single_variation .stock.in-stock{display:none}

.pp-form .variations_button,.pp-form .single_variation_wrap{display:block;width:100%;margin:0;padding:0}
.pp-actions{display:flex;gap:10px;width:100%;margin-top:14px;height:48px}
.pp-qty{display:flex;flex:none;width:96px;border:1px solid #c9cfcb;border-radius:6px;overflow:hidden;background:#fff}
.pp-qty>button{flex:1;min-width:0;min-height:0;padding:0;border:0;background:none;font-size:16px;line-height:1;color:var(--pp-ink);cursor:pointer}
.pp-qty>button:hover{background:#f3f5f4}
.pp-qty .quantity{display:flex;margin:0;padding:0;width:auto;height:100%;border:0}
.pp-qty .quantity label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pp-wrap .pp-qty input.qty{width:32px;height:100%;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;text-align:center;font-weight:500;font-size:15px;color:var(--pp-ink);-moz-appearance:textfield}
.pp-qty input::-webkit-outer-spin-button,.pp-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pp-wrap .pp-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;height:auto;min-height:0;margin:0;padding:0 14px;border:0;border-radius:6px;background:var(--pp-green);color:#fff;
  font-family:var(--pp-sans);font-weight:600;font-size:15px;line-height:1.1;letter-spacing:.4px;text-transform:uppercase;box-shadow:none;cursor:pointer;transition:background .15s;position:static;top:auto;width:auto}
.pp-wrap .pp-btn:hover,.pp-wrap .pp-btn:focus{background:var(--pp-green-dark);color:#fff}
.pp-wrap .pp-btn:disabled,.pp-wrap .pp-btn.disabled{opacity:.55;cursor:not-allowed}
.pp-wrap .pp-btn::before,.pp-wrap .pp-btn::after{display:none}
/* theme.css sets 16px !important on .woocommerce button.button.alt; on a phone the label has to fit one line. */
.pp-wrap .pp-actions button.pp-btn.pp-btn{min-width:0;font-size:14px !important;letter-spacing:.2px;gap:8px;padding:0 10px;white-space:nowrap;margin:0 !important}
.pp-wrap .pp-actions .pp-btn span{overflow:hidden;text-overflow:ellipsis}
@media (max-width:359px){.pp-wrap .pp-actions .pp-btn svg{display:none}}
.pp-btn svg{width:20px;height:18px;flex:none}

.pp-wrap .pp-delivery{display:flex;align-items:center;justify-content:center;gap:7px;margin:10px 0 0;font-size:12px;color:#55605a}
.pp-delivery strong{font-weight:400}
.pp-delivery svg{width:19px;height:15px;color:var(--pp-green);flex:none}

.pp-wrap .pp-usp{list-style:none;margin:16px 0 0;padding:12px 6px;display:flex;background:var(--pp-green-soft);border-radius:var(--pp-radius)}
.pp-wrap .pp-usp li{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin:0;padding:0 4px;font-size:11.5px;line-height:1.3;color:var(--pp-text);background:none}
.pp-wrap .pp-usp li::before{display:none}
.pp-usp li+li{border-left:1px solid var(--pp-green-line)}
.pp-usp__ico{width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--pp-green);flex:none}
.pp-usp__ico svg{width:18px;height:18px}

/* ---------- Leanpay ---------- */
.pp-leanpay{margin-top:14px;height:46px;display:flex;align-items:center;justify-content:center;gap:24px;border:1px solid var(--pp-red);background:var(--pp-red-soft);border-radius:8px;text-decoration:none}
.pp-wrap .pp-leanpay img{height:24px;width:auto}
.pp-leanpay i{width:1px;height:22px;background:var(--pp-red)}
.pp-leanpay span{color:var(--pp-red-text);font-weight:600;font-size:14px}
.pp-leanpay:hover span{text-decoration:underline}

/* ---------- Namig za nakup ---------- */
.pp-wrap .pp-addons__title{font-family:var(--pp-serif);font-weight:700;font-size:20px;line-height:1.25;color:var(--pp-ink);margin:30px 0 0;padding:0;text-align:left}
.pp-wrap .pp-addons__note{margin-top:8px;font-size:13px}
.pp-addons__list{display:grid;gap:10px;margin-top:12px}
.pp-addon{display:flex;align-items:center;gap:12px;margin:0;padding:8px 14px 8px 12px;border:1px solid var(--pp-line);border-radius:8px;background:#fff;cursor:pointer;transition:border-color .15s}
.pp-addon:has(input:checked){border-color:var(--pp-green)}
.pp-wrap .pp-addon img{width:64px;height:64px;object-fit:contain;flex:none}
.pp-addon__body{display:flex;flex-direction:column;gap:3px;border-left:1px solid var(--pp-line);padding-left:14px}
.pp-addon__name{color:var(--pp-green);font-weight:600;font-size:13px;line-height:1.3;text-decoration:none}
a.pp-addon__name:hover{text-decoration:underline;color:var(--pp-green-dark)}
.pp-addon__price{color:var(--pp-ink);font-weight:600;font-size:13px}
.pp-addon__price del{font-weight:400;color:#8b938e;margin-right:4px}
.pp-addon__price ins{text-decoration:none;background:none}
.pp-addon__check{display:flex;align-items:center;gap:7px;font-size:12px;color:#55605a}
.pp-wrap .pp-addon__check input{width:14px;height:14px;margin:0;accent-color:var(--pp-green)}

/* ==========================================================
   DESKTOP
   ========================================================== */
@media (min-width:900px){
  .pp-breadcrumb{padding-top:18px;font-size:13px}
  .pp-product{grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:64px;align-items:start;margin-top:20px;padding-bottom:60px}
  /* Below the fixed header; header-tauria.js keeps --parnad-header-height current. */
  .pp-gallery{position:sticky;top:calc(var(--parnad-header-height, 96px) + 20px)}
  .pp-gallery__stage{border-radius:12px}
  .pp-gallery__track{overflow:hidden;aspect-ratio:auto;height:560px}
  .pp-wrap .pp-gallery__slide.is-contain{padding:45px}
  .pp-tag{top:18px;left:18px;font-size:12px;padding:7px 12px;border-radius:5px}
  .pp-gallery__thumbs{gap:12px;margin-top:12px}
  .pp-gallery__thumbs button{flex-basis:calc((100% - 36px) / 4);aspect-ratio:auto;height:136px}
  .pp-wrap .pp-gallery__thumbs .is-contain img{padding:12px}
  .pp-wrap .pp-gallery__arrow{width:68px}
  .pp-wrap .pp-gallery__arrow svg{width:50px;height:50px}

  .pp-wrap .pp-brand{margin-top:6px}
  .pp-wrap .pp-title{font-size:40px;line-height:1.1;letter-spacing:-.4px;margin-top:12px}
  .pp-rating{margin-top:12px;font-size:14px;gap:10px}
  .pp-stars{font-size:17px}
  .pp-wrap .pp-subtitle{margin-top:12px;font-size:17px}
  .pp-wrap .pp-benefits{margin-top:22px;gap:11px}
  .pp-wrap .pp-benefits li{font-size:15.5px;padding-left:32px}
  .pp-wrap .pp-benefits li::before{width:20px;height:20px}

  .pp-buy{margin-top:26px;padding-top:24px}
  .pp-price-row{gap:16px}
  .pp-price{font-size:40px}
  .pp-stock{font-size:13px;padding:6px 12px}
  .pp-wrap .pp-vat{font-size:13px;margin-top:7px}
  .pp-form table.variations{margin-top:20px}
  .pp-form .parnad-variation-picker,.pp-form table.variations th.label{gap:12px;font-size:15px}
  .pp-form .parnad-variation-label .label,.pp-form .parnad-variation-label .selected-value{font-size:15px}
  .pp-form .parnad-color-swatches{gap:12px}
  .pp-form .parnad-color-swatch{width:26px;height:26px}
  .pp-actions{height:54px;margin-top:18px;gap:12px}
  .pp-qty{width:120px;border-radius:7px}
  .pp-wrap .pp-actions button.pp-btn.pp-btn{font-size:16px !important;letter-spacing:.4px;gap:10px;padding:0 14px;border-radius:7px}
  .pp-wrap .pp-delivery{justify-content:flex-start;padding-left:132px;margin-top:12px;font-size:13.5px}

  .pp-wrap .pp-usp{margin-top:20px;padding:14px 8px;border-radius:12px}
  .pp-wrap .pp-usp li{flex-direction:row;justify-content:center;text-align:left;gap:10px;font-size:13px}
  .pp-usp__ico{width:38px;height:38px}

  .pp-leanpay{height:52px;gap:28px;border-radius:9px}
  .pp-wrap .pp-leanpay img{height:26px}
  .pp-leanpay span{font-size:15px}

  .pp-wrap .pp-addons__title{font-size:22px;margin-top:32px}
  .pp-addons__list{grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
  .pp-addon{padding:12px 14px}
  .pp-addon__name,.pp-addon__price{font-size:13.5px}
}

/* Section headings below the top block: style.css forces 36px !important on
   .custom_product_content_wrap h2 and page.css keeps a 27px line-height, so on
   phones and tablets they outgrow the 30–34px h1 and the lines overlap. */
@media (max-width:899px){
  body.fullwidth-product-page .custom_product_content_wrap h2:not(.woocommerce-loop-product__title){font-size:24px !important;line-height:1.3 !important}
}
/* Video row on phones: 40px below it, or none when a text block follows, whose own
   50px top padding already makes the gap. */
@media (max-width:899px){
  body.fullwidth-product-page .custom_product_content_wrap section.vidoe_wrap{margin-bottom:0 !important}
  body.fullwidth-product-page .custom_product_content_wrap .wrap:has(> section.vidoe_wrap){margin-bottom:40px !important}
  body.fullwidth-product-page .custom_product_content_wrap .wrap:has(> section.vidoe_wrap):has(+ .ltr_product_content){margin-bottom:0 !important}
}
/* Ad campaign note (inc/campaign-coupon.php), shown only to visitors from the ad. */
.pp-wrap .pp-campaign{display:flex;align-items:center;gap:10px;margin:12px 0 0;padding:10px 14px;border:1px solid #bfe3c9;border-radius:8px;background:#eef8f1;color:#14532d;font-size:15px;line-height:1.4}
.pp-wrap .pp-campaign[hidden]{display:none}
.pp-wrap .pp-campaign svg{flex:none;width:20px;height:20px;color:var(--pp-green)}
.pp-wrap .pp-campaign strong{font-weight:700}
/* Products that are not fullwidth: "Opis izdelka" below the hero lines up with it. */
body.fullwidth-product-page main.l-page.woocommerce_content.product_page .product_info_detailed.wrap{max-width:1192px;padding:0 16px}
/* Lists in the short description (e.g. "Set vsebuje:") use the same round
   check as .pp-benefits instead of the theme's .content icon-font tick. */
.pp-wrap .pp-desc ul{list-style:none;display:grid;gap:9px;margin:10px 0 0;padding:0;font-size:14px}
.pp-wrap .pp-desc ul li{position:relative;margin:0;padding:0 0 0 28px;font-size:14px;line-height:1.35;min-height:18px;color:var(--pp-text)}
.pp-wrap .pp-desc ul li::before{content:"";position:absolute;left:0;top:.5px;width:18px;height:18px;border-radius:50%;font-size:0;
  background:var(--pp-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2 2L8 3' stroke='%23fff' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat}
.pp-wrap .pp-desc ul li b,.pp-wrap .pp-desc ul li strong{font-weight:600;color:var(--pp-ink)}
.pp-wrap .pp-desc ul li a,.pp-wrap .pp-desc ul li a strong{color:var(--pp-green)}
@media (min-width:900px){
  .pp-wrap .pp-desc ul{gap:11px}
  .pp-wrap .pp-desc ul li{font-size:15.5px;padding-left:32px}
  .pp-wrap .pp-desc ul li::before{width:20px;height:20px}
}
/* The main image opens the PhotoSwipe lightbox (product-pp.js). */
.pp-wrap .pp-gallery__slide{cursor:zoom-in}
/* "Kako deluje?" and other titles that open a benefits card: the card's own padding is
   the gap, without the 100px !important top margin of .content .special_title.center (page.css). */
@media (min-width:900px){
  body.fullwidth-product-page .product_benefits .benefits_content > .special_title:first-child{margin-top:20px !important}
}

/* ---------- Stylies products (body.product-brand--stylies, inc/product-fullwidth.php) ----------
   The new design's green becomes the Stylies blue of the live product pages
   (#255f91, hover #1e4d75); the round checks are yellow with a white tick. */
body.product-brand--stylies .pp-wrap{
  --pp-green:#255f91;
  --pp-green-dark:#1e4d75;
  --pp-green-soft:#eef3f9;
  --pp-green-line:#d3e0ee;
}
body.product-brand--stylies .pp-wrap .pp-benefits li::before,
body.product-brand--stylies .pp-wrap .pp-desc ul li::before{
  background-color:#eaba23;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2 2L8 3' stroke='%23fff' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.product-brand--stylies .pp-wrap .pp-campaign{border-color:#d3e0ee;background:#eef3f9;color:#1e4d75}
/* Both add-to-cart buttons are coloured with !important by older theme CSS (eshop.css,
   product-variations.css), so these need the extra specificity. */
body.product-brand--stylies .pp-wrap .pp-actions button.pp-btn.pp-btn,
body.product-brand--stylies.fullwidth-product-page main.l-page .summary.entry-summary .summary_add_to_cart .wrap form.cart .single_add_to_cart_button,
body.product-brand--stylies .summary_add_to_cart .single_add_to_cart_button{background-color:#255f91 !important;border-color:#255f91 !important}
body.product-brand--stylies .pp-wrap .pp-actions button.pp-btn.pp-btn:hover,
body.product-brand--stylies.fullwidth-product-page main.l-page .summary.entry-summary .summary_add_to_cart .wrap form.cart .single_add_to_cart_button:hover,
body.product-brand--stylies .summary_add_to_cart .single_add_to_cart_button:hover{background-color:#1e4d75 !important;border-color:#1e4d75 !important}
/* Left/right text blocks on phones: the 60px under the section title and the 50px
   padding of the text block added up to 110px, the list's own margin to 70px above
   the image. The block's 30px padding is now the only gap on either side. */
@media (max-width:899px){
  body.fullwidth-product-page main.l-page.product_page .custom_product_content_wrap .ltr_product_content .wrap .text_wrap{padding-top:30px;padding-bottom:30px}
  body.fullwidth-product-page .custom_product_content_wrap .ltr_product_content .text_wrap > :last-child{margin-bottom:0}
  body.fullwidth-product-page .custom_product_content_wrap > .wrap:has(> .special_title:only-child):has(+ .ltr_product_content){margin-bottom:0}
  body.fullwidth-product-page .custom_product_content_wrap > .wrap:has(> .special_title:only-child):has(+ .ltr_product_content) > .special_title{margin-bottom:0}
}
/* "Special" products (.spec): page.css pulls the content up 50px over the old banner,
   which on phones slid it under the USP box of the new hero. */
body.fullwidth-product-page main.l-page.woocommerce_content.product_page .custom_product_content_wrap.spec{margin-top:0}
/* Benefits card without a heading ("mixed" row with no title): it overlaps the image
   above by half as much as a titled card (35px instead of 70px), and the first
   section starts at the card's own padding. */
body.fullwidth-product-page main.l-page.woocommerce_content.product_page .product_benefits .benefits_content.no-title{margin-top:-35px}
body.fullwidth-product-page main.l-page.woocommerce_content.product_page .product_benefits .benefits_content.no-title > .ltr_sections:first-child{margin-top:0}