/* ==========================================================================
   webshop_theme — product_detail.css
   Overrides the ERPNext product detail page (/items/<slug>).
   Every selector targets an existing Frappe/Webshop class or id.
   Depends on design tokens in theme.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Page shell
      .product-container is the top-level card on the detail page.
      webshop SCSS sets background-color: var(--product-bg-color) !important,
      so we need our own !important to win.
   -------------------------------------------------------------------------- */
.product-container {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Second .product-container (specs / reviews section below the fold) */
.product-container + .d-flex .product-container,
.product-container.mt-4 {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-xl) !important;
  margin-top: var(--space-6) !important;
}

/* Overall page background */
body.product-page,
.item-content,
.product-page-content {
  background-color: var(--bg-base) !important;
}


/* --------------------------------------------------------------------------
   2. Breadcrumbs
      .item-breadcrumbs > .breadcrumb-container > a
   -------------------------------------------------------------------------- */
.item-breadcrumbs {
  margin-bottom: var(--space-4) !important;
}

.item-breadcrumbs .breadcrumb-container a,
.item-breadcrumbs a {
  color: var(--text-muted) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  transition: color var(--transition-base) !important;
}

.item-breadcrumbs .breadcrumb-container a:hover,
.item-breadcrumbs a:hover {
  color: var(--accent) !important;
}

/* Breadcrumb separators */
.item-breadcrumbs .breadcrumb-container,
.item-breadcrumbs .breadcrumb {
  background-color: transparent !important;
}

.item-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
  color: var(--text-muted) !important;
}


/* --------------------------------------------------------------------------
   3. Product image panel
      .product-image (the container div), .website-image (the <img>)
      .item-slideshow, .item-slideshow-image (thumbnail strip)
   -------------------------------------------------------------------------- */
.product-container .product-image {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-6) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-container .product-image img.website-image {
  object-fit: contain;
  border-radius: var(--radius-md);
  transition: transform var(--duration-slow) var(--ease-out);
}

.product-container .product-image:hover img.website-image {
  transform: scale(1.03);
}

/* Thumbnail strip */
.item-slideshow {
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}

.item-slideshow-image {
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-sm) !important;
  background-color: var(--bg-elevated);
  object-fit: contain;
  opacity: 0.7;
  transition: border-color var(--transition-base),
              opacity      var(--transition-base) !important;
}

.item-slideshow-image:hover,
.item-slideshow-image.active {
  border-color: var(--accent) !important;
  opacity: 1 !important;
}

/* No-image placeholder on detail page */
.no-image-item {
  background-color: var(--bg-elevated) !important;
  color: var(--text-muted) !important;
  border-radius: var(--radius-lg) !important;
}

/* Image zoom overlay (already has rgba bg, just ensure close btn is visible) */
.image-zoom-view button {
  color: var(--text-primary) !important;
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-full) !important;
  padding: var(--space-2) !important;
  transition: background-color var(--transition-base) !important;
}

.image-zoom-view button:hover {
  background-color: var(--accent-muted) !important;
  border-color: var(--accent) !important;
}

.image-zoom-view svg {
  color: var(--text-primary) !important;
}


/* --------------------------------------------------------------------------
   4. Product details panel
      .product-details (col-md-7 wrapper), then its children
   -------------------------------------------------------------------------- */
.product-details {
  max-width: 100% !important; /* webshop caps at 50%; expand for dark layout */
  padding-left: var(--space-6) !important;
}

/* Product title — the big serif headline */
.product-container .product-title,
.product-details .product-title {
  font-family: var(--font-heading) !important;
  font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
  font-weight: 600 !important;
  line-height: var(--leading-tight) !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.01em !important;
  padding: 0 !important;
  margin-bottom: var(--space-4) !important;
}

/* Item code / group meta line */
.product-code {
  color: var(--text-muted) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: var(--space-2) 0 var(--space-4) !important;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-4) !important;
}

.product-item-group {
  padding-right: var(--space-3) !important;
  border-right: 1px solid var(--border-default) !important;
  color: var(--accent) !important;
}

.product-item-code {
  padding-left: var(--space-3) !important;
  color: var(--text-muted) !important;
}


/* --------------------------------------------------------------------------
   5. Price block
      .item-cart > .product-price — the large price display
      .formatted-price — MRP / per-UOM secondary lines
      .in-green / .has-stock / .out-of-stock / .no-stock — availability
   -------------------------------------------------------------------------- */
.item-cart .product-price {
  font-family: var(--font-heading) !important;
  font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  letter-spacing: -0.01em !important;
  margin-bottom: var(--space-2) !important;
  line-height: 1.2 !important;
}

/* MRP strikethrough / per-UOM note */
.item-cart .product-price .formatted-price {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  color: var(--text-muted) !important;
}

