/* ==========================================================================
   NativeNic — PCD restyle (CSS-only; targets the plugin's native markup).
   No render hijack — the plugin owns the DOM. We only change the exterior.

   ONE design, scales everywhere.  Every dimension is in `em`, so the whole
   widget scales by a single `font-size` knob on .pcd-container:
     • product / PDP : font-size 16px  → full size (em = target-px ÷ 16,
                       so the product page is pixel-identical to before)
     • cards (shop / category / home) : font-size 12px → same design, ~75%
   No separate "compact" / "large" tiers — it's one proportional design.
   ========================================================================== */

/* =========================================================
   Container — the size knob lives here
========================================================= */
.pcd-container{
  font-size:12px;                 /* default = card size; PDP overrides to 16px */
  border:1px solid var(--nn-line);
  background:var(--nn-cream-soft);
  padding:1.125em;                /* 18px @16 */
  font-family:'Manrope',system-ui,sans-serif;
  border-radius:0 !important;
  width:100%;
  max-width:560px;
}
.single-product .pcd-container{ font-size:16px; }          /* PDP = full size */

/* Hide the plugin's internal price line + duplicate WC add-to-cart on PDP */
.pcd-container .pcd-price-display{ display:none !important; }
.single-product .e-atc-qty-button-holder,
.single-product form.cart .ux-quantity,
.single-product form.cart .single_add_to_cart_button:not(.pcd-add-to-cart-btn){
  display:none !important;
}
/* Plugin's "Quantity Discount" green hint — hide */
.pcd-container ~ .pcd_discount_message,
.pcd-container .pcd_discount_message,
.pcd-container .pcd-price-display_msg,
.pcd-discount-message,
.pcd-shop-discount-text{ display:none !important; }

/* =========================================================
   FORMAT TOGGLE — Pack / Carton
========================================================= */
.pcd-container .pcd-type-select{ display:flex; gap:.5em; margin:0 0 .75em; }
.pcd-container .pcd-type-button{
  flex:1; cursor:pointer; appearance:none;
  background:var(--nn-cream) !important;
  border:1.5px solid var(--nn-line) !important; border-radius:0 !important;
  padding:.75em .625em;            /* 12 10 @16 */
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.1875em;
  min-height:4em;                  /* 64 @16 · 48 @12 */
  text-align:center; font-family:inherit;
  transition:background .35s var(--nn-ease), border-color .35s var(--nn-ease);
}
.pcd-container .pcd-type-button > span:first-child{
  font-size:.8125em;               /* 13 @16 */
  font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--nn-ink); line-height:1.1;
}
.pcd-container .pcd-type-button .pack_carton_price{
  font-family:'Cal Sans','Manrope',sans-serif; font-weight:400;
  font-size:.9375em;               /* 15 @16 */
  color:var(--nn-ink); line-height:1.1; letter-spacing:.005em;
}
/* plugin writes "<del>$38.88</del> $31.10" into the active button's price */
.pcd-container .pcd-type-button .pack_carton_price del{
  display:inline !important; text-decoration:line-through !important;
  text-decoration-color:rgba(244,235,208,.55) !important;
  text-decoration-thickness:1.5px !important;
  color:rgba(244,235,208,.62) !important;
  font-size:.85em !important; font-weight:600 !important;
  margin-right:.4em; background:transparent !important;
}
.pcd-container .pcd-type-button .pack_carton_price ins{
  text-decoration:none !important; background:transparent !important; color:inherit !important;
}
.pcd-container .pcd-type-button:hover{ border-color:var(--nn-ink) !important; }
.pcd-container .pcd-type-button.active{
  background:var(--nn-burgundy) !important; border-color:var(--nn-burgundy) !important;
}
.pcd-container .pcd-type-button.active > span:first-child,
.pcd-container .pcd-type-button.active .pack_carton_price{ color:var(--nn-cream) !important; }

/* =========================================================
   QUANTITY CHIPS  (4 / 5 / 10 / 20)
========================================================= */
.pcd-container .pcd-discount-info{ margin:0 0 .75em; }
.pcd-container .pcd-discount-group{ width:100% !important; margin:0; border:0 !important; padding:0; }
.pcd-container .pcd-discount-group:not([style*="none"]){
  display:grid !important; grid-template-columns:repeat(4,1fr); gap:.5em;
}
.pcd-container .pcd-discount-qty{
  background:var(--nn-cream) !important; color:var(--nn-ink) !important;
  border:1.5px solid var(--nn-line) !important; border-radius:0 !important;
  min-height:4.5em;                /* 72 @16 · 54 @12 */
  padding:.75em .25em; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  font-family:'Cal Sans','Manrope',sans-serif; font-weight:400;
  font-size:1.625em;               /* 26 @16 · 19.5 @12 */
  line-height:1.04; letter-spacing:-.005em;
  transition:background .3s var(--nn-ease), border-color .3s var(--nn-ease);
}
.pcd-container .pcd-discount-qty .nn-q{ font-family:inherit; font-weight:400; color:inherit; line-height:1.04; }
.pcd-container .pcd-discount-qty .nn-u{ display:none !important; }
.pcd-container .pcd-discount-qty:hover{ border-color:var(--nn-ink) !important; }
.pcd-container .pcd-discount-qty.active{
  background:var(--nn-burgundy) !important; border-color:var(--nn-burgundy) !important; color:var(--nn-cream) !important;
}

