.col-xl-4{position:relative;width:100%;padding-right:15px;padding-left:15px}.col-xl-9{position:relative;width:100%;padding-right:15px;padding-left:15px}@media (min-width:1200px){.col-xl-4{-webkit-box-flex:0;flex:0 0 22.2222222222%;max-width:22.2222222222%}.col-xl-9{-webkit-box-flex:0;flex:0 0 50%;max-width:50%}}.nav{display:-webkit-box;display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.flex-column-reverse{-webkit-box-direction:reverse!important}.flex-column-reverse{-webkit-box-orient:vertical!important;flex-direction:column-reverse!important}@media (min-width:992px){.flex-lg-row{-webkit-box-orient:horizontal!important;flex-direction:row!important}.flex-lg-row{-webkit-box-direction:normal!important}}.product-details-top{display:-webkit-box;display:flex;margin-bottom:20px}.product-details-top .right-sidebar{width:285px;min-width:285px;padding-left:15px}.product-details-top .right-sidebar .feature-list{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;margin-top:0}.product-details-top .right-sidebar .feature-list .single-feature{margin-bottom:20px;-webkit-box-pack:start;justify-content:flex-start}.product-details-top .right-sidebar .feature-list .single-feature:last-child{margin-bottom:0}.product-details-top-inner{display:-webkit-box;display:flex;width:100%}@media screen and (max-width:1350px){.product-details-top .right-sidebar{display:none}}@media screen and (max-width:991px){.product-details-top-inner{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}}.product-image-gallery{display:-webkit-box;display:flex;align-self:flex-start;-webkit-box-align:start;align-items:flex-start;width:600px}.additional-image-wrap{width:80px;min-width:80px;margin-top:8px}.additional-image-wrap .additional-image{display:-webkit-box;display:flex;height:80px;margin:8px 0;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;border:1px solid #ebebeb;border-radius:2px;cursor:pointer;overflow:hidden;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out}.additional-image-wrap .additional-image>img{max-height:100%;max-width:100%}.additional-image-wrap .additional-image .image-placeholder{height:35px;width:35px}.base-image-wrap{position:relative;width:100%;min-width:0;margin-left:16px;-webkit-box-flex:1;flex-grow:1;border:1px solid #ebebeb;border-radius:2px}.base-image-wrap .base-image .base-image-inner:not(:first-child){display:none}.base-image-wrap .base-image-slide{position:relative;display:-webkit-box;display:flex;height:100%;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;padding-bottom:100%;background:#fff;cursor:crosshair}.base-image-wrap .base-image-slide:hover>img:not(.zoomImg){opacity:0!important}.base-image-wrap .base-image-slide>img:not(.zoomImg){position:absolute;left:50%;top:50%;max-height:100%;max-width:100%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.base-image-wrap .base-image-slide .image-placeholder{width:130px}.base-image-wrap .btn-gallery-trigger{position:absolute;bottom:10px;right:10px;height:40px;width:40px;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;z-index:1;cursor:pointer;-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.base-image-wrap .btn-gallery-trigger>i{font-size:20px;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out}.base-image-wrap .btn-gallery-trigger:hover>i{color:#0068e1;color:var(--color-primary)}@media screen and (max-width:1600px){.product-image-gallery{width:500px}.additional-image-wrap{width:70px;min-width:70px}.additional-image-wrap .additional-image{height:70px}}@media screen and (max-width:991px){.base-image-wrap .base-image-slide{cursor:-webkit-zoom-in;cursor:zoom-in}.base-image-wrap .base-image-slide:hover>img:not(.zoomImg){opacity:1!important}.base-image-wrap .btn-gallery-trigger{display:none}}@media screen and (max-width:576px){.product-image-gallery{width:100%;-webkit-box-orient:vertical;-webkit-box-direction:reverse;flex-direction:column-reverse}.additional-image-wrap{display:-webkit-box;display:flex;width:calc(100% - 32px);min-width:0;margin:16px auto 0}.additional-image-wrap .additional-image{width:70px;min-width:70px;margin:0 8px}.base-image-wrap{margin-left:0}.base-image-wrap .base-image-slide{padding-bottom:90%}}.product-details-info{width:calc(100% - 600px);padding:0 15px 0 30px}.product-details-info .details-info-top{padding-bottom:17px}.product-details-info .product-name{font-size:24px;line-height:30px;margin-bottom:15px}.product-details-info .product-rating{font-size:16px;margin-bottom:9px}.product-details-info .product-rating .rating-count{font-size:14px;margin-top:3px}.product-details-info .product-rating+.brief-description{margin-top:10px}.product-details-info .product-rating+.details-info-top-actions{margin-top:8px}.product-details-info .availability{margin-bottom:14px}.product-details-info .availability.in-stock{color:#1eb48e}.product-details-info .availability.out-of-stock{color:#e23e1d}.product-details-info .availability+.details-info-top-actions{margin-top:-2px}.product-details-info .brief-description{margin-bottom:12px;color:#6e6e6e}.product-details-info .details-info-top-actions .btn{padding:0;color:#6e6e6e}.product-details-info .details-info-top-actions .btn:hover{color:#0068e1;color:var(--color-primary)}.product-details-info .details-info-top-actions .btn:hover>i{color:#6e6e6e}.product-details-info .details-info-top-actions .btn>i{margin-right:4px}.product-details-info .details-info-top-actions .btn-wishlist{margin-right:25px}.product-details-info .details-info-top-actions .btn-compare{font-weight:500}.product-details-info .details-info-top-actions .btn-wishlist{font-weight:500}.product-details-info .details-info-top-actions .btn-compare.added:hover>i{color:#0068e1;color:var(--color-primary)}.product-details-info .details-info-top-actions .btn-wishlist.added:hover>i{color:#0068e1;color:var(--color-primary)}.product-details-info .details-info-middle{padding:22px 0 25px;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5}.product-details-info .product-price{font-size:24px;padding-bottom:18px}.product-details-info .product-variants{padding-bottom:10px}.product-details-info .product-variants .variant-check{margin:-1px 0 7px}.product-details-info .product-variants .variant-check .error-message{margin:-7px 0 8px}.product-details-info .product-variants .variant-radio{margin:-2px 0 8px}.product-details-info .product-variants .variant-radio .error-message{margin:-6px 0 7px}.product-details-info .product-variants .variant-input{margin-bottom:20px}.product-details-info .product-variants .variant-select{margin-bottom:20px}.product-details-info .product-variants .variant-input label{padding-top:12px}.product-details-info .product-variants .variant-select label{padding-top:12px}.product-details-info .product-variants .variant-input .error-message{margin:6px 0 -5px}.product-details-info .product-variants .variant-select .error-message{margin:6px 0 -5px}.product-details-info .product-variants .variant-custom-selection{margin-bottom:10px}.product-details-info .product-variants .variant-custom-selection label{padding-top:6px}.product-details-info .product-variants .variant-custom-selection .error-message{margin:-4px 0 5px}.product-details-info .product-variants .custom-selection{display:-webkit-inline-box;display:inline-flex;flex-wrap:wrap}.product-details-info .product-variants .custom-selection>li{font-size:13px;height:32px;min-width:42px;display:-webkit-box;display:flex;margin:0 10px 10px 0;padding:6px 10px;color:#6e6e6e;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;border:1px solid #ebebeb;border-radius:2px;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out;cursor:pointer}.product-details-info .product-variants .custom-selection>li:last-child{margin-right:0}.product-details-info .product-variants .custom-selection>li:hover{border-color:#0068e1;border-color:var(--color-primary)}.product-details-info .product-variants .custom-selection>li.active{cursor:default;color:#0068e1;color:var(--color-primary);border-color:#0068e1;border-color:var(--color-primary)}.product-details-info .product-variants .custom-selection>li.disabled{opacity:.65;cursor:default}.product-details-info .product-variants .custom-selection>li.disabled:hover{border-color:#ebebeb}.product-details-info .details-info-middle-actions{display:-webkit-box;display:flex}.product-details-info .number-picker{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center}.product-details-info .number-picker label{font-weight:500;margin-bottom:0}.product-details-info .number-picker .input-group-quantity{position:relative;margin-left:20px}.product-details-info .number-picker .input-group-quantity .input-quantity{width:100px;padding:10px 39px 10px 10px;text-align:center}.product-details-info .number-picker .input-group-quantity .input-quantity:focus{outline:0;border-color:#ebebeb}.product-details-info .number-picker .input-group-quantity .btn-wrapper{position:absolute;top:0;right:0}.product-details-info .number-picker .input-group-quantity .btn-wrapper .btn-number{position:absolute;right:0;width:30px;padding:0;line-height:18px;background:none;border:1px solid #ebebeb;border-radius:0}.product-details-info .number-picker .input-group-quantity .btn-wrapper .btn-number:hover{color:#0068e1;color:var(--color-primary)}.product-details-info .number-picker .input-group-quantity .btn-wrapper .btn-number[disabled]:hover{color:#191919}.product-details-info .number-picker .input-group-quantity .btn-wrapper .btn-plus{top:0;height:24px;border-top-right-radius:2px}.product-details-info .number-picker .input-group-quantity .btn-wrapper .btn-minus{top:23px;height:22px;border-bottom-right-radius:2px}.product-details-info .btn-add-to-cart{margin-left:20px;padding:8px 30px}.product-details-info .btn-add-to-cart>i{margin-right:6px}.product-details-info .details-info-bottom{padding:10px 0}.product-details-info .additional-info{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;margin:0 0 -6px -12px;padding:5px 0}.product-details-info .additional-info li{margin-bottom:4px;padding:0 12px}.product-details-info .additional-info li:last-child{margin-bottom:0}.product-details-info .additional-info li label{margin-bottom:0}.product-details-info .additional-info li a{color:#0068e1;color:var(--color-primary)}.product-details-info .additional-info li a:hover{color:#0055b8;color:var(--color-primary-hover)}.product-details-info .additional-info .sku{color:#0068e1;color:var(--color-primary)}.product-details-info .additional-info .sku label{color:#191919}.product-details-info .social-share{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.product-details-info .social-share label{margin-bottom:0}.product-details-info .social-share .social-links{margin-left:16px}@media screen and (max-width:1600px){.product-details-info{width:calc(100% - 500px)}}@media screen and (max-width:991px){.product-details-info{width:100%;margin-top:34px;padding:0}.product-details-info .product-variants{margin-top:-5px}.product-details-info .product-variants .variant-custom-selection label{padding-top:0}.product-details-info .product-variants .variant-check{margin-top:0}.product-details-info .product-variants .variant-radio{margin-top:0}.product-details-info .product-variants .variant-check label{margin-bottom:8px}.product-details-info .product-variants .variant-radio label{margin-bottom:8px}.product-details-info .product-variants .variant-input label{padding-top:0}.product-details-info .product-variants .variant-select label{padding-top:0}}@media screen and (max-width:420px){.product-details-info .details-info-middle-actions{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.product-details-info .btn-add-to-cart{margin:20px 0 0;align-self:flex-start}}.product-details-bottom{display:-webkit-box;display:flex}.product-details-bottom .left-sidebar{width:285px;min-width:285px;padding-right:15px}.product-details-bottom .left-sidebar .vertical-products{margin-top:14px}.product-details-bottom .left-sidebar .vertical-products+.banner{margin-top:45px}.product-details-bottom .left-sidebar .banner{margin-top:20px}.product-details-bottom .product-details-bottom-inner{width:calc(100% - 282px);padding-left:15px}.product-details-tab>.tabs{-webkit-box-pack:center;justify-content:center;border-bottom:1px solid #ebebeb}@media screen and (max-width:991px){.product-details-bottom .left-sidebar{width:100%;min-width:0}.product-details-bottom .left-sidebar .vertical-products{margin-top:44px}.product-details-bottom .product-details-bottom-inner{width:100%;padding-left:0}.product-details-bottom .product-details-tab{margin-bottom:-15px}}.description{padding-top:46px}.description h1{margin-bottom:14px}.description h2{margin-bottom:14px}.description h3{margin-bottom:14px}.description h4{margin-bottom:14px}.description h5{margin-bottom:14px}.description h6{margin-bottom:14px}.description p{line-height:24px;color:#6e6e6e}.description ol{padding-left:16px;overflow:hidden}.description ul{padding-left:16px;overflow:hidden}.description ol li{margin-bottom:9px;color:#6e6e6e}.description ul li{margin-bottom:9px;color:#6e6e6e}.description b{font-weight:500}.description em{font-weight:500}.description strong{font-weight:500}.description a{color:#0068e1;color:var(--color-primary)}.description a:hover{color:#0055b8;color:var(--color-primary-hover)}.description img{height:auto;max-width:100%;max-height:100%}.description iframe{border:none;max-width:100%}.description th{font-weight:500}.description td{vertical-align:top}@media screen and (max-width:991px){.description{padding-top:36px}}@media screen and (max-width:767px){.description img{width:100%}}.specification{padding-top:51px}.specification .specification-inner{border:1px solid #ebebeb;border-radius:2px}.specification .title{padding:15px 30px;background:#f9f9f9}.specification-list{padding:35px 30px 34px}.specification-list li{display:-webkit-box;display:flex;margin-bottom:18px}.specification-list li:last-child{margin-bottom:0}.specification-list label{font-weight:500;line-height:23px;width:190px;min-width:190px;margin-bottom:0}.specification-list span{line-height:23px;color:#6e6e6e}@media screen and (max-width:991px){.specification{padding:41px 0 15px}}@media screen and (max-width:767px){.specification-list li{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.specification-list label{margin-bottom:3px}}.review-form>h4{margin-bottom:28px}.review-form .rating-input{font-size:20px;line-height:20px;position:relative;display:-webkit-box;display:flex;margin:-1px 0 -2px;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;flex-direction:row-reverse;-webkit-box-pack:end;justify-content:flex-end}.review-form .rating-input label{margin-bottom:0;color:#ebebeb;cursor:pointer;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out}.review-form .rating-input label:focus{color:#ffb136}.review-form .rating-input label:focus~label{color:#ffb136}.review-form .rating-input label:hover{color:#ffb136}.review-form .rating-input label:hover~label{color:#ffb136}.review-form .rating-input input[type=radio]{display:none}.review-form .rating-input input[type=radio]:checked~label{color:#ffb136}.review-form .btn-submit{padding:7px 30px}.user-review-wrap{margin-top:4px}.user-review-wrap.loading:after{border-width:2px}.user-review-wrap .empty-message{display:-webkit-box;display:flex;padding:35px 0 40px;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;text-align:center}.user-review-wrap .empty-message svg{height:80px;width:80px;margin-bottom:16px}.user-review-wrap .empty-message svg path{stroke-width:3px;fill:#0068e1;fill:var(--color-primary);stroke:#0068e1;stroke:var(--color-primary)}.user-review{margin-bottom:27px}.user-review:nth-child(4){margin-bottom:0}.user-review:nth-child(n/**/+5){display:none}.user-review .reviewer-name{font-size:16px;margin-bottom:6px}.user-review .product-rating{margin-bottom:11px}.user-review .reviewer-message{color:#6e6e6e;margin-bottom:7px}.user-review .review-approval{font-size:14px;color:#a6a6a6}.user-review .review-date{font-size:14px;color:#a6a6a6}@media screen and (max-width:1199px){.user-review-wrap{margin:48px 0 8px}}.sticky-add-to-cart{position:fixed;right:0;bottom:0;left:0;z-index:1000;padding:10px 0;background-color:#fff;border-top:1px solid #ebebeb;box-shadow:0 -2px 10px rgba(0,0,0,.08);-webkit-animation:stickyAddToCartIn .2s ease-out;animation:stickyAddToCartIn .2s ease-out}.sticky-add-to-cart-inner{-webkit-box-pack:justify;justify-content:space-between}.sticky-add-to-cart-inner{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.sticky-add-to-cart-product{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.sticky-add-to-cart-product{min-width:0}.sticky-add-to-cart-image{width:50px;height:50px;margin-right:15px;-o-object-fit:contain;object-fit:contain;flex-shrink:0}.sticky-add-to-cart-meta{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;min-width:0}.sticky-add-to-cart-name{overflow:hidden;font-size:14px;color:#191919;text-overflow:ellipsis;white-space:nowrap}.sticky-add-to-cart-price{font-size:16px;font-weight:600;color:#0068e1;color:var(--color-primary)}.sticky-add-to-cart-price del{margin-right:5px;font-size:13px;font-weight:400;color:#6e6e6e}.sticky-add-to-cart-button{flex-shrink:0;margin-left:20px;white-space:nowrap}@media screen and (max-width:767px){.sticky-add-to-cart{padding:8px 0}.sticky-add-to-cart-image{display:none}.sticky-add-to-cart-name{max-width:150px;font-size:13px}.sticky-add-to-cart-price{font-size:15px}.sticky-add-to-cart-button{margin-left:10px;padding-right:15px;padding-left:15px;font-size:13px}}.product-details-wrap{margin-top:50px}.no-js .base-image>:not(:first-child){display:none}.no-js .additional-image-wrap{display:-webkit-box;display:flex;flex-wrap:wrap;overflow:visible}.sticky-add-to-cart-price .previous-price{margin-right:5px;font-size:13px;font-weight:400;color:#6e6e6e;text-decoration:line-through}@keyframes stickyAddToCartIn{0%{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}
/* ==========================================================================
   Product page redesign additions (2026-09-10)
   Appended on top of the original product-details.min.css, unmodified above.
   New, additive rules only — nothing here overrides/removes existing
   selectors, so every untouched part of the page (gallery, options form,
   tabs logic, sticky cart, reviews) keeps its current behaviour and look.
   ========================================================================== */

/* ---- Spec highlight box (shown only when the product has attributes) ---- */
.spec-highlight-box {
  background: #f6f9ff;
  border: 1px solid #d7e6fb;
  border-left: 4px solid #0068e1;
  border-left: 4px solid var(--color-primary, #0068e1);
  border-radius: 4px;
  padding: 18px 22px;
  margin-bottom: 16px;
}
.spec-highlight-box .spec-highlight-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #0055b8;
  color: var(--color-primary-hover, #0055b8);
  margin-bottom: 12px;
}
.spec-highlight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 28px;
}
.spec-highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #454545;
}
.spec-highlight-item::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #0068e1;
  background: var(--color-primary, #0068e1);
  margin-top: 6px;
  flex-shrink: 0;
}
.spec-highlight-item b { font-weight: 500; color: #191919; }
@media screen and (max-width: 576px) {
  .spec-highlight-grid { grid-template-columns: 1fr; }
}

/* ---- Trust badge strip ----
   Moved from the info column to sit full-width right after the top product
   section (replacing where Frequently Bought Together used to be) — styled
   as its own card to match that position, instead of the old thin
   border-top separator that assumed a narrower column context. */
.trust-badge-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 24px 0 0;
  padding: 22px 26px;
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 4px;
}
.trust-badge-item { display: flex; gap: 14px; align-items: center; }
.trust-badge-item .tb-icon {
  width: 46px; height: 46px;
  flex-shrink: 0;
  background: #eaf3ff;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  line-height: 1;
}
.trust-badge-item .tb-text b { display: block; font-size: 15px; font-weight: 700; color: #191919; margin-bottom: 2px; line-height: 1.3; }
.trust-badge-item .tb-text span { font-size: 13px; color: #6e6e6e; line-height: 1.3; }
@media screen and (max-width: 991px) {
  .trust-badge-strip { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 420px) {
  .trust-badge-strip { grid-template-columns: 1fr; }
}

/* ---- Segmented "1 PC / Box" toggle ----
   Built from a single real checkbox input plus two <label for="..."> tags
   pointing at it (see checkbox_toggle.blade.php) — the input is visually
   hidden but stays in normal tab/click flow via its labels, and the
   :checked sibling selector below is the only thing deciding which side
   looks active. No JS involved in the styling itself.
   Restyled bolder/uppercase heading + filled pill active state, using our
   real homepage brand blue instead of the reference screenshot's colors. */
.qty-type-toggle-wrap { margin-bottom: 22px; }
/* .product-variants prefix bumps specificity above the sitewide
   .form-group label{font-weight:500} rule in common.min.css (0,1,1) —
   .qty-type-heading alone (0,1,0) was losing to it silently, which is why
   "SELECT FULL BOX" wasn't actually rendering bold despite this rule
   saying font-weight:700 the whole time. Confirmed via matching CSS rules
   directly, not guesswork. */
.product-variants .qty-type-heading {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #0055b8;
  color: var(--color-primary-hover, #0055b8);
  margin-bottom: 10px;
}
.qty-type-toggle { display: flex; gap: 10px; position: relative; }
.qty-type-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* .qty-type-toggle prefix bumps specificity above the sitewide
   .form-group label{font-weight:500} rule in common.min.css (0,1,1) — same
   silent-override bug as "SELECT FULL BOX" earlier: these pills are real
   <label> elements (checkbox_toggle.blade.php), so .qty-btn alone (0,1,0)
   was losing to it despite saying font-weight:700 the whole time.
   Confirmed via matching CSS rules directly (not guesswork) — same root
   cause, same fix pattern. */
.qty-type-toggle .qty-btn {
  flex: 1;
  border: 1.5px solid #ebebeb;
  border-radius: 999px;
  padding: 11px 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: #6e6e6e;
  cursor: pointer;
  margin-bottom: 0;
  text-align: center;
  /* Resting-state background, same light-blue tint as the Wishlist pill —
     the active/selected state below still overrides this to solid blue,
     since that rule has higher specificity. */
  background: #eaf3ff;
  transition: all .15s ease-in-out;
}
/* The struck-through original price inside a pill (e.g. "1 PC · AED 32.00
   AED 40.00") is a separate nested span with its own explicit
   font-weight:400 in the base theme — doesn't inherit the bold above since
   it's directly overridden there, same pattern as the top/total price
   fixes. */
.qty-btn .previous-price {
  font-weight: 700;
}
.qty-type-input:not(:checked) ~ .qty-btn-pc,
.qty-type-input:checked ~ .qty-btn-box {
  border-color: #0068e1;
  border-color: var(--color-primary, #0068e1);
  background: #0068e1;
  background: var(--color-primary, #0068e1);
  color: #fff;
}
.qty-type-input:focus-visible ~ .qty-btn-pc,
.qty-type-input:focus-visible ~ .qty-btn-box {
  outline: 2px solid #0068e1;
  outline: 2px solid var(--color-primary, #0068e1);
  outline-offset: 2px;
}
@media screen and (max-width: 420px) {
  /* Was flex-direction:column (two full-width pills stacked, ~2 rows tall).
     Kept side by side instead — each pill just gets narrower/smaller text,
     which is shorter overall than two full-width stacked rows. */
  .qty-btn { padding: 10px 8px; font-size: 12px; }
}

/* ---- Flavour (and any other dropdown-type option): full width, bolder
   border, more rounded — matching the approved reference. Same real
   <select>, same nice-select plugin, same Vue update handler. ---- */
.product-details-info .variant-select label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #0055b8;
  color: var(--color-primary-hover, #0055b8);
  margin-bottom: 10px;
}
/* The real width constraint wasn't a specificity fight — select.blade.php
   wraps the label and the dropdown in a Bootstrap grid row
   (col-xl-4/col-lg-6 for the label, col-xl-10/col-lg-12 for the dropdown),
   built for an inline side-by-side layout. Since this redesign already
   stacks the label full-width above the dropdown instead, that leftover
   grid math caps the dropdown's real containing block at 83% width no
   matter what width value is set on .nice-select itself — confirmed via
   walking the DOM ancestry directly. Resetting both columns to 100% here
   fixes the true root cause. */
.product-details-info .variant-select .row {
  margin: 0;
}
.product-details-info .variant-select .row > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0;
}
.product-details-info .variant-select .form-select,
.product-details-info .variant-select .nice-select,
.product-details-info .variant-select select.form-control {
  width: 100%;
}
.product-details-info .variant-select .nice-select {
  border: 1.5px solid #0068e1;
  border: 1.5px solid var(--color-primary, #0068e1);
  border-radius: 10px;
  font-weight: 600;
  /* Same light-blue resting tint as the Wishlist pill and the box-toggle
     pills — the dropdown's OPEN option list (.list below) stays white for
     readability of the individual options. */
  background: #eaf3ff;
}
.product-details-info .variant-select .nice-select .list {
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
}

/* ---- Rounded corners on the other real form fields — same fields, same
   behaviour, just softer corners (the stepper's +/- buttons in particular
   are hard-set to border-radius:0 in the base theme). ---- */
.product-details-info .btn-number { border-radius: 8px !important; }
.product-details-info .btn-wrapper .btn-plus { border-top-right-radius: 8px; }
.product-details-info .btn-wrapper .btn-minus { border-bottom-right-radius: 8px; }
.product-details-info .form-control,
.product-details-info select[multiple] {
  border-radius: 10px;
}

/* ---- Total Price box: price + quantity stepper together, matching the
   approved reference. The price value here shares the exact same
   v-html="price" Vue binding as the top price display (same real value);
   the quantity-multiplication script targets THIS element specifically so
   this box shows the running total while the top price stays per-unit. ---- */
/* Sized down per Eliana's feedback — this box was taking up noticeably
   more vertical space than it needed, especially once stacked to a
   column on mobile. Same real price/quantity content and bindings
   throughout, just a more compact box (smaller padding/font-sizes/stepper
   buttons) at every breakpoint, with mobile trimmed further still. */
.total-price-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f6f9ff;
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 12px;
}
.total-price-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #0055b8;
  color: var(--color-primary-hover, #0055b8);
  margin-bottom: 2px;
}
.total-price-value {
  font-size: 17px;
  font-weight: 700;
  color: #191919;
}
.total-price-value .previous-price {
  font-size: 12px;
  font-weight: 700;
  color: #a6a6a6;
  margin-left: 5px;
}
.total-price-box .number-picker { margin-bottom: 0; flex-shrink: 0; }
.total-price-box .number-picker .input-group-quantity {
  display: flex;
  align-items: center;
  gap: 6px;
  position: static;
}
.total-price-box .number-picker .input-quantity {
  width: 24px;
  padding: 0;
  border: none;
  background: none;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: #191919;
}
/* The base theme's .btn-wrapper/.btn-plus/.btn-minus rules position these
   absolutely (stacked on top of each other) for the compact stepper used
   elsewhere on the page — override with matching selector depth so this
   specific stepper lays out as a normal inline row instead. */
.total-price-box .number-picker .input-group-quantity .btn-wrapper {
  position: static;
}
.total-price-box .number-picker .input-group-quantity .btn-wrapper .btn-number {
  position: static;
  top: auto;
  right: auto;
  width: 32px;
  height: 32px;
  border: none;
  background: #0068e1;
  background: var(--color-primary, #0068e1);
  color: #fff;
  font-weight: 700;
  line-height: 1;
  font-size: 16px;
  border-radius: 8px !important;
}
.total-price-box .number-picker .input-group-quantity .btn-wrapper .btn-number:hover { color: #fff; }
.total-price-box .number-picker .input-group-quantity .btn-wrapper .btn-number[disabled] { opacity: .4; }
@media screen and (max-width: 480px) {
  .total-price-box { flex-direction: column; align-items: stretch; text-align: center; padding: 8px 12px; gap: 6px; }
  .total-price-label { margin-bottom: 0; }
  .total-price-value { font-size: 15px; }
  /* The stepper itself was left-aligned inside the now-full-width box —
     center it as a whole and center its internal row too. Trimmed the
     top margin too — the box as a whole is more compact now, so it
     doesn't need as much breathing room between the price and stepper. */
  .total-price-box .number-picker { align-self: center; margin-top: 2px; }
  .total-price-box .number-picker .input-group-quantity { justify-content: center; }
}

/* ---- Wishlist + Add to Cart: bold pills side by side, our theme colors
   (light-blue Wishlist, near-black Add to Cart — matching the real
   sitewide Add to Cart color already used everywhere else) instead of the
   reference screenshot's yellow/maroon. Same real syncWishlist/addToCart
   Vue bindings — shape/color only. ---- */
.product-details-info .details-info-middle-actions {
  display: flex;
  align-items: stretch;
  gap: 12px;
}
.btn-wishlist-pill {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  border-radius: 999px;
  border: none;
  background: #eaf3ff;
  color: #0055b8;
  color: var(--color-primary-hover, #0055b8);
  font-size: 0.92rem;
  font-weight: 700;
  transition: all .15s ease-in-out;
}
.btn-wishlist-pill:hover,
.btn-wishlist-pill.added {
  background: #0068e1;
  background: var(--color-primary, #0068e1);
  color: #fff;
}
@media screen and (max-width: 420px) {
  /* The ORIGINAL theme's own product-details.min.css (copied in verbatim as
     the first half of this combined file) already sets
     .details-info-middle-actions{flex-direction:column} at this exact
     breakpoint — that's the real, pre-existing source of the stacking, not
     something added by this redesign. Deleting a same-named rule here in a
     PREVIOUS pass just removed a redundant duplicate and left that base
     rule in charge again. Actually overriding it (same selector, later in
     the concatenated file, so it wins on source order) is what's needed —
     back to a row, same approach as the box toggle above. Only
     Compare/Wishlist live in this row now (Add to Cart moved to its own
     full-width button below — see .btn-add-to-cart-full). */
  .product-details-info .details-info-middle-actions { flex-direction: row; }
  .btn-wishlist-pill {
    padding: 12px 10px;
    font-size: 0.82rem;
    gap: 6px;
  }
  .btn-wishlist-pill i {
    font-size: 0.95rem;
  }
}

/* ---- Add to Cart: same pill shape as Compare/Wishlist/Total Price
   controls, always (previously only styled this way while sharing the
   3-across row with Compare/Wishlist). ---- */
.product-details-info .btn-add-to-cart {
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  margin-left: 0;
}
.product-details-info .btn-add-to-cart > i { margin-right: 0; }

/* ---- Add to Cart: full-width bold pill below Compare/Wishlist ----
   Eliana asked to remove Buy It Now (which reimplemented nothing — it
   just clicked this exact button under the hood) and put the REAL Add to
   Cart button in that same full-width spot instead. Same real
   type="submit"/addToCart Vue binding as before — this just makes it
   render full-width/block like the old Buy It Now did, instead of the
   flex:1-in-a-row sizing it used while sharing space with Compare and
   Wishlist. */
.product-details-info .btn-add-to-cart-full {
  display: block;
  width: 100%;
  flex: none;
  margin-top: 12px;
  padding: 14px 24px;
  font-size: 0.95rem;
  letter-spacing: .02em;
}

/* ---- Sticky gallery + Categories/Tags relocated into the info column ----
   HISTORY (kept as notes — earlier attempts, resolved by this final shape):
   Categories/Tags was first tried living directly under the gallery
   (flex-wrap, then Grid, then a dedicated wrapper) specifically to fill
   dead space that opened up once the info column grew taller than the
   gallery. Once a sticky "floating image" feature (matching competitor
   vpdubaiking.ae — confirmed via inspecting their CSS that it's a plain
   position:sticky there too) was layered on top, a real structural
   conflict surfaced: verified via exact pixel math that a sticky
   element's max-clamped position will ALWAYS end up overlapping whatever
   normal-flow sibling follows it in the same containing block, by exactly
   that sibling's own height — inherent to how sticky's bottom-edge clamp
   works, not tunable with spacing. Eliana's call: move Categories/Tags out
   of the gallery's column entirely (into the info column, right below the
   short description) so the gallery's column has nothing left to overlap
   — sticky can now use the FULL row height (matching the info column) as
   its containing block with zero conflict. No more wrapper needed, no
   more mobile display:contents/order trick needed either — Categories/Tags
   is back to being a normal child of .product-details-info like the
   original theme, just repositioned earlier in that column instead of
   last, so mobile stacking is automatically correct with zero extra CSS.

   Explicit column width matches the gallery's own responsive width (600px
   above 1600px, 500px between 992-1600px) — same breakpoints the base
   theme already uses for .product-image-gallery. .product-details-info's
   own `width:calc(100% - 600px)` (a base-theme flex-era value) is reset to
   `width:auto` since under grid it should just fill its assigned column,
   not double-subtract a fixed pixel amount from 100% of the grid
   container itself. Gated to min-width:992px — below that the base theme
   already switches .product-details-top-inner to flex-direction:column
   for mobile stacking, which needs no help here since Categories/Tags is
   now a plain, ordinary child of .product-details-info again. */
@media screen and (min-width: 992px) {
  .product-details-top-inner {
    display: grid;
    grid-template-columns: 600px 1fr;
    align-items: start;
  }
  .product-details-top-inner > .product-image-gallery {
    /* Sticky image column, matching the competitor reference. top:100px
       clears the site's own sticky header (measured at 81px tall) plus a
       little breathing room. Nothing else lives in this grid column now,
       so there's nothing for the sticky clamp to ever overlap — it simply
       releases once the (taller) info column finishes scrolling past,
       same as intended from the start. */
    position: sticky;
    top: 100px;
  }
  .product-details-top-inner > .product-details-info { grid-column: 2; width: auto; }
}
@media screen and (min-width: 992px) and (max-width: 1600px) {
  .product-details-top-inner { grid-template-columns: 500px 1fr; }
}

/* ---- Categories/Tags: repositioned styling ----
   Now sits right below the short description, inside the normal info
   column flow (not a standalone "fills dead space" card anymore, since
   there's no dead space here to fill) — light-weight spacing only, no
   card/border treatment. Categories and Tags side by side in one row
   (wrapping to a second line if the row's too narrow to fit both) instead
   of the base theme's one-per-line stacking — same real data/links, layout
   only. */
.details-info-bottom-top {
  margin-top: 4px;
  margin-bottom: 18px;
  padding: 0;
}
.details-info-bottom-top .additional-info {
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  gap: 6px 32px;
}
.details-info-bottom-top .additional-info li {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
/* Bolder label treatment — matching the visual weight of the competitor
   reference (a bold uppercase label), but using our own real brand color
   instead of copying their black/gray palette. */
.details-info-bottom-top .additional-info li label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #0055b8;
  color: var(--color-primary-hover, #0055b8);
  margin-right: 4px;
}
/* Categories/Tags as small pill buttons instead of comma-separated text
   links — same real $category->url()/$tag->url() links underneath, just
   a chip shape with its own background instead of plain inline text. */
.details-info-bottom-top .additional-info li a.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: #f2f4f5;
  font-size: 12px;
  font-weight: 600;
  color: #454545;
  text-decoration: none;
  transition: all .15s ease-in-out;
}
.details-info-bottom-top .additional-info li a.tag-pill:hover {
  background: #0068e1;
  background: var(--color-primary, #0068e1);
  color: #fff;
}

/* ---- Rating + Social Share: one row instead of two stacked rows ----
   Previously each was its own full-width block (title -> share -> rating),
   which added two extra vertical rows near the top on every screen size.
   Combined into a single flex row: rating (if any reviews) sits at the
   left, the real social_share partial is pushed to the right via
   margin-left:auto on its own wrapper (so it stays right-aligned even
   when there's no rating to share the row with). Same real components,
   layout only. */
.rating-share-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 9px;
}
/* At narrow widths, rating + review count + "In stock" + "Share:" + 4
   icons genuinely don't all fit on one line (checked via real
   getBoundingClientRect measurements at a true 390px viewport — combined
   content needs ~375px+ against a ~356px usable row). Without this,
   flexbox doesn't drop the whole Share block to its own line — it
   squeezes .social-links down below one icon's own width instead, which
   wraps the 4 icons into a tall single vertical column rather than a row.
   Letting the ROW wrap instead fixes this cleanly: rating+stock stays on
   line 1, Share drops to its own full line 2, and the icons inside it
   have the full row width to lay out horizontally as normal. */
@media screen and (max-width: 480px) {
  .rating-share-row {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .rating-share-row .social-share-row-top {
    margin-left: 0;
    flex-basis: 100%;
  }
}
.rating-share-row .product-rating { margin-bottom: 0; }
/* Availability (In stock / Out of stock) now sits inline in this row
   instead of its own stacked block below — reset the base theme's
   margin-bottom so it aligns on the same line as the rating, and add a
   small bullet separator when it's following the rating (not when it's
   the first/only item in the row, e.g. a product with reviews disabled
   or zero reviews). */
.rating-share-row .availability {
  margin-bottom: 0;
  white-space: nowrap;
}
.rating-share-row .product-rating + .availability::before {
  content: '\2022';
  margin-right: 8px;
  color: #a6a6a6;
}
.social-share-row-top {
  display: flex;
  margin-left: auto;
}
.social-share-row .social-share {
  display: flex;
  align-items: center;
  gap: 12px;
}
.social-share-row .social-share label {
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 700;
  color: #191919;
}
/* Icon size bumped from the base theme's 22px (25px, then 30px per
   request), and the gap between the icons themselves (base theme: 5px
   via li margin-right) tightened further — scoped to this repositioned
   share row only, not a sitewide change to every .social-links instance
   on the site.
   font-size:0 on the <ul> kills a separate, easy-to-miss source of gap:
   the real whitespace/newlines between each <li> in the Blade template
   render as an actual space character between these inline-flex items
   (confirmed via direct measurement — the real gap was ~5px, not the 1px
   margin-right alone), and that whitespace's rendered width scales with
   font-size. Zeroing it on the parent and re-setting the real 30px only
   on the icon links themselves is the standard fix — it doesn't touch
   the icons' own size, only removes the invisible text-node gap between
   them. white-space:nowrap keeps all 6 icons on one line rather than
   letting inline-flex items wrap like text once they don't fit — needed
   because a real 375px-wide phone (confirmed via testing at that exact
   width) is narrow enough that the 6th icon (Copy Link) would otherwise
   drop to a second line. */
.social-share-row .social-links {
  font-size: 0;
  white-space: nowrap;
}
.social-share-row .social-links li a {
  font-size: 30px;
}
.social-share-row .social-links li {
  margin-right: 1px;
}
@media screen and (max-width: 480px) {
  /* Reclaims the "Share:" label's width on narrow phones so 6 real
     30px icons + tightened gaps reliably fit on one line even on the
     narrowest common widths (~320-375px) — icons are self-explanatory at
     this size, the label becomes redundant chrome rather than needed
     context. Icons/links themselves are untouched, label text only.
     (.social-share-row-top's own margin-left:0/flex-basis:100% already
     handled by the .rating-share-row wrap fix above — not repeated
     here.) */
  .social-share-row .social-share label {
    display: none;
  }
}
/* Each share icon hovers to its own real platform brand color instead of
   a single generic site color — Facebook blue, Twitter/X blue, LinkedIn
   blue, Tumblr navy, WhatsApp green. Order matches
   social_share_redesign.blade.php exactly (Facebook, Twitter, LinkedIn,
   Tumblr, WhatsApp, Copy Link — the last one uses the site's own primary
   blue instead of a "brand" color, since Copy Link isn't a platform). */
.social-share-row .social-links li:nth-child(1) a:hover { color: #1877f2; }
.social-share-row .social-links li:nth-child(2) a:hover { color: #1da1f2; }
.social-share-row .social-links li:nth-child(3) a:hover { color: #0a66c2; }
.social-share-row .social-links li:nth-child(4) a:hover { color: #36465d; }
.social-share-row .social-links li:nth-child(5) a:hover { color: #25d366; }
.social-share-row .social-links li:nth-child(6) a:hover {
  color: #0068e1;
  color: var(--color-primary, #0068e1);
}

/* ---- Price row ----
   product-price + Save% badge. This row originally shared space with
   Compare (margin-left:auto pushed price to the right, Compare stayed
   left) — Compare has since moved out entirely into
   details-info-middle-actions next to Wishlist, so .product-price is now
   the ONLY real content here. Left over margin-left:auto with nothing
   left of it just pushed the price all the way to the right edge,
   leaving a real blank gap on the left — most visible on mobile, per a
   real device report. Removed; price now sits naturally at the left like
   every other line in this column. Same real v-html="price" binding,
   position only. */
.details-info-top-actions {
  display: flex;
  align-items: center;
}
.details-info-top-actions .product-price {
  padding-bottom: 0;
}
@media screen and (max-width: 767px) {
  /* On mobile, Eliana asked for the price row centered rather than
     left-aligned like the rest of the column — a deliberate visual
     choice for this row specifically, not a bug fix. Desktop keeps it
     left-aligned in line with Brand/SKU and everything else above it. */
  .details-info-top-actions {
    justify-content: center;
  }
}
/* ---- "Save X%" badge next to the price ----
   Computed server-side once from the product's own real price vs
   special_price (see show_redesign.blade.php) — static, not tied to the
   Vue price computed, so it reflects the base per-unit discount only. */
.details-info-top-actions .save-percent-badge {
  margin-left: 10px;
  padding: 3px 9px;
  background: #fdeceb;
  color: #e23e1d;
  font-size: 12px;
  font-weight: 700;
  border-radius: 4px;
  white-space: nowrap;
}

/* ---- Brand + SKU line under the title ---- */
.product-brand-sku {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #6e6e6e;
}
.product-brand-sku .product-brand a {
  color: #0068e1;
  color: var(--color-primary, #0068e1);
  font-weight: 600;
}
.product-brand-sku .product-brand a:hover {
  color: #0055b8;
  color: var(--color-primary-hover, #0055b8);
}
.product-brand-sku .product-sku-inline {
  padding-left: 14px;
  border-left: 1px solid #e5e5e5;
}

/* ---- Bolder title + price, matching the same visual-weight pass as the

/* ---- Bolder title + price, matching the same visual-weight pass as the
   Categories/Tags and option labels above — same real text/values, just
   heavier font-weight than the base theme's default. ---- */
.product-details-info .product-name {
  font-weight: 700;
}
.product-details-info .product-price {
  font-weight: 700;
}
/* The struck-through "compare at" original price is a separate nested
   span (.previous-price) with its own explicit font-weight:400 in the
   base theme — the parent .product-price bold rule above doesn't cascade
   into it since it's directly overridden there, not inherited. */
.product-details-info .product-price .previous-price {
  font-weight: 700;
}

/* ---- Tabs: visual polish only, same underlying Vue tab logic ---- */
.product-details-tab > .tabs.nav-tabs {
  border-bottom: 1px solid #ebebeb;
  gap: 30px;
}
.product-details-tab > .tabs.nav-tabs .nav-link {
  border: none;
  padding: 14px 0;
  font-size: 15px;
  font-weight: 500;
  color: #a6a6a6;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1px;
  background: none;
  border-radius: 0;
}
.product-details-tab > .tabs.nav-tabs .nav-link.active {
  color: #191919;
  border-bottom-color: #0068e1;
  border-bottom-color: var(--color-primary, #0068e1);
  background: none;
}

/* ---- Regular body text bumped from 400 to 500 ----
   The base theme's paragraph text (15px/400) read as visually thin/"tinny"
   despite already being a comfortable size for readability — same real
   text throughout, just a slightly heavier stroke weight, not a size
   change. Covers the short description under the title and the main
   description tab content (paragraphs + list items). */
.brief-description,
.description p,
.description ol li,
.description ul li {
  font-weight: 500;
}

/* ---- Fix the REAL cause of the off-center look: an empty left sidebar
   still reserving 285px of layout width ----
   Eliana's screenshot showed the whole description column sitting way
   over to the right with a big blank gap on the left — that's not this
   centering CSS misbehaving, it's `.left-sidebar` (real DOM element:
   left_sidebar.blade.php, renders "You might also like"/a banner ONLY
   when $upSellProducts isn't empty / a banner image exists) rendering
   completely empty for a product with neither — confirmed via
   `document.querySelector('.left-sidebar').children.length === 0` — yet
   the base theme still gives it a hard `width:285px` regardless of
   whether it has content, since that width isn't conditioned on emptiness.
   `.product-details-bottom-inner` (which contains the tabs/description)
   sits to its right at a fixed `width:calc(100% - 282px)` — so on any
   product with no upsell products and no banner, that whole 282px was
   dead space at the LEFT of the real content, making our centered
   description column visually center itself relative to the wrong
   (narrower, right-shifted) box instead of the actual page. `:empty`
   collapses the sidebar and reclaims that space only when it's genuinely
   empty — products that DO have upsell products or a banner keep the
   sidebar and the narrower inner column exactly as before, unaffected. */
@media screen and (min-width: 992px) {
  .product-details-bottom .left-sidebar:empty {
    display: none;
  }
  .product-details-bottom .left-sidebar:empty + .product-details-bottom-inner {
    width: 100%;
    padding-left: 0;
  }
}

/* ---- Same exact bug, second instance: the TOP section's right-sidebar ----
   Eliana's screenshot on a very wide screen (1920px) showed a large blank
   gap on the right of the title/price/options column. Root cause,
   confirmed the same way: `.right-sidebar` (right_sidebar.blade.php — a
   "feature list" of icon+title+subtitle callouts, gated behind the
   sitewide `storefront_features_section_enabled` setting, currently off)
   renders completely empty (0 children, confirmed via direct DOM check)
   but the base theme still reserves it a hard `width:285px` at ≥1351px
   viewports (below that the base theme already hides it itself). Unlike
   the bottom-section case, `.product-details-top-inner`'s own width here
   is a plain `width:100%` (not a hard calc subtraction) inside a flex row
   — so once the empty sibling is removed from layout, normal flex
   shrink/grow resolves it back to the full available width on its own,
   no extra width override needed on the inner element itself. Verified
   this empirically (measured width before/after) rather than assuming. */
@media screen and (min-width: 1351px) {
  .product-details-top .right-sidebar:empty {
    display: none;
  }
  /* Reclaiming the sidebar's space made the info column run all the way to
     the true edge of the content area — a bit too far. Pull it back in
     slightly with a fixed right gutter instead of using 100% of the freed
     width. .right-sidebar comes AFTER .product-details-info in the DOM
     (see the blade template), so a sibling combinator can't reach it —
     :has() on the shared .product-details-top ancestor is the correct
     tool here. */
  .product-details-top:has(.right-sidebar:empty) .product-details-info {
    padding-right: 60px;
  }
}

/* ---- Main description centered, with a distinct intro treatment ----
   The description tab was rendering at the FULL width of the content
   column (confirmed ~1450px on a wide desktop) — lines that long are a
   real readability problem regardless of alignment, not just a cosmetic
   one. Constraining to a comfortable reading width and centering that
   block addresses "not centered" directly. Only the intro paragraph
   (the product's own opening line, e.g. "Innovation is key in...") gets
   the centered/emphasized treatment — bullet lists and later paragraphs
   stay left-aligned within the same centered column, since centering a
   multi-line feature list hurts scannability. The small accent line under
   the intro is the "unique" touch — a deliberate stylistic signature
   rather than a plain centered paragraph. Same real product copy
   throughout, no content changes. */
.description {
  max-width: 960px;
  margin: 0 auto;
}
.description > p:first-of-type {
  font-size: 17px;
  line-height: 1.65;
  color: #3d3d3d;
  margin-bottom: 24px;
}
.description > p:first-of-type::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  margin: 22px auto 0;
  background: #0068e1;
  background: var(--color-primary, #0068e1);
  border-radius: 2px;
}

/* ---- Colored section headers inside description content ----
   Styles whatever heading level a product's existing description already
   uses (h3 most commonly) — no database content is changed, this only
   changes how the same existing text renders. */
.description h3,
.description h2 {
  border-left: 4px solid #0068e1;
  border-left: 4px solid var(--color-primary, #0068e1);
  background: #f6f9ff;
  padding: 9px 14px;
  border-radius: 0 4px 4px 0;
  font-size: 17px;
  color: #0055b8;
  color: var(--color-primary-hover, #0055b8);
}
/* Some existing product descriptions have an embedded video/iframe nested
   inside the heading tag itself rather than after it (a pre-existing content
   quirk, not something this redesign changes). Without this guard, the
   colored header box above would stretch to wrap the whole embedded video.
   Neutralize the box styling only in that specific case so it falls back to
   a plain heading instead of an oversized coloured block. */
.description h3:has(iframe),
.description h2:has(iframe) {
  background: none;
  border-left: none;
  padding: 0;
  color: inherit;
}

/* ---- Floating WhatsApp button: scoped override for THIS page only ----
   The real .whatsapp_btn element is fixed-position and shared sitewide
   (defined in the global layout.blade.php, unchanged there). On mobile its
   default bottom:54px/right:48px sits directly on top of this page's new
   full-width Buy It Now button. Since this stylesheet only loads on this
   product page (@section('page_stylesheet', ...)), overriding it here moves
   the button only when this specific template is in use — every other page
   on the site keeps the exact original position untouched. */
@media screen and (max-width: 767px) {
  /* !important is required here: the original rule lives in an inline
     <style> block in layout.blade.php that loads after this linked
     stylesheet, so equal specificity would otherwise let it win on source
     order alone. Real overlap-avoidance is the JS below (fades this out
     while #add_to_cart_area is in view) — this is just a smaller/tighter
     resting size and position for the rest of the page.
     NOTE: the button markup changed from an <img> to a plain <i> icon in a
     CSS circle (see layout.blade.php) as part of a separate, sitewide fix
     — targets .content now, not img, which no longer exists here. */
  .whatsapp_btn { right: 16px !important; }
  .whatsapp_btn .content { width: 52px !important; height: 52px !important; }
  .whatsapp_btn .content i { font-size: 28px !important; }
}
.whatsapp_btn { transition: opacity .2s ease-in-out; }

/* ---- Page shell: centered container + white card on a light-gray page ----
   Eliana asked to match the reference concept's own page shell after we
   inspected its real source: body on a light-gray page background
   (#f2f4f5), content centered in a 1240px column, with the top
   gallery+info block as a white rounded card sitting on top of that gray
   — not the container itself being colored. Reproduced with the exact
   same values. Scoped to this page only (this stylesheet only loads on
   the product-details-redesign route) — every other page on the site
   keeps its own background/container untouched. .product-details-wrap
   .container is 2 classes deep, so it naturally outranks every plain
   .container breakpoint rule in the sitewide stylesheet regardless of
   media-query source order — no !important needed for the width itself. */
body {
  background: #f2f4f5;
}
.product-details-wrap .container {
  max-width: 1240px;
}
.product-details-top {
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 10px;
  padding: 28px;
}
@media screen and (max-width: 767px) {
  .product-details-top {
    padding: 16px;
    border-radius: 8px;
  }
}

/* ---- Description/Specification/Reviews tabs: same white-card treatment
   ----
   Matches the reference concept's own .tabs-wrap exactly (same real
   values from its source: white card, 1px #ebebeb border, 10px radius,
   24px gap above it, overflow:hidden so the tab nav's bottom border sits
   flush with the card's rounded top edge). Scoped to .product-details-tab
   specifically — NOT the whole .product-details-bottom — so the left
   sidebar (upsell products/banner, a separate real component) stays
   outside this card, same separation of concerns as the mockup's own
   layout. Nav and tab-content get their own horizontal padding (like the
   mockup's .tabs-nav/.tab-panel) rather than padding the outer wrapper,
   so the nav's border-bottom can still span edge-to-edge under
   overflow:hidden. No padding-top added to .tab-content since
   .description/.specification already carry their own top spacing —
   adding more here would just double it. */
.product-details-tab {
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 10px;
  margin-top: 24px;
  overflow: hidden;
}
.product-details-tab > .tabs {
  padding: 0 28px;
}
.product-details-tab .tab-content {
  padding: 0 28px 28px;
}
@media screen and (max-width: 767px) {
  .product-details-tab {
    border-radius: 8px;
  }
  .product-details-tab > .tabs {
    padding: 0 16px;
  }
  .product-details-tab .tab-content {
    padding: 0 16px 16px;
  }
}