/* Discount percent (e.g. "-15%") */
.item-cart .in-green,
.in-green {
  color: #6fcf97 !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
}

/* In-stock indicator */
.has-stock {
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #6fcf97 !important;
}

/* Out-of-stock / backorder */
.out-of-stock,
.no-stock {
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #e07f7f !important;
}


/* --------------------------------------------------------------------------
   6. CTA buttons
      .btn-add-to-cart  — primary "Add to Cart" button
      .btn-view-in-cart — secondary "View in Cart" (shown after adding)
      .btn-inquiry      — "Contact Us"
      .btn-configure    — "Select Variant"
      All sit inside .item-cart > .mt-6.mb-5 > .mb-4.d-flex
   -------------------------------------------------------------------------- */

/* Add to Cart — gold fill */
.btn-add-to-cart {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  background-color: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: var(--text-inverse) !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-4) var(--space-8) !important;
  width: auto !important;
  min-width: 200px;
  transition: background-color var(--transition-base),
              box-shadow      var(--transition-base),
              transform       var(--duration-fast) var(--ease-out) !important;
  box-shadow: none !important;
}

.btn-add-to-cart:hover:not(:disabled) {
  background-color: var(--accent-light) !important;
  border-color: var(--accent-light) !important;
  box-shadow: 0 6px 28px rgba(201, 168, 76, 0.4) !important;
  transform: translateY(-2px);
  color: var(--text-inverse) !important;
}

.btn-add-to-cart:active:not(:disabled) {
  background-color: var(--accent-dark) !important;
  transform: translateY(0) !important;
  box-shadow: none !important;
}

.btn-add-to-cart:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed;
}

/* View in Cart — ghost gold */
.btn-view-in-cart {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  background-color: transparent !important;
  border: 1px solid var(--border-accent) !important;
  color: var(--accent) !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-4) var(--space-8) !important;
  min-width: 180px;
  transition: background-color var(--transition-base),
              border-color     var(--transition-base),
              color            var(--transition-base),
              box-shadow       var(--transition-base) !important;
}

.btn-view-in-cart:hover {
  background-color: var(--accent-muted) !important;
  border-color: var(--accent) !important;
  color: var(--accent-light) !important;
  box-shadow: 0 4px 20px rgba(201, 168, 76, 0.2) !important;
}

/* Contact Us button */
.btn-inquiry {
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-4) var(--space-6) !important;
  transition: border-color var(--transition-base),
              color         var(--transition-base),
              background-color var(--transition-base) !important;
}

.btn-inquiry:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background-color: var(--accent-muted) !important;
}

/* Select Variant button */
.btn-configure {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background-color: var(--accent-muted) !important;
  border: 1px solid var(--border-accent) !important;
  color: var(--accent) !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-4) var(--space-8) !important;
  transition: background-color var(--transition-base),
              border-color     var(--transition-base) !important;
}

.btn-configure:hover {
  background-color: rgba(201, 168, 76, 0.2) !important;
  border-color: var(--accent) !important;
  color: var(--accent-light) !important;
}

/* Wishlist heart (floating, always-visible on detail page) */
.like-action-item-fp {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: none !important;
  border-radius: var(--radius-full) !important;
  transition: background-color var(--transition-base),
              border-color     var(--transition-base) !important;
}

.like-action-item-fp:hover {
  background-color: var(--accent-muted) !important;
  border-color: var(--accent) !important;
}

.like-action-item-fp.like-action-wished {
  background-color: rgba(244, 122, 122, 0.12) !important;
  border-color: rgba(244, 122, 122, 0.4) !important;
}

/* w-30-40 width helper (used on both .btn-add-to-cart and .btn-inquiry) */
.item-cart .w-30-40 {
  width: auto !important;
  min-width: 180px;
}

@media (max-width: 992px) {
  .item-cart .w-30-40 {
    width: auto !important;
    min-width: 140px;
  }

  /* Stack image + details vertically */
  .product-container > .row > [class*="col-md"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .recommended-item-section {
    margin-top: var(--space-8) !important;
  }
}


/* --------------------------------------------------------------------------
   7. Offers section
      .offers-heading, .offer-container, .offer-details
   -------------------------------------------------------------------------- */
.item-cart .offers-heading {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-secondary) !important;
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-4) !important;
  margin-top: var(--space-4) !important;
}

.item-cart .offers-heading .tag-icon {
  --icon-stroke: var(--accent) !important;
  color: var(--accent);
}

.offer-container {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: var(--text-secondary) !important;
  line-height: var(--leading-normal) !important;
}

.offer-container p {
  color: var(--text-secondary) !important;
}

a.offer-details {
  color: var(--accent) !important;
  font-weight: 500 !important;
  transition: color var(--transition-base) !important;
}

a.offer-details:hover {
  color: var(--accent-light) !important;
}


