/*
 * shop-detail.css — Nature's 360 Product Detail Page (PDP) styles
 * Registered in resources/views/vendor/shop/base.blade.php AFTER the Aimeos
 * component CSS ({!! $header !!}) so equal-specificity rules win by order.
 *
 * Conventions (same as shop-home.css):
 *  - Reuses the --n360-* design tokens defined in shop-home.css (no duplicates).
 *  - Every rule is scoped to `.aimeos.catalog-detail` => the PDP only.
 *    No other Aimeos page (list, basket, checkout, account) is affected.
 *  - Aimeos markup/classes are only augmented, never renamed or removed, so
 *    Aimeos JS (variant switching, stock, price, reviews, basket) keeps working.
 *  - Logical CSS properties are used so dir="rtl" works without extra rules.
 *  - Mobile-first; breakpoints: 576 / 768 / 992.
 */

/* ============================================================
   1. THEME VARIABLES — remap Aimeos' own --ai-* palette (PDP only)
   ============================================================ */
.aimeos.catalog-detail {
  --ai-bg:             #FFFFFF;
  --ai-bg-alt:         var(--n360-bg);
  --ai-primary:        var(--n360-text);       /* Aimeos uses primary as TEXT colour */
  --ai-primary-alt:    var(--n360-text);
  --ai-secondary:      var(--n360-text-muted);
  --ai-secondary-alt:  var(--n360-text-muted);
  --ai-tertiary:       var(--n360-border);
  --ai-tertiary-alt:   var(--n360-bg);
  --ai-danger:         var(--n360-red);
  --ai-success:        var(--n360-green-mid);
  --ai-warning:        #F59E0B;
  --ai-radius:         var(--n360-radius);
  --ai-radius-round:   50%;
  --ai-product-image-ratio: 1/1;
  /* Used by vendor catalog-detail.css but never defined by it */
  --ai-bg-light:       var(--n360-green-pale);
  --ai-primary-light:  var(--n360-green-mid);
  --ai-secondary-dark: var(--n360-text);

  font-family: var(--n360-font);
  color: var(--n360-text);
}

/* ============================================================
   2. SHELL / LAYOUT
   ============================================================ */
.aimeos.catalog-detail > .container-xxl {
  max-width: 1400px;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.aimeos.catalog-detail .content-block { margin-block: 2.5rem; }

/* Columns: stack below 768px (Aimeos stacks at 576px which is too tight) */
@media (max-width: 767.98px) {
  .aimeos.catalog-detail article.product.row > .col-sm-6 { flex: 0 0 100%; width: 100%; max-width: 100%; }
}

/* Focus ring (Aimeos removes outlines) */
.aimeos.catalog-detail :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--n360-green-light);
  outline-offset: 2px;
}

/* Prev / next product navigator */
.aimeos.catalog-detail .catalog-detail-navigator a {
  color: var(--n360-text-muted);
  font-weight: 600;
  font-size: .85rem;
  border-inline-end-color: var(--n360-border);
  transition: color var(--n360-ease);
}
.aimeos.catalog-detail .catalog-detail-navigator a:hover,
.aimeos.catalog-detail .catalog-detail-navigator a:focus { color: var(--n360-green); }

/* Section headings (Suggested / Bundled / Supplier …) — mirrors .n360-section-heading */
.aimeos.catalog-detail .header {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 0;
  padding: 0;
  margin: 0 0 1.5rem;
  text-transform: none;
  font-size: clamp(1.3rem, 2.8vw, 1.9rem);
  font-weight: 800;
  color: var(--n360-text);
}
.aimeos.catalog-detail .header::after {
  content: '';
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--n360-green-pale), transparent);
}
[dir="rtl"] .aimeos.catalog-detail .header::after {
  background: linear-gradient(270deg, var(--n360-green-pale), transparent);
}

/* ============================================================
   3. BADGES (New / Sale)
   ============================================================ */