/* =========================================================
   ADD-TO-CART ROW  (qty stepper + ATC)
========================================================= */
.pcd-container .pcd-add-to-cart-row{ display:block; margin:0; }
.pcd-container .pcd-qty-row{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  gap:.75em !important; margin:0 0 .75em !important; width:100% !important;
}
.pcd-container .pcd-qty-label{
  display:inline-block !important;
  font-size:.6875em;               /* 11 @16 */
  font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--nn-ink-soft); flex:0 0 auto; margin:0 !important;
}
.pcd-container .pcd-qty-input-box{
  display:inline-flex !important; align-items:stretch;
  border:1.5px solid var(--nn-ink) !important; background:#fff; border-radius:0 !important;
  height:2.625em;                  /* 42 @16 */
  width:auto !important; max-width:none !important; line-height:1; flex:0 0 auto;
}
.pcd-container .pcd-qty-btn{
  width:2.625em; align-self:stretch; cursor:pointer;
  background:var(--nn-cream) !important; border:none !important; color:var(--nn-ink) !important;
  font-size:1.125em;               /* 18 @16 */
  font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center;
  border-radius:0 !important; padding:0; margin:0;
  transition:background .2s var(--nn-ease), color .2s var(--nn-ease);
}
.pcd-container .pcd-qty-btn.minus{ border-right:1.5px solid var(--nn-ink) !important; }
.pcd-container .pcd-qty-btn.plus { border-left:1.5px solid var(--nn-ink) !important; }
.pcd-container .pcd-qty-btn:hover{ background:var(--nn-burgundy) !important; color:var(--nn-cream) !important; }
.pcd-container .pcd-qty-input{
  width:3.5em; align-self:stretch; text-align:center;
  border:none !important; background:#fff !important;
  font-family:'Manrope'; font-size:.9375em;   /* 15 @16 */
  font-weight:800; color:var(--nn-ink); padding:0; margin:0; border-radius:0 !important;
  -moz-appearance:textfield;
}
.pcd-container .pcd-qty-input::-webkit-outer-spin-button,
.pcd-container .pcd-qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.pcd-container .pcd-add-to-cart-btn{
  width:100% !important;
  background:var(--nn-burgundy) !important; color:var(--nn-cream) !important;
  border:none !important; border-radius:0 !important;
  padding:1.1875em 1.375em !important;   /* 19 22 @16 */
  font-family:'Manrope'; font-size:.875em;  /* 14 @16 */
  font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  text-align:center !important; cursor:pointer; display:block !important;
  transition:background .25s var(--nn-ease), transform .15s var(--nn-ease);
}
.pcd-container .pcd-add-to-cart-btn:hover{ background:var(--nn-ink) !important; }
.pcd-container .pcd-add-to-cart-btn:active{ transform:scale(.988); }

.nn-readout{ display:none !important; }

/* card containers fill their card (drop the 560 cap so 100% width applies) */
ul.products .pcd-container,
.product-small .pcd-container,
.nnh .pcd-container,
.col-inner .pcd-container{ max-width:none; }

/* small screens: nudge PDP down a touch so the full design fits narrow viewports */
@media(max-width:600px){
  .single-product .pcd-container{ font-size:14px; }
  .pcd-container{ padding:1em; }
}

/* =========================================================
   "TOP RATED" ribbon → onto the product image (category/shop loop).
   (Homepage .nnh cards get their own pin in nn-home.css.)
========================================================= */
.product-small{ position:relative; }
.product-small .col-inner{ position:relative; }
.product-small .product-small.box,
.product-small .box{ position:relative !important; overflow:visible; }
.product-small .box-image{ position:relative; overflow:hidden; }
.product-small .br_alabel{ position:absolute !important; z-index:6 !important; margin:0 !important; pointer-events:none; }
.product-small .br_alabel_right,
.product-small .br_alabel.br_alabel_right{ top:0 !important; right:0 !important; left:auto !important; bottom:auto !important; }
.product-small .br_alabel_left,
.product-small .br_alabel.br_alabel_left{ top:0 !important; left:0 !important; right:auto !important; bottom:auto !important; }
.product-small .badge-container,
.product-small .badge-container.absolute{ position:absolute !important; top:8px !important; left:8px !important; z-index:5 !important; margin:0 !important; }
.product-small .badge,
.product-small .callout{
  background:var(--nn-burgundy) !important; color:var(--nn-cream) !important; border-radius:0 !important;
  font-weight:800 !important; letter-spacing:.12em !important; text-transform:uppercase !important;
  font-size:10px !important; padding:5px 12px !important;
}
.product-small .badge-inner{ border-radius:0 !important; }