/* --------------------------------------------------------------------------
   8. Product description
      .product-description — rendered HTML from web_long_description / description
      We style the container and all common inline elements it may contain.
   -------------------------------------------------------------------------- */
.product-container .product-description,
.product-details .product-description {
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  color: var(--text-secondary) !important;
  line-height: var(--leading-normal) !important;
  margin-top: var(--space-6) !important;
  padding-top: var(--space-6) !important;
  border-top: 1px solid var(--border-subtle) !important;
}

/* Headings inside rich-text description */
.product-description h1,
.product-description h2,
.product-description h3,
.product-description h4,
.product-description h5,
.product-description h6 {
  font-family: var(--font-heading) !important;
  color: var(--text-primary) !important;
  margin-top: var(--space-6) !important;
  margin-bottom: var(--space-3) !important;
}

/* Paragraphs */
.product-description p {
  color: var(--text-secondary) !important;
  margin-bottom: var(--space-4) !important;
  line-height: var(--leading-normal) !important;
}

/* Inline links */
.product-description a {
  color: var(--accent) !important;
  text-decoration: underline;
  text-decoration-color: var(--accent-muted);
  transition: color var(--transition-base) !important;
}

.product-description a:hover {
  color: var(--accent-light) !important;
}

/* Lists */
.product-description ul,
.product-description ol {
  color: var(--text-secondary) !important;
  padding-left: var(--space-6) !important;
  margin-bottom: var(--space-4) !important;
}

.product-description li {
  margin-bottom: var(--space-2) !important;
  line-height: var(--leading-normal) !important;
}

.product-description ul li::marker {
  color: var(--accent) !important;
}

/* Strong / bold */
.product-description strong,
.product-description b {
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

/* Blockquote */
.product-description blockquote {
  border-left: 3px solid var(--accent) !important;
  background-color: var(--accent-muted) !important;
  padding: var(--space-4) var(--space-5) !important;
  margin: var(--space-6) 0 !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  color: var(--text-primary) !important;
  font-style: italic !important;
}

/* Tables inside description */
.product-description table {
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
}

.product-description table th {
  font-size: var(--text-xs) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  border-color: var(--border-subtle) !important;
}

.product-description table td {
  border-color: var(--border-subtle) !important;
}


/* --------------------------------------------------------------------------
   9. Specifications table
      .item-website-specification > .product-title + table > .spec-label / .spec-content
   -------------------------------------------------------------------------- */
.item-website-specification {
  background-color: var(--bg-surface) !important;
  padding: var(--space-6) !important;
}

.item-website-specification .product-title {
  font-family: var(--font-heading) !important;
  font-size: var(--text-2xl) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin-bottom: var(--space-6) !important;
}

.item-website-specification .table {
  width: 100% !important;
  color: var(--text-primary) !important;
}

.item-website-specification td {
  border: none !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: var(--space-3) var(--space-4) !important;
  font-size: var(--text-sm) !important;
}

.item-website-specification .spec-label {
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  width: 40%;
}

.item-website-specification .spec-content {
  color: var(--text-primary) !important;
  font-size: var(--text-sm) !important;
}

/* "Product Details" heading used when rendered without tabs */
.item-website-specification > .col-md-11 > .product-title {
  padding-top: var(--space-6) !important;
  border-top: 1px solid var(--border-subtle);
}


/* --------------------------------------------------------------------------
   10. Ratings & Reviews section
       .ratings-reviews-section, .reviews-header, .btn-write-review
       .rating-summary-section, .rating-summary-numbers, .rating-progress-bar
       .user-reviews > .review, .review-signature
   -------------------------------------------------------------------------- */
.ratings-reviews-section {
  border-top: 1px solid var(--border-subtle) !important;
  padding: var(--space-6) var(--space-5) !important;
  background-color: var(--bg-surface) !important;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
}

.reviews-header {
  font-family: var(--font-heading) !important;
  font-size: var(--text-2xl) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  padding: 0 !important;
}

.btn-write-review {
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-2) var(--space-5) !important;
  box-shadow: none !important;
  transition: border-color var(--transition-base),
              color         var(--transition-base),
              background-color var(--transition-base) !important;
}

.btn-write-review:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background-color: var(--accent-muted) !important;
}

/* Rating summary numbers column */
.rating-summary-section {
  padding: var(--space-4) 0 !important;
}

