/**
 * ANBOOST Storefront — Composition Pass
 * Art direction for hierarchy, grouping, eye-flow, and premium density.
 * Same DOM / layout scaffolding. Merchant brand & Builder content preserved.
 */

/* Type + group tokens owned by storefront-design-tokens.css (Phase 1).
   Composition consumes them; do not redeclare competing scales here. */

/* ==================================================================
   PRODUCT DETAIL — buy-column composition
   Eye flow: Title → Meta → Price → Options → Qty → CTA → Trust
   ================================================================== */
.single-shop-details-wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.single-shop-details-wrapper .name_badge {
  margin: 0 0 var(--sf-group-tight);
  align-items: flex-start;
  gap: var(--sf-group-in);
}

.single-shop-details-wrapper .details-title {
  font-size: var(--sf-type-display) !important;
  font-weight: 650 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
  color: var(--sf-heading) !important;
  margin: 0 !important;
  flex: 1;
}

/* Summary — supporting voice, not a second headline */
.single-shop-details-wrapper > span:not([class]),
.single-shop-details-wrapper .name_badge + span {
  display: block;
  font-size: var(--sf-type-body);
  line-height: 1.55;
  color: var(--sf-muted, #667085);
  max-width: 36em;
  margin: 0 0 var(--sf-group-in);
}

/* Meta cluster: rating + stock share proximity */
.single-shop-details-wrapper .rating-wrap,
.single-shop-details-wrapper .gl-star-rating,
.single-shop-details-wrapper .ratings {
  margin: 0 0 var(--sf-group-tight) !important;
}

.single-shop-details-wrapper .status-details {
  margin: 0 0 var(--sf-group-gap) !important;
  padding: 0 !important;
  gap: 0.65rem !important;
  align-items: baseline !important;
}

.single-shop-details-wrapper .status-details-title {
  font-size: var(--sf-type-meta) !important;
  font-weight: 550 !important;
  letter-spacing: 0.02em;
  margin-right: 0 !important;
}

.single-shop-details-wrapper .status-details .me-5 {
  margin-right: 0.5rem !important;
}

.single-shop-details-wrapper .color-stock {
  font-size: var(--sf-type-meta) !important;
}

/* ——— PRICE: the compositional peak ——— */
.single-shop-details-wrapper .price-update-through {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem 0.85rem;
  margin: 0 0 var(--sf-group-section) !important;
  padding: var(--sf-group-in) 0 !important;
  border-block: 1px solid var(--sf-hairline, rgba(15, 23, 42, 0.07));
}

.single-shop-details-wrapper .price-update-through .flash-prices,
.single-shop-details-wrapper .flash-prices {
  font-size: var(--sf-type-price) !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
  margin: 0 !important;
  color: var(--sf-heading) !important;
}

.single-shop-details-wrapper .flash-old-prices,
.single-shop-details-wrapper .fs-22.flash-old-prices {
  font-size: var(--sf-type-body) !important;
  font-weight: 450 !important;
  letter-spacing: 0 !important;
  color: var(--sf-muted, #667085) !important;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: 0.8;
  line-height: 1;
}

/* ——— OPTIONS: label above chips = readable groups ——— */
.single-shop-details-wrapper > .value-input-area,
.single-shop-details-wrapper .value-input-area.mt-4 {
  display: flex;
  flex-direction: column;
  gap: var(--sf-group-gap);
  margin: 0 0 var(--sf-group-gap) !important;
  padding: 0 !important;
}

.single-shop-details-wrapper .single-input-list,
.single-shop-details-wrapper .value-input-area.single-input-list {
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: var(--sf-group-tight) !important;
  padding-top: 0 !important;
  margin: 0 !important;
  width: 100%;
}

.single-shop-details-wrapper .input-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.55rem;
  width: 100%;
  margin: 0;
  font-size: var(--sf-type-meta);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.single-shop-details-wrapper .input-title strong,
.single-shop-details-wrapper .input-title .color-light {
  font-weight: 650 !important;
  color: var(--sf-heading) !important;
  font-size: var(--sf-type-meta) !important;
}

/* Selected value readout — quiet companion, not a form field */
.single-shop-details-wrapper .form--input.value-size,
.single-shop-details-wrapper input.value-size {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  width: auto !important;
  max-width: 12rem;
  font-size: var(--sf-type-meta) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--sf-body) !important;
  pointer-events: none;
}

.single-shop-details-wrapper .size-lists {
  width: 100%;
  margin: 0 !important;
  gap: 0.5rem !important;
}

.single-shop-details-wrapper .size-lists li {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.95rem !important;
  font-size: 0.875rem;
  font-weight: 550;
  letter-spacing: 0.02em;
}

/* ——— QTY + CTA cluster ——— */
.single-shop-details-wrapper > .quantity-area,
.single-shop-details-wrapper .quantity-area.pt-2 {
  margin: 0 0 var(--sf-group-gap) !important;
  padding-top: 0 !important;
}

.single-shop-details-wrapper .quantity-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: var(--sf-group-in);
}