.aimeos.catalog-detail .badges { inset-block-start: .75rem; inset-inline-start: 1.5rem; display: flex; gap: .35rem; }
.aimeos.catalog-detail .product .badge-item {
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: .67rem;
  font-weight: 700;
  padding: .25rem .65rem;
  border-radius: var(--n360-radius-pill);
  color: #fff;
}
.aimeos.catalog-detail .product.new .badge-item.new  { background: var(--n360-green-mid); box-shadow: 0 2px 8px rgba(35,117,71,.3); }
.aimeos.catalog-detail .product.sale .badge-item.sale { background: #e11d48; box-shadow: 0 2px 8px rgba(225,29,72,.4); }

/* ============================================================
   4. IMAGE GALLERY
   ============================================================ */
.aimeos.catalog-detail .catalog-detail-image {
  background: var(--n360-card);
  border: 1px solid var(--n360-border);
  border-radius: calc(var(--n360-radius) + 4px);
  box-shadow: var(--n360-shadow);
  padding: 1rem;
  margin-block-end: 1.5rem;
  --swiffy-slider-nav-dark: var(--n360-green);
}
.aimeos.catalog-detail .catalog-detail-image .swiffy-slider:not(.thumbs) {
  background: #f8faf9;
  border-radius: var(--n360-radius);
  overflow: hidden;
}
.aimeos.catalog-detail .catalog-detail-image .image-single .media-item img {
  object-fit: contain;
  mix-blend-mode: multiply;
  background: transparent;
}
/* Vertically centre the product image inside the slider frame */
.aimeos.catalog-detail .catalog-detail-image .image-single .media-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.aimeos.catalog-detail .catalog-detail-image .thumbs { margin-block-start: 1rem; }
.aimeos.catalog-detail .catalog-detail-image .thumbnail img {
  aspect-ratio: 1;
  width: 100%;
  object-fit: contain;
  background: #f8faf9;
  padding: .25rem;
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  opacity: .85;
  transition: border-color var(--n360-ease), opacity var(--n360-ease), transform var(--n360-ease);
}
.aimeos.catalog-detail .catalog-detail-image .thumbnail img:hover,
.aimeos.catalog-detail .catalog-detail-image .thumbnail img:focus-visible {
  border-color: var(--n360-green);
  opacity: 1;
}

/* ============================================================
   5. PRODUCT INFO (supplier, title, SKU, rating, short text)
   ============================================================ */
.aimeos.catalog-detail .catalog-detail-basic .supplier,
.aimeos.catalog-detail .catalog-detail-basic .site {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin: 0 0 .5rem;
}
.aimeos.catalog-detail .catalog-detail-basic .supplier a,
.aimeos.catalog-detail .catalog-detail-basic .site { color: var(--n360-green-mid); transition: color var(--n360-ease); }
.aimeos.catalog-detail .catalog-detail-basic .supplier a:hover { color: var(--n360-green); }

.aimeos.catalog-detail .catalog-detail-basic h1.name {
  text-transform: none;
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--n360-text);
  padding: 0 0 .6rem;
}
.aimeos.catalog-detail .catalog-detail-basic .code {
  display: inline-flex;
  gap: .3rem;
  font-size: .75rem;
  color: var(--n360-text-muted);
  background: var(--n360-green-pale);
  padding: .2rem .65rem;
  border-radius: var(--n360-radius-sm);
  margin: 0 0 .75rem;
}

/* Rating: gold stars + score + count (Aimeos hides score and count) */
.aimeos.catalog-detail .catalog-detail-basic .rating {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-block-end: .75rem;
}
.aimeos.catalog-detail .catalog-detail-basic .rating .stars { color: #F59E0B; letter-spacing: 2px; font-size: 1.05rem; }
.aimeos.catalog-detail .catalog-detail-basic .rating .rating-value,
.aimeos.catalog-detail .catalog-detail-basic .rating .ratings {
  display: inline;
  font-size: .85rem;
  color: var(--n360-text-muted);
}
.aimeos.catalog-detail .catalog-detail-basic .rating .rating-value { font-weight: 700; color: var(--n360-text); }
.aimeos.catalog-detail .catalog-detail-basic .rating .ratings::before { content: '('; }
.aimeos.catalog-detail .catalog-detail-basic .rating .ratings::after  { content: ')'; }

/* Short description (hidden by Aimeos by default) */
.aimeos.catalog-detail .catalog-detail-basic .short {
  display: block;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--n360-text-muted);
  margin-block-end: .5rem;
}

/* ============================================================
   6. BUY BOX (price, variants, stock, qty + CTA)
   ============================================================ */
.aimeos.catalog-detail .catalog-detail-basket {
  background: var(--n360-card);
  border: 1px solid var(--n360-border);
  border-radius: calc(var(--n360-radius) + 4px);
  box-shadow: var(--n360-shadow);
  padding: 1.25rem 1.5rem;
  margin-block: 1rem;
  color: var(--n360-text);
}

/* --- 6.1 Price & discount --- */
.aimeos.catalog-detail .catalog-detail-basket .price-item:first-of-type {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .75rem;
}
.aimeos.catalog-detail .catalog-detail-basket .price-item .value {
  order: 1;
  min-width: 0;
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--n360-green);
}
.aimeos.catalog-detail .catalog-detail-basket .price-item:first-of-type .original {
  display: inline-block;
  order: 2;
  min-width: 0;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--n360-text-muted);
  text-decoration: line-through;
}
.aimeos.catalog-detail .catalog-detail-basket .price-item .rebatepercent {
  order: 3;
  position: static;
  margin: 0;
  background: var(--n360-red);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: .2rem .6rem;
  border-radius: var(--n360-radius-pill);
}
.aimeos.catalog-detail .catalog-detail-basket .price-item:first-of-type .taxrate {
  display: block;
  order: 5;
  flex-basis: 100%;
  padding: 0;
  margin: 0;
  font-size: .78rem;
  color: var(--n360-text-muted);
}
.aimeos.catalog-detail .catalog-detail-basket .price-item:first-of-type .costs { display: none; }

/* --- 6.2 Variant & optional attribute selectors --- */
.aimeos.catalog-detail .catalog-detail-basket .selection,
.aimeos.catalog-detail .catalog-detail-basket .attribute { margin-block: 1rem; }
.aimeos.catalog-detail .catalog-detail-basket label.select-name {
  display: block;
  padding: 0;
  margin: 0 0 .4rem;
  font-size: .85rem;
  font-weight: 700;
  text-transform: capitalize;
  color: var(--n360-text);
}
.aimeos.catalog-detail .catalog-detail-basket .select-hint { font-size: .78rem; color: var(--n360-text-muted); margin-block-end: .4rem; }