.rating-summary-numbers {
  border-right: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

.rating-summary-numbers h2 {
  font-family: var(--font-heading) !important;
  color: var(--text-primary) !important;
}

.rating-summary-title {
  color: var(--text-secondary) !important;
}

/* Progress bars */
.rating-progress-bar {
  background-color: var(--bg-elevated) !important;
  border-radius: var(--radius-full) !important;
}

.progress-bar-cosmetic {
  background-color: var(--accent) !important;
  border-radius: var(--radius-full) !important;
}

.rating-bar-title {
  color: var(--text-muted) !important;
  font-size: var(--text-xs) !important;
}

/* Star icons */
.rating .icon {
  --star-fill: var(--bg-elevated) !important;
}

.rating .icon.star-click {
  --star-fill: var(--accent) !important;
}

/* Individual reviews */
.user-reviews .review {
  padding: var(--space-5) 0 !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

.user-reviews .review:last-child {
  border-bottom: none !important;
}

.user-review-title {
  color: var(--text-primary) !important;
  font-family: var(--font-heading) !important;
  font-size: var(--text-base) !important;
}

.user-reviews .product-description p {
  color: var(--text-secondary) !important;
}

.review-signature .reviewer {
  color: var(--text-muted) !important;
  font-size: var(--text-xs) !important;
}

/* "View all reviews" link */
.ratings-reviews-section .mt-6 > a {
  color: var(--accent) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  transition: color var(--transition-base) !important;
}

.ratings-reviews-section .mt-6 > a:hover {
  color: var(--accent-light) !important;
}

/* No reviews state */
.ratings-reviews-section h6.text-muted {
  color: var(--text-muted) !important;
  font-family: var(--font-body) !important;
}


/* --------------------------------------------------------------------------
   11. Recommended items sidebar
       .recommended-item-section, .recommendation-header,
       .recommendation-container, .recommended-item, .r-item-info
   -------------------------------------------------------------------------- */
.recommended-item-section {
  padding-right: 0 !important;
}

.recommendation-header {
  font-family: var(--font-heading) !important;
  font-size: var(--text-lg) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.01em !important;
  display: block;
  margin-bottom: var(--space-4);
}

.recommendation-container {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-4) !important;
}

.recommended-item {
  padding: var(--space-3) 0 !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  transition: background-color var(--duration-fast) var(--ease-default);
}

.recommended-item:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.recommended-item:hover {
  background-color: var(--bg-elevated) !important;
  border-radius: var(--radius-md);
}

/* Thumbnail */
.no-image-r-item {
  background-color: var(--bg-elevated) !important;
  color: var(--text-muted) !important;
  border-radius: var(--radius-md) !important;
}

/* Text block */
.r-item-info a {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  color: var(--text-primary) !important;
  line-height: var(--leading-snug) !important;
  transition: color var(--transition-base) !important;
}

.r-item-info a:hover {
  color: var(--accent) !important;
}

.r-item-info .item-price {
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  font-weight: 600 !important;
  color: var(--accent) !important;
}

.r-item-info .striked-item-price {
  color: var(--text-muted) !important;
  font-size: var(--text-xs) !important;
}

.r-item-info .in-green {
  font-size: var(--text-xs) !important;
}


/* --------------------------------------------------------------------------
   12. Category tabs (when item uses tab layout)
       .category-tabs, and Bootstrap tab overrides
   -------------------------------------------------------------------------- */
.category-tabs .nav-tabs {
  border-bottom: 1px solid var(--border-subtle) !important;
  margin-bottom: var(--space-6) !important;
}

.category-tabs .nav-tabs .nav-link {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: var(--space-3) var(--space-5) !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  transition: color var(--transition-base),
              border-color var(--transition-base) !important;
}

.category-tabs .nav-tabs .nav-link:hover {
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-default) !important;
}

.category-tabs .nav-tabs .nav-link.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
  background-color: transparent !important;
}

.category-tabs .tab-content {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: var(--text-secondary) !important;
  line-height: var(--leading-normal) !important;
}


/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .product-details {
    padding-left: var(--space-3) !important;
    padding-top: var(--space-5) !important;
  }

  .product-container .product-title,
  .product-details .product-title {
    font-size: var(--text-2xl) !important;
  }

  .item-cart .product-price {
    font-size: var(--text-2xl) !important;
  }

  .btn-add-to-cart,
  .btn-view-in-cart,
  .btn-inquiry {
    width: 100% !important;
    min-width: unset !important;
    margin-bottom: var(--space-3) !important;
  }

  .item-cart .mb-4.d-flex {
    flex-direction: column !important;
  }

  .item-website-specification .table {
    width: 100% !important;
  }

  .item-website-specification .spec-label {
    width: 50% !important;
  }

  .rating-summary-numbers {
    border-right: none !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    padding-bottom: var(--space-4) !important;
    margin-bottom: var(--space-4) !important;
  }
}

@media (max-width: 480px) {
  .product-container .product-title,
  .product-details .product-title {
    font-size: var(--text-xl) !important;
  }

  .item-cart .product-price {
    font-size: var(--text-xl) !important;
  }

  .item-website-specification {
    padding: var(--space-4) !important;
  }
}