.single-shop-details-wrapper .quantity-title {
  font-size: var(--sf-type-meta) !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 650 !important;
  color: var(--sf-heading) !important;
}

.single-shop-details-wrapper .stock-available {
  font-size: var(--sf-type-meta) !important;
  font-weight: 550 !important;
  margin-inline-start: auto;
}

/* CTA dominance: Add to Cart leads, Buy Now supports */
.single-shop-details-wrapper .quantity-btn,
.single-shop-details-wrapper .quantity-btn.pt-4 {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr;
  gap: 0.75rem;
  padding-top: var(--sf-group-in) !important;
  margin-top: var(--sf-group-tight);
  width: 100%;
}

.single-shop-details-wrapper .quantity-btn .btn-wrapper {
  margin: 0 !important;
  width: 100%;
}

.single-shop-details-wrapper .quantity-btn .cmn-btn {
  width: 100% !important;
  min-height: 3.25rem !important;
  justify-content: center;
}

.single-shop-details-wrapper .add_to_cart_single_page,
.single-shop-details-wrapper .quick_view_add_to_cart {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

.single-shop-details-wrapper .but_now_single_page,
.single-shop-details-wrapper .quick_view_but_now {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  background: transparent !important;
  color: var(--sf-heading) !important;
  border: 1.5px solid var(--sf-heading) !important;
  box-shadow: none !important;
}

.single-shop-details-wrapper .but_now_single_page:hover,
.single-shop-details-wrapper .quick_view_but_now:hover {
  background: var(--sf-heading) !important;
  color: #fff !important;
}

/* Secondary actions — after purchase decision */
.single-shop-details-wrapper .wishlist-compare {
  margin-top: var(--sf-group-gap) !important;
  opacity: 0.9;
}

.single-shop-details-wrapper .shop-details-stock {
  margin-top: var(--sf-group-section) !important;
  padding-top: var(--sf-group-gap) !important;
}

.single-shop-details-wrapper .stock-category {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--sf-type-meta);
  color: var(--sf-muted, #667085);
}

.single-shop-details-wrapper .stock-category .list-item,
.single-shop-details-wrapper .stock-category a {
  color: var(--sf-heading);
  font-weight: 550;
}

.single-shop-details-wrapper .delivery-options {
  display: grid;
  gap: 0.85rem;
  margin-top: var(--sf-group-gap) !important;
}

.single-shop-details-wrapper .delivery-item {
  gap: 0.85rem;
  align-items: flex-start;
}

.single-shop-details-wrapper .delivery-item .title {
  font-size: 0.9rem !important;
  font-weight: 650 !important;
  margin: 0 0 0.15rem !important;
  letter-spacing: -0.01em;
}

.single-shop-details-wrapper .delivery-item p {
  margin: 0;
  font-size: var(--sf-type-meta);
  color: var(--sf-muted, #667085);
  line-height: 1.45;
}

.single-shop-details-wrapper .details-checkout-shop {
  margin-top: var(--sf-group-gap) !important;
  padding-top: var(--sf-group-gap) !important;
}

.single-shop-details-wrapper .guaranteed-checkout {
  font-size: var(--sf-type-meta) !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 650 !important;
}

.single-shop-details-wrapper .payment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.75rem !important;
  padding: 0;
  list-style: none;
}

.single-shop-details-wrapper .payment-list img {
  height: 1.5rem;
  width: auto;
  object-fit: contain;
  opacity: 0.85;
  filter: grayscale(0.15);
}

@media (max-width: 575.98px) {
  .single-shop-details-wrapper .quantity-btn,
  .single-shop-details-wrapper .quantity-btn.pt-4 {
    grid-template-columns: 1fr;
  }
}

/* Phase 0: PRODUCT CARDS / flex-card composition removed (theme + plp-shelf own cards). */

/* ==================================================================
   SHOP — filter / toolbar composition (.shop-area only)
   ================================================================== */
.shop-area .shop-sidebar .single-sidebar-item .title,
.shop-area .shop-sidebar-content .widget .widget-title,
.shop-area .single-sidebar-item > .title {
  margin-bottom: 0.85rem !important;
}

.shop-area .shop-sidebar .size-lists,
.shop-area .shop-sidebar .filter-lists,
.shop-area .shop-sidebar .category-lists {
  gap: 0.4rem;
}

.shop-area .shop-top-bar,
.shop-area .shop-filters-top,
.shop-area .product-showing-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
}