/* Dropdowns */
.aimeos.catalog-detail .catalog-detail-basket .form-select {
  border: 1.5px solid var(--n360-border);
  border-radius: var(--n360-radius);
  background-color: var(--n360-card);
  color: var(--n360-text);
  font-family: var(--n360-font);
  font-weight: 600;
  letter-spacing: normal;
  padding: .75rem 2.5rem .75rem 1rem;
  min-height: 3rem;
  box-shadow: none;
  transition: border-color var(--n360-ease), box-shadow var(--n360-ease);
}
.aimeos.catalog-detail .catalog-detail-basket .form-select:hover { border-color: var(--n360-green-mid); }
.aimeos.catalog-detail .catalog-detail-basket .form-select:focus {
  border-color: var(--n360-green);
  box-shadow: 0 0 0 3px rgba(28,94,57,.15);
}
.aimeos.catalog-detail .catalog-detail-basket .error select,
.aimeos.catalog-detail .catalog-detail-basket .error .form-select { border-color: var(--n360-red); }
.aimeos.catalog-detail .catalog-detail-basket .error .select-name { color: var(--n360-red); }

/* Radio chips (used where config sets a type to "radio": color, length, width) */
.aimeos.catalog-detail .catalog-detail-basket .radio .select-label,
.aimeos.catalog-detail .catalog-detail-basket .select-list .select-label {
  display: inline-block;
  border: 2px solid var(--n360-border);
  border-radius: var(--n360-radius-pill);
  background: var(--n360-card);
  color: var(--n360-text);
  font-weight: 600;
  padding: .5rem 1.1rem;
  margin: 0 .5rem .5rem 0;
  cursor: pointer;
  transition: border-color var(--n360-ease), background var(--n360-ease), color var(--n360-ease), box-shadow var(--n360-ease);
}
[dir="rtl"] .aimeos.catalog-detail .catalog-detail-basket .select-list .select-label { margin: 0 0 .5rem .5rem; }
.aimeos.catalog-detail .catalog-detail-basket .select-option:hover + .select-label { border-color: var(--n360-green); }
.aimeos.catalog-detail .catalog-detail-basket .select-option:checked + .select-label {
  background: var(--n360-green);
  border-color: var(--n360-green);
  color: #fff;
  box-shadow: 0 4px 12px rgba(28,94,57,.25);
}
.aimeos.catalog-detail .catalog-detail-basket .select-option:focus-visible + .select-label {
  outline: 3px solid var(--n360-green-light);
  outline-offset: 2px;
}
.aimeos.catalog-detail .catalog-detail-basket .select-option:disabled + .select-label {
  opacity: .45;
  cursor: not-allowed;
  text-decoration: line-through;
  border-color: var(--n360-border);
}
.aimeos.catalog-detail .catalog-detail-basket .selection .select-option:disabled + .select-label::after { content: none; }

/* Optional attribute inputs */
.aimeos.catalog-detail .catalog-detail-basket input[type="checkbox"],
.aimeos.catalog-detail .catalog-detail-basket input[type="radio"] { accent-color: var(--n360-green); }

/* --- 6.3 Stock / availability ---
 * Aimeos renders:  .stockitem.stock-(high|low|out|unlimited) > .stocklevel + .stocktext
 * but hides the (translated) text and shows only a dot. Show a labelled pill instead.
 */