/* ==================================================================
   CART / CHECKOUT / WISHLIST — tabular composition & sum hierarchy
   ================================================================== */
.cart-area .price-td,
.cart-area .total-td,
.wishlist-area .price-td {
  font-weight: 650;
  letter-spacing: -0.015em;
  white-space: nowrap;
  text-align: end;
}

.checkout-area .checkout-order-summery .summery-title {
  margin-bottom: 1rem !important;
}

.checkout-area .single-checkout-cart-items + .single-checkout-cart-items {
  margin-top: 0.85rem;
}

.checkout-area .check-cart-flex-contents {
  gap: 0.85rem;
  align-items: flex-start !important;
}

.checkout-area .checkout-cart-price {
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.checkout-area .checkout-cart-title {
  line-height: 1.3;
  margin-bottom: 0.25rem;
}

.cart-area .name-subtitle,
.wishlist-area .name-subtitle,
.checkout-area .name-subtitle {
  font-size: var(--sf-type-meta) !important;
  color: var(--sf-muted, #667085) !important;
  line-height: 1.4;
}

/* Totals stack: quiet lines, loud grand total */
.cart-area .cart-total-list li,
.checkout-area .checkout-summery-list li,
.checkout-area .order-summery-list li,
.checkout-area .summery-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.45rem 0;
  font-size: var(--sf-type-body);
}

.cart-area .cart-total-list li:last-child,
.checkout-area .checkout-summery-list li:last-child,
.checkout-area .summery-list .total,
.checkout-area .total-amount,
.cart-area .total-amount {
  margin-top: 0.5rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--sf-hairline, rgba(15, 23, 42, 0.07));
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.cart-area .proceed_checkout_btn,
.checkout-area .proceed_checkout_btn {
  margin-top: 1.25rem !important;
  min-height: 3.35rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}

/* Phase 3: global .section-title composition removed — theme owns homepage section headers. */

/* ==================================================================
   QUICK VIEW — inherit PDP composition density
   ================================================================== */
#product_quick_view .single-shop-details-wrapper .details-title {
  font-size: clamp(1.25rem, 2vw, 1.5rem) !important;
}

#product_quick_view .single-shop-details-wrapper .flash-prices {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem) !important;
}

#product_quick_view .single-shop-details-wrapper .quantity-btn {
  grid-template-columns: 1fr;
}

/* ==================================================================
   EMPTY / SUCCESS — centered calm composition
   ================================================================== */
.cart-empty-area .single-page-contents,
.wishlist-empty-area .single-page-contents {
  max-width: 28rem;
  margin-inline: auto;
}

.order-success-area {
  max-width: 40rem;
  margin-inline: auto;
}