.aimeos.catalog-detail .catalog-detail-basket .stock-list {
  display: block;
  text-align: start;
  margin: 0;
  padding: .25rem 0 0;
}
.aimeos.catalog-detail .stock-list .stock-actual .stockitem {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .85rem;
  border-radius: var(--n360-radius-pill);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.3;
}
.aimeos.catalog-detail .stock-list .stock-actual .stocklevel {
  display: inline-block;
  flex: none;
  width: .55rem;
  height: .55rem;
  margin: 0;
}
.aimeos.catalog-detail .stock-list .stock-actual .stocktext { display: inline; }
.aimeos.catalog-detail .stock-list .stock-actual .stock-high,
.aimeos.catalog-detail .stock-list .stock-actual .stock-unlimited { background: var(--n360-green-pale); color: var(--n360-green); }
.aimeos.catalog-detail .stock-list .stock-actual .stock-low  { background: #FEF3C7; color: #92400E; }
.aimeos.catalog-detail .stock-list .stock-actual .stock-low .stocklevel  { background: #F59E0B; }
.aimeos.catalog-detail .stock-list .stock-actual .stock-out  { background: #FEE2E2; color: #B91C1C; }
.aimeos.catalog-detail .stock-list .stock-actual .stock-out .stocklevel  { background: var(--n360-red); }
.aimeos.catalog-detail .stock-list .stock-actual .stock-high .stocklevel,
.aimeos.catalog-detail .stock-list .stock-actual .stock-unlimited .stocklevel { background: var(--n360-green); }

/* --- 6.4 Quantity + Add to basket --- */
.aimeos.catalog-detail .catalog-detail-basket .addbasket { margin-block-start: 1rem; }
.aimeos.catalog-detail .catalog-detail-basket .addbasket .input-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: .75rem;
  margin: 0;
}
.aimeos.catalog-detail .catalog-detail-basket .addbasket .qty-wrapper {
  flex: 0 0 7.5rem;
  width: 7.5rem;
}
.aimeos.catalog-detail .catalog-detail-basket .addbasket input[type="number"] {
  width: 100%;
  border: 1.5px solid var(--n360-border);
  border-radius: var(--n360-radius);
  background: var(--n360-card);
  color: var(--n360-text);
  font-family: var(--n360-font);
  font-size: 1rem;
  font-weight: 700;
  font-weight: 700;
  text-align: center;
  padding: .75rem 2.25rem;
  -moz-appearance: textfield;
  transition: border-color var(--n360-ease), box-shadow var(--n360-ease);
}
.aimeos.catalog-detail .catalog-detail-basket .addbasket input[type="number"]::-webkit-inner-spin-button,
.aimeos.catalog-detail .catalog-detail-basket .addbasket input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.aimeos.catalog-detail .catalog-detail-basket .addbasket input[type="number"]:hover { border-color: var(--n360-green-mid); }
.aimeos.catalog-detail .catalog-detail-basket .addbasket input[type="number"]:focus {
  border-color: var(--n360-green);
  box-shadow: 0 0 0 3px rgba(28,94,57,.15);
}
.aimeos.catalog-detail .catalog-detail-basket .addbasket input[type="number"]:disabled { background: var(--n360-bg); color: var(--n360-text-muted); }

.aimeos.catalog-detail .catalog-detail-basket .addbasket .btn.btn-action {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  margin: 0;
  background: var(--n360-green);
  border: 2px solid var(--n360-green);
  border-radius: var(--n360-radius-pill);
  color: #fff;
  font-family: var(--n360-font);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .01em;
  padding: .85rem 1.75rem;
  transition: background var(--n360-ease), border-color var(--n360-ease), transform var(--n360-ease), box-shadow var(--n360-ease);
}
.aimeos.catalog-detail .catalog-detail-basket .addbasket .btn.btn-action:hover:not(:disabled),
.aimeos.catalog-detail .catalog-detail-basket .addbasket .btn.btn-action:focus-visible:not(:disabled) {
  background: #1e5038;
  border-color: #1e5038;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(28,94,57,.25);
}
.aimeos.catalog-detail .catalog-detail-basket .addbasket .btn.btn-action:active:not(:disabled) { transform: translateY(0); box-shadow: none; color: #fff; }
.aimeos.catalog-detail .catalog-detail-basket .addbasket .btn.btn-action:disabled,
.aimeos.catalog-detail .catalog-detail-basket .addbasket .btn.btn-action.btn-disabled {
  opacity: .45;
  cursor: not-allowed;
  background: var(--n360-green);
  color: #fff;
}

/* --- 6.5 Product actions (pin / watch / favourite) + share --- */
.aimeos.catalog-detail .catalog-detail-actions { align-items: center; margin-block: .75rem 0; }
.aimeos.catalog-detail .catalog-social .social-button,
.aimeos.catalog-detail .catalog-actions .actions-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: var(--n360-text-muted);
  cursor: pointer;
  transition: color var(--n360-ease), background var(--n360-ease), transform var(--n360-ease);
}
.aimeos.catalog-detail .catalog-social .social-button::before,
.aimeos.catalog-detail .catalog-actions .actions-button::before { padding: 0; }
.aimeos.catalog-detail .catalog-social .social-button:hover,
.aimeos.catalog-detail .catalog-actions .actions-button:hover { color: var(--n360-green); background: var(--n360-green-pale); }
.aimeos.catalog-detail .catalog-social .social-button:active,
.aimeos.catalog-detail .catalog-actions .actions-button:active { transform: scale(.95); }

/* ============================================================
   7. GROUP PRODUCT TABLE → rows as cards
   ============================================================ */
.aimeos.catalog-detail .items-group .selection { margin-block: 1rem; }
.aimeos.catalog-detail .items-group .selection .row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 5.5rem;
  grid-template-areas:
    "media name  qty"
    "media attr  qty"
    "media stock qty";
  column-gap: .85rem;
  row-gap: .15rem;
  align-items: center;
  margin: 0;
  --bs-gutter-x: 0;
}
.aimeos.catalog-detail .items-group .selection .row > * {
  width: auto;
  max-width: none;
  flex: none;
  padding: 0;
  margin: 0;
  overflow: visible;
  text-align: start;
}
.aimeos.catalog-detail .items-group .selection .row > .select-media,
.aimeos.catalog-detail .items-group .selection .select-item > :first-child { grid-area: media; }
.aimeos.catalog-detail .items-group .selection .row > .select-name     { grid-area: name; }
.aimeos.catalog-detail .items-group .selection .row > .select-attr     { grid-area: attr; }
.aimeos.catalog-detail .items-group .selection .row > .select-stock    { grid-area: stock; }
.aimeos.catalog-detail .items-group .selection .row > .select-quantity { grid-area: qty; text-align: center; }

.aimeos.catalog-detail .items-group .selection .select-item {
  background: var(--n360-card);
  border: 1px solid var(--n360-border);
  border-radius: var(--n360-radius);
  padding: .75rem;
  margin-block-end: .75rem;
  transition: border-color var(--n360-ease), box-shadow var(--n360-ease);
}
.aimeos.catalog-detail .items-group .selection .select-item:hover { border-color: var(--n360-green-light); box-shadow: var(--n360-shadow); }
.aimeos.catalog-detail .items-group .select-media img.media-image {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: contain;
  mix-blend-mode: multiply;
  background: #f8faf9;
  border-radius: 8px;
}
.aimeos.catalog-detail .items-group .select-item .select-name h2 {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  text-transform: none;
  line-height: 1.3;
  margin: 0;
  color: var(--n360-text);
}
.aimeos.catalog-detail .items-group .attr-list { list-style: none; padding: 0; margin: 0; font-size: .78rem; color: var(--n360-text-muted); }
.aimeos.catalog-detail .items-group .attr-item .name::after { content: ': '; }
.aimeos.catalog-detail .items-group .select-stock .stockitem { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 700; }
.aimeos.catalog-detail .items-group .select-stock .stocklevel { width: .55rem; height: .55rem; }
.aimeos.catalog-detail .items-group .select-stock .stocktext { display: inline; }
.aimeos.catalog-detail .items-group .select-stock .stock-high,
.aimeos.catalog-detail .items-group .select-stock .stock-unlimited { color: var(--n360-green); }
.aimeos.catalog-detail .items-group .select-stock .stock-low { color: #92400E; }
.aimeos.catalog-detail .items-group .select-stock .stock-out { color: #B91C1C; }
.aimeos.catalog-detail .items-group .select-quantity input[type="number"] {
  width: 100%;
  max-width: 5.5rem;
  border: 1.5px solid var(--n360-border);
  border-radius: var(--n360-radius-sm);
  text-align: center;
  font-weight: 700;
  padding: .55rem 1.75rem;
  -moz-appearance: textfield;
}
.aimeos.catalog-detail .items-group .select-quantity input[type="number"]::-webkit-inner-spin-button,
.aimeos.catalog-detail .items-group .select-quantity input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.aimeos.catalog-detail .items-group .select-quantity input[type="number"]:focus {
  border-color: var(--n360-green);
  box-shadow: 0 0 0 3px rgba(28,94,57,.15);
}
/* Column header row: desktop only, and visually muted */
.aimeos.catalog-detail .items-group .selection > .row:first-child {
  margin-block-end: .5rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--n360-text-muted);
}
@media (max-width: 767.98px) {
  .aimeos.catalog-detail .items-group .selection > .row:first-child { display: none; }
}
@media (min-width: 768px) {
  .aimeos.catalog-detail .items-group .selection .row {
    grid-template-columns: 4.5rem minmax(0, 1.4fr) minmax(0, 1fr) 7rem 5.5rem;
    grid-template-areas: "media name attr stock qty";
  }
}

/* ============================================================
   8. TABS (Description / Characteristics / Downloads / Reviews)
   ============================================================ */
.aimeos.catalog-detail .catalog-detail-additional { margin-block-start: 2.5rem; }
.aimeos.catalog-detail .catalog-detail-additional .nav-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: .25rem;
  border-bottom: 2px solid var(--n360-border);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.aimeos.catalog-detail .catalog-detail-additional .nav-tabs::-webkit-scrollbar { display: none; }
.aimeos.catalog-detail .catalog-detail-additional .nav-tabs .nav-link {
  flex: 0 0 auto;
  scroll-snap-align: start;
  white-space: nowrap;
  font-family: var(--n360-font);
  font-size: .95rem;
  font-weight: 700;
  text-transform: none;
  color: var(--n360-text-muted);
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  margin-bottom: -2px;
  padding: .85rem 1.25rem;
  transition: color var(--n360-ease), border-color var(--n360-ease);
}
.aimeos.catalog-detail .catalog-detail-additional .nav-tabs .nav-link:not(.btn):hover {
  color: var(--n360-green);
  background: transparent;
  border-bottom-color: var(--n360-green-light);
}
.aimeos.catalog-detail .catalog-detail-additional .nav-tabs .nav-link.active:not(.btn) {
  color: var(--n360-green);
  background: transparent;
  border-bottom-color: var(--n360-green);
}
.aimeos.catalog-detail .catalog-detail-additional .nav-review .ratings {
  background: var(--n360-green-pale);
  color: var(--n360-green);
  border-radius: var(--n360-radius-pill);
  padding: .2rem .55rem;
}
.aimeos.catalog-detail .catalog-detail-additional .tab-content {
  background: var(--n360-card);
  border: 1px solid var(--n360-border);
  border-radius: var(--n360-radius);
  box-shadow: var(--n360-shadow);
  margin-block-start: 1rem;
  padding: 1.5rem;
  min-height: 4rem;
}
.aimeos.catalog-detail .catalog-detail-additional .block { padding-block: 0; }

/* Description */
.aimeos.catalog-detail .catalog-detail-additional .description { font-size: .97rem; line-height: 1.75; color: var(--n360-text); }
.aimeos.catalog-detail .catalog-detail-additional .description .item { margin: 0 0 1rem; }
.aimeos.catalog-detail .catalog-detail-additional .description :is(h2, h3, h4) { color: var(--n360-green); font-weight: 700; }

/* Characteristics table */
.aimeos.catalog-detail .catalog-detail-additional .block.attributes {
  border: 1px solid var(--n360-border);
  border-radius: var(--n360-radius);
  overflow: hidden;
}
.aimeos.catalog-detail .catalog-detail-additional table.attributes,
.aimeos.catalog-detail .catalog-detail-additional table.properties { margin: 0; width: 100%; }
.aimeos.catalog-detail .catalog-detail-additional .attributes td { padding: .7rem 1rem; width: auto; vertical-align: middle; }
.aimeos.catalog-detail .catalog-detail-additional .attributes td.name {
  width: 40%;
  font-size: .87rem;
  font-weight: 600;
  color: var(--n360-text-muted);
}
.aimeos.catalog-detail .catalog-detail-additional .attributes td.value { font-size: .9rem; color: var(--n360-text); }
.aimeos.catalog-detail .catalog-detail-additional .attributes tbody tr { border-bottom: 1px solid var(--n360-border); }
.aimeos.catalog-detail .catalog-detail-additional .attributes tbody tr:last-child { border-bottom: 0; }
.aimeos.catalog-detail .catalog-detail-additional .attributes tbody tr:nth-child(even) { background: var(--n360-bg); }

/* Downloads */
.aimeos.catalog-detail .catalog-detail-additional .downloads { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; padding: 0; margin: 0; }
.aimeos.catalog-detail .catalog-detail-additional .downloads .item { margin: 0; }
.aimeos.catalog-detail .catalog-detail-additional .downloads .item a {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 1rem;
  background: var(--n360-card);
  border: 1.5px solid var(--n360-border);
  border-radius: var(--n360-radius);
  color: var(--n360-text);
  font-weight: 600;
  transition: border-color var(--n360-ease), color var(--n360-ease);
}
.aimeos.catalog-detail .catalog-detail-additional .downloads .item a:hover { border-color: var(--n360-green); color: var(--n360-green); }
.aimeos.catalog-detail .catalog-detail-additional .downloads .media-image { height: 2.5rem; }

/* Reviews */
.aimeos.catalog-detail .catalog-detail-additional .rating-num { float: none; font-size: 2.25rem; font-weight: 800; color: var(--n360-green); line-height: 1.1; }
.aimeos.catalog-detail .catalog-detail-additional .rating-total { float: none; font-size: .9rem; color: var(--n360-text-muted); }
.aimeos.catalog-detail .catalog-detail-additional .rating-label label { color: #F59E0B; font-size: .85rem; white-space: nowrap; }
.aimeos.catalog-detail .catalog-detail-additional progress[value] {
  height: .5rem;
  border-radius: var(--n360-radius-pill);
  background-color: var(--n360-border);
  color: var(--n360-green);
  accent-color: var(--n360-green);
}
.aimeos.catalog-detail .catalog-detail-additional progress[value]::-webkit-progress-bar   { background-color: var(--n360-border); border-radius: var(--n360-radius-pill); }
.aimeos.catalog-detail .catalog-detail-additional progress[value]::-webkit-progress-value { background-color: var(--n360-green); border-radius: var(--n360-radius-pill); }
.aimeos.catalog-detail .catalog-detail-additional progress[value]::-moz-progress-bar      { background-color: var(--n360-green); border-radius: var(--n360-radius-pill); }
.aimeos.catalog-detail .catalog-detail-additional .review-list .sort a { color: var(--n360-text-muted); font-weight: 600; }
.aimeos.catalog-detail .catalog-detail-additional .review-list .sort a:hover,
.aimeos.catalog-detail .catalog-detail-additional .review-list .sort a.active { color: var(--n360-green); }
.aimeos.catalog-detail .catalog-detail-additional .review-item {
  background: var(--n360-card);
  border: 1px solid var(--n360-border);
  border-radius: var(--n360-radius);
  padding: 1rem 1.25rem;
  margin: 0 0 1rem;
}
.aimeos.catalog-detail .catalog-detail-additional .review-rating { color: #F59E0B; }
.aimeos.catalog-detail .catalog-detail-additional .review-response { background: var(--n360-green-pale); border-radius: 8px; }
.aimeos.catalog-detail .catalog-detail-additional .review-show a { color: var(--n360-green); font-weight: 700; }
/* "More reviews" = outline pill (same recipe as .n360-btn--detail) */
.aimeos.catalog-detail .catalog-detail-additional .review-list .btn.more {
  width: auto;
  max-width: none;
  padding: .5rem 1.4rem;
  background: transparent;
  color: var(--n360-green);
  border: 2px solid var(--n360-green);
  border-radius: var(--n360-radius-pill);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: normal;
  transition: background var(--n360-ease), color var(--n360-ease);
}
.aimeos.catalog-detail .catalog-detail-additional .review-list .btn.more:hover { background: var(--n360-green); color: #fff; }

/* ============================================================
   9. RELATED PRODUCTS — Suggested / Other customers bought / Bundle
   Cards use .n360-product-card + .n360-products__grid — identical to
   the Featured Products section on the home page.
   ============================================================ */

/* ── Section spacing & width ─────────────────────────────────── */
.aimeos.catalog-detail :is(.catalog-detail-suggest, .catalog-detail-bought),
.aimeos.catalog-detail .catalog-detail-bundle {
  padding-block: 4rem;
  max-width: 100%;
}

/* ── Heading — exact match to .n360-section-heading h2 ────────── */
.aimeos.catalog-detail :is(.catalog-detail-suggest, .catalog-detail-bought) > .header,
.aimeos.catalog-detail .catalog-detail-bundle > .header {
  font-family: var(--n360-font-heading, inherit);
  font-size: clamp(1.3rem, 2.8vw, 1.9rem);
  font-weight: 800;
  color: var(--n360-text);
  text-transform: none;
  letter-spacing: normal;
  margin: 0 0 2rem;
  padding: 0;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
/* Gradient rule — mirrors .n360-section-heading__line */
.aimeos.catalog-detail :is(.catalog-detail-suggest, .catalog-detail-bought) > .header::after,
.aimeos.catalog-detail .catalog-detail-bundle > .header::after {
  content: '';
  flex: 1;
  height: 2px;
  background: linear-gradient(to right, var(--n360-green-pale, #d1fae5), transparent);
  border-radius: 2px;
  min-width: 2rem;
}
@media (min-width: 576px) {
  .aimeos.catalog-detail :is(.catalog-detail-suggest, .catalog-detail-bought) > .header,
  .aimeos.catalog-detail .catalog-detail-bundle > .header {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

/* ── Bundle inner wrapper — strip Aimeos padding ────────────── */
.aimeos.catalog-detail .catalog-detail-bundle > .section {
  padding: 0;
  background: none;
  border: none;
}

/* ── Grid gap (columns handled by n360-products__grid in shop-home.css) ── */
.aimeos.catalog-detail :is(.catalog-detail-suggest, .catalog-detail-bought) .n360-products__grid,
.aimeos.catalog-detail .catalog-detail-bundle .n360-products__grid {
  gap: 1.25rem;
}

/* ══════════════════════════════════════════════════════════════
   CARD FIELD OVERRIDES inside .catalog-detail
   Guarantees brand name, product name, description & pricing
   all render — matching home page Featured Products exactly.
   ══════════════════════════════════════════════════════════════ */

/* Card shell */
.aimeos.catalog-detail :is(.catalog-detail-suggest,.catalog-detail-bought,.catalog-detail-bundle) .n360-product-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* Card body — flex column so every row stacks */
.aimeos.catalog-detail :is(.catalog-detail-suggest,.catalog-detail-bought,.catalog-detail-bundle) .n360-product-card__body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding: 1rem !important;
  gap: .45rem !important;
  text-align: center !important;
  align-items: center !important;
}

/* BRAND / SUPPLIER NAME */
.aimeos.catalog-detail :is(.catalog-detail-suggest,.catalog-detail-bought,.catalog-detail-bundle) .n360-product-card__supplier {
  display: block !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  color: var(--n360-green-mid) !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  margin: 0 !important;
  min-height: 1rem !important;
}

/* PRODUCT NAME */
.aimeos.catalog-detail :is(.catalog-detail-suggest,.catalog-detail-bought,.catalog-detail-bundle) .n360-product-card__name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: calc(1.3 * 0.92rem * 2) !important;
  font-size: .92rem !important;
  font-weight: 700 !important;
  color: var(--n360-text) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}
.aimeos.catalog-detail :is(.catalog-detail-suggest,.catalog-detail-bought,.catalog-detail-bundle) .n360-product-card__name-link {
  color: inherit !important;
  text-decoration: none !important;
}
.aimeos.catalog-detail :is(.catalog-detail-suggest,.catalog-detail-bought,.catalog-detail-bundle) .n360-product-card__name-link:hover {
  color: var(--n360-green) !important;
}

/* SHORT DESCRIPTION */
.aimeos.catalog-detail :is(.catalog-detail-suggest,.catalog-detail-bought,.catalog-detail-bundle) .n360-product-card__desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: .78rem !important;
  color: var(--n360-text-muted) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

/* STOCK & PRICING */
.aimeos.catalog-detail :is(.catalog-detail-suggest,.catalog-detail-bought,.catalog-detail-bundle) .n360-product-card .stock-list {
  display: block !important;
}
.aimeos.catalog-detail :is(.catalog-detail-suggest,.catalog-detail-bought,.catalog-detail-bundle) .n360-product-card .offer {
  display: block !important;
}
.aimeos.catalog-detail :is(.catalog-detail-suggest,.catalog-detail-bought,.catalog-detail-bundle) .n360-product-card .price-list {
  display: block !important;
  margin-block: .35rem 0 !important;
}
.aimeos.catalog-detail :is(.catalog-detail-suggest,.catalog-detail-bought,.catalog-detail-bundle) .n360-product-card .n360-price-simple .value,
.aimeos.catalog-detail :is(.catalog-detail-suggest,.catalog-detail-bought,.catalog-detail-bundle) .n360-product-card .price-actual .value {
  display: inline !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: var(--n360-green) !important;
}
.aimeos.catalog-detail :is(.catalog-detail-suggest,.catalog-detail-bought,.catalog-detail-bundle) .n360-product-card .n360-price-simple .value-deleted,
.aimeos.catalog-detail :is(.catalog-detail-suggest,.catalog-detail-bought,.catalog-detail-bundle) .n360-product-card .price-deleted .value {
  display: inline !important;
  text-decoration: line-through !important;
  color: var(--n360-text-muted) !important;
  font-size: .78rem !important;
  font-weight: 400 !important;
}

/* ACTIONS / BUTTONS */
.aimeos.catalog-detail :is(.catalog-detail-suggest,.catalog-detail-bought,.catalog-detail-bundle) .n360-product-card__actions {
  display: flex !important;
  width: 100% !important;
  margin-top: auto !important;
  padding-block-start: .5rem !important;
}
.aimeos.catalog-detail :is(.catalog-detail-suggest,.catalog-detail-bought,.catalog-detail-bundle) .n360-product-card form.basket {
  width: 100% !important;
  display: flex !important;
}
.aimeos.catalog-detail :is(.catalog-detail-suggest,.catalog-detail-bought,.catalog-detail-bundle) .n360-product-card .addbasket {
  display: flex !important;
  width: 100% !important;
}
.aimeos.catalog-detail :is(.catalog-detail-suggest,.catalog-detail-bought,.catalog-detail-bundle) .n360-product-card .btn.btn-action,
.aimeos.catalog-detail :is(.catalog-detail-suggest,.catalog-detail-bought,.catalog-detail-bundle) .n360-product-card .btn.btn-primary.btn-action {
  flex: 1 !important;
  width: 100% !important;
  background: var(--n360-green) !important;
  border-color: var(--n360-green) !important;
  border-radius: var(--n360-radius-pill) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: .8rem !important;
  padding: 0.6rem 0.5rem !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  white-space: nowrap !important;
}
.aimeos.catalog-detail :is(.catalog-detail-suggest,.catalog-detail-bought,.catalog-detail-bundle) .n360-product-card .n360-btn--detail {
  width: 100% !important;
  background: var(--n360-green) !important;
  color: #fff !important;
  border-color: var(--n360-green) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  border-radius: var(--n360-radius-pill) !important;
  font-weight: 700 !important;
  font-size: .8rem !important;
  padding: 0.6rem 0.5rem !important;
  text-decoration: none !important;
  gap: .35rem !important;
}

/* ============================================================
   10. SUPPLIER BLOCK
   ============================================================ */
.aimeos.catalog-detail .catalog-detail-supplier {
  background: var(--n360-card);
  border: 1px solid var(--n360-border);
  border-radius: calc(var(--n360-radius) + 4px);
  box-shadow: var(--n360-shadow);
  padding: 1.5rem clamp(1rem, 3vw, 2rem);
  text-align: start;
  overflow: hidden;  /* clearfix for the floated logo */
}
.aimeos.catalog-detail .catalog-detail-supplier .supplier-content { padding: 0; overflow: hidden; }
.aimeos.catalog-detail .catalog-detail-supplier .supplier-name {
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: none;
  color: var(--n360-green);
  margin: 0 0 .5rem;
}
.aimeos.catalog-detail .catalog-detail-supplier .supplier-address { font-weight: 500; font-size: .85rem; color: var(--n360-text-muted); }
.aimeos.catalog-detail .catalog-detail-supplier .supplier-short,
.aimeos.catalog-detail .catalog-detail-supplier .supplier-long { font-size: .95rem; line-height: 1.7; color: var(--n360-text-muted); }
.aimeos.catalog-detail .catalog-detail-supplier .media-item { margin: 0 0 1rem 1rem; }
.aimeos.catalog-detail .catalog-detail-supplier .media-item img { max-width: 120px; border-radius: 8px; }
[dir="rtl"] .aimeos.catalog-detail .catalog-detail-supplier .media-item { margin: 0 1rem 1rem 0; }
@media (max-width: 575.98px) {
  .aimeos.catalog-detail .catalog-detail-supplier .media-item { float: none; margin: 0 0 1rem; }
}

/* ============================================================
   11. MOBILE — sticky buy bar + tighter spacing
   The existing qty + "Add to basket" row is pinned to the bottom of the
   viewport (pure CSS: no template override, nothing to re-merge on upgrade).
   ============================================================ */
@media (max-width: 767.98px) {
  .aimeos.catalog-detail .catalog-detail-basket { padding: 1rem; }
  .aimeos.catalog-detail .catalog-detail-basket .addbasket {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 1030;
    margin: 0;
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
    background: var(--n360-card);
    border-top: 1px solid var(--n360-border);
    box-shadow: 0 -4px 16px rgba(0,0,0,.08);
  }
  /* Hide the sticky add-to-basket bar when the mini cart drawer is open */
  html.zeynep-opened .aimeos.catalog-detail .catalog-detail-basket .addbasket {
    display: none !important;
  }
  
  /* keep page/footer content reachable above the fixed bar */
  body:has(.aimeos.catalog-detail .addbasket) { padding-block-end: 5rem; }
  .aimeos.catalog-detail .catalog-detail-additional .tab-content { padding: 1rem; }
}

/* ============================================================
   12. DESKTOP BUY BOX STICKY
   ============================================================ */
@media (min-width: 992px) {
  .aimeos.catalog-detail article.product.row > .col-sm-6:last-of-type {
    position: sticky;
    top: 1.5rem;
    align-self: start;
  }
}

/* ============================================================
   13. BREADCRUMB / NAVIGATOR POLISH
   ============================================================ */
.aimeos.catalog-detail .catalog-detail-navigator {
  margin-block: .5rem;
  padding-block: .25rem;
}
.aimeos.catalog-detail .catalog-detail-navigator .nav-back { font-size: .85rem; }
.aimeos.catalog-detail .catalog-detail-navigator .nav-next svg,
.aimeos.catalog-detail .catalog-detail-navigator .nav-next::after {
  color: var(--n360-green);
}

/* ============================================================
   14. QUANTITY PLUS/MINUS (Injected via JS)
   ============================================================ */
.aimeos.catalog-detail .qty-wrapper { position: relative; display: inline-flex; align-items: center; width: 100%; max-width: 100%; }
.aimeos.catalog-detail .qty-wrapper .qty-btn {
  position: absolute;
  top: 0; bottom: 0;
  width: 2.25rem;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--n360-green);
  font-size: 1.15rem; font-weight: 600;
  cursor: pointer;
  transition: color var(--n360-ease), transform var(--n360-ease);
  z-index: 2;
}
.aimeos.catalog-detail .items-group .qty-wrapper .qty-btn { width: 1.75rem; font-size: 1rem; }
.aimeos.catalog-detail .qty-wrapper .qty-btn.qty-minus { inset-inline-start: 1px; }
.aimeos.catalog-detail .qty-wrapper .qty-btn.qty-plus { inset-inline-end: 1px; }
.aimeos.catalog-detail .qty-wrapper .qty-btn:hover { color: #1e5038; transform: scale(1.1); }
.aimeos.catalog-detail .qty-wrapper .qty-btn:active { transform: scale(0.95); }

/* ============================================================
   15. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .aimeos.catalog-detail * { transition: none !important; }
  .aimeos.catalog-detail :is(.catalog-detail-suggest, .catalog-detail-bought, .catalog-detail-bundle) .product:hover { transform: none; }
}