/* ==========================================================================
   Doctor National - Product Details Page Styling
   ========================================================================== */

:root {
  --dn-brand: #ef011c;
  --dn-brand-ink: #ffffff;
  --dn-brand-soft: #fee6e9;
  --dn-bg: #ffffff;
  --dn-surface: #f5f5f5;
  --dn-text: #231f20;
  --dn-muted: #6b7280;
  --dn-line: #e9e9e9;
  --dn-shadow: 0 10px 30px rgba(35, 31, 32, .12);
}

.wrap {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 24px;
}

.product-details-page {
  padding-bottom: 56px;
}

/* Breadcrumbs */
.crumbs {
  padding: 18px 0 20px;
}

.crumbs ol,
.crumbs ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--dn-muted, #7a7a7a);
}

.crumbs li {
  display: inline-flex;
  align-items: center;
  list-style: none;
}

/* separator "/" before every item except the first */
.crumbs li + li::before {
  content: "/";
  margin-inline: 10px;
  opacity: .55;
}

.crumbs a {
  color: inherit;
  text-decoration: none;
  transition: color .15s;
}

.crumbs a:hover {
  color: var(--dn-brand, #ef011c);
}

/* current page (last item) */
.crumbs [aria-current] {
  color: var(--dn-text, #231f20);
  font-weight: 500;
}

/* Main PDP Layout */
.pdp {
  display: grid;
  gap: 24px;
}

/* Gallery */
.pdp-gallery {
  position: relative;
}
.pdp-gallery .media {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dn-surface);
  color: var(--dn-muted);
  overflow: hidden;
  border: 1px solid var(--dn-line);
}
.pdp-gallery .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.pdp-gallery .picture-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.pdp-gallery .thumb-item {
  width: 68px;
  height: 80px;
  flex-shrink: 0;
  border: 1px solid var(--dn-line);
  cursor: pointer;
  overflow: hidden;
  background: var(--dn-surface);
  transition: border-color .15s, opacity .15s;
}
.pdp-gallery .thumb-item:hover, .pdp-gallery .thumb-item.active {
  border-color: var(--dn-brand);
}
.pdp-gallery .thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Product Detail Column */
.pdp-detail {
  display: flex;
  flex-direction: column;
}

.p-title {
  margin: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--dn-line);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--dn-text);
  font-family: 'Poppins', 'Cairo', sans-serif;
}

/* Ratings */
.pdp .rate {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 16px;
}
.pdp .rate .stars {
  display: flex;
  gap: 2px;
  color: #f59e0b;
}
.pdp .rate .stars svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
.pdp .review-link {
  font-size: 13px;
  color: var(--dn-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s;
}
.pdp .review-link:hover {
  color: var(--dn-brand);
}

/* Price */
.pdp .p-price {
  margin-top: 14px;
  color: var(--dn-brand);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.pdp .p-price small {
  font-size: 14px;
  font-weight: 600;
  color: var(--dn-brand);
}
.pdp .p-price .old-price {
  font-size: 16px;
  font-weight: 400;
  color: var(--dn-muted);
  text-decoration: line-through;
}

/* Options / Attributes */
.pdp .opt {
  margin-top: 22px;
}
.pdp .opt-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.pdp .opt-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dn-text);
}
html[lang="ar"] .pdp .opt-label, [dir="rtl"] .pdp .opt-label {
  letter-spacing: 0;
  font-size: 14.5px;
}
.pdp .opt-head .req {
  color: var(--dn-brand);
  font-style: normal;
}
.pdp .opt-head .sel {
  font-size: 13px;
  color: var(--dn-muted);
  font-weight: 500;
}

/* Chips */
.pdp .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pdp .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--dn-line);
  background: var(--dn-bg);
  color: var(--dn-text);
  font-size: 13.5px;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s, background .15s, box-shadow .15s, color .15s;
  position: relative;
}
.pdp .chip:hover {
  border-color: var(--dn-muted);
}
.pdp .attributes dt {
  display: none !important;
}
.pdp .attributes dd {
  margin: 0;
}

.pdp .chip-radio:checked + .chip,
.pdp .chip:has(input:checked),
.pdp .chip.active,
.pdp .chip[aria-pressed="true"] {
  border-color: var(--dn-text) !important;
  box-shadow: inset 0 0 0 2px var(--dn-text) !important;
  font-weight: 600;
}
.pdp .chip .sw {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(128, 128, 128, .5);
  flex-shrink: 0;
  display: inline-block;
}
.pdp .chip.size {
  min-width: 50px;
  padding: 0 14px;
  font-weight: 500;
}
.pdp .chip-radio:checked + .chip.size,
.pdp .chip.size:has(input:checked),
.pdp .chip.size.active,
.pdp .chip.size[aria-pressed="true"] {
  background: var(--dn-text) !important;
  color: #ffffff !important;
  border-color: var(--dn-text) !important;
  box-shadow: none !important;
}

/* Hidden native radio for chips */
.pdp .chip-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

/* Quantity */
.pdp .qty {
  display: inline-flex;
  height: 44px;
  border: 1px solid var(--dn-line);
}
.pdp .qty button {
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dn-brand);
  color: var(--dn-brand-ink);
  border: 0;
  cursor: pointer;
  transition: opacity .15s;
}
.pdp .qty button:active {
  opacity: .85;
}
.pdp .qty svg.i {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.4;
  fill: none;
}
.pdp .qty input {
  width: 64px;
  border: 0;
  border-inline: 1px solid var(--dn-line);
  background: var(--dn-bg);
  color: var(--dn-text);
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  -moz-appearance: textfield;
  appearance: textfield;
}
.pdp .qty input::-webkit-outer-spin-button,
.pdp .qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pdp .qty input:focus {
  outline: none;
}

/* Buttons */
.pdp .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border: 1.5px solid var(--dn-brand);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .18s ease;
  font-family: inherit;
}
html[lang="ar"] .pdp .btn, [dir="rtl"] .pdp .btn {
  letter-spacing: 0;
  font-size: 14.5px;
}
.pdp .btn.solid {
  background: var(--dn-brand);
  color: var(--dn-brand-ink);
}
.pdp .btn.solid:hover {
  background: #d40018;
  border-color: #d40018;
}
.pdp .btn.ghost {
  background: transparent;
  color: var(--dn-brand);
}
.pdp .btn.ghost:hover {
  background: var(--dn-brand);
  color: var(--dn-brand-ink);
}
.pdp .btn.grey {
  background: var(--dn-surface);
  border-color: var(--dn-line);
  color: var(--dn-text);
  font-weight: 500;
}
.pdp .btn.grey:hover {
  border-color: var(--dn-muted);
}
.pdp .btn.grey svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: fill .15s, stroke .15s;
}
.pdp .btn.grey.active,
.pdp .btn.grey.in-wishlist,
.pdp .add-to-wishlist-button.active,
.pdp .add-to-wishlist-button.in-wishlist,
.add-to-wishlist-button.active,
.add-to-wishlist-button.in-wishlist {
  background: var(--dn-brand-soft, #fee6e9) !important;
  border-color: var(--dn-brand, #ef011c) !important;
  color: var(--dn-brand, #ef011c) !important;
}
.pdp .btn.grey.active svg,
.pdp .btn.grey.in-wishlist svg,
.pdp .add-to-wishlist-button.active svg,
.pdp .add-to-wishlist-button.in-wishlist svg,
.add-to-wishlist-button.active svg,
.add-to-wishlist-button.in-wishlist svg {
  fill: var(--dn-brand, #ef011c) !important;
  stroke: var(--dn-brand, #ef011c) !important;
}
.pdp .btn.grey.active:hover,
.pdp .btn.grey.in-wishlist:hover,
.pdp .add-to-wishlist-button.active:hover,
.pdp .add-to-wishlist-button.in-wishlist:hover,
.add-to-wishlist-button.active:hover,
.add-to-wishlist-button.in-wishlist:hover {
  background: var(--dn-brand, #ef011c) !important;
  border-color: var(--dn-brand, #ef011c) !important;
  color: #ffffff !important;
}
.pdp .btn.grey.active:hover svg,
.pdp .btn.grey.in-wishlist:hover svg,
.pdp .add-to-wishlist-button.active:hover svg,
.pdp .add-to-wishlist-button.in-wishlist:hover svg,
.add-to-wishlist-button.active:hover svg,
.add-to-wishlist-button.in-wishlist:hover svg {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}
.pdp .btn.done {
  background: var(--dn-text) !important;
  border-color: var(--dn-text) !important;
  color: #ffffff !important;
}

.pdp .cta-inline {
  display: flex;
  gap: 12px;
  margin-top: 26px;
}
.pdp .cta-inline .btn {
  flex: 1;
}

.pdp .secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.pdp .secondary .btn {
  flex: 1;
  min-width: 150px;
  height: 44px;
  font-size: 12.5px;
}

/* Service strip / Value perks */
.services,
.pdp .perks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 18px 0 24px;
  border-top: 1px solid var(--dn-line, #e9e9ec);
  border-bottom: 1px solid var(--dn-line, #e9e9ec);
  margin-top: 28px;
}
@media (min-width: 480px) {
  .services,
  .pdp .perks {
    grid-template-columns: 1fr 1fr;
  }
}
.service,
.pdp .perk {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: start;
}
.service svg,
.pdp .perk svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--dn-brand, #ef011c);
}
.service h3,
.pdp .perk strong {
  display: block;
  margin: 0 0 3px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--dn-text, #231f20);
  line-height: 1.35;
}
html[lang="ar"] .service h3, [dir="rtl"] .service h3,
html[lang="ar"] .pdp .perk strong, [dir="rtl"] .pdp .perk strong {
  letter-spacing: 0;
}
.service p,
.pdp .perk span {
  margin: 0;
  font-family: inherit;
  font-size: 13px;
  color: var(--dn-muted, #8b8b93);
  line-height: 1.45;
}

/* Mobile Sticky Bottom Bar */
.cta-bar {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 995;
  background: var(--dn-bg);
  border-top: 1px solid var(--dn-line);
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cta-bar .info {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.cta-bar .info .t {
  font-size: 13px;
  font-weight: 600;
  color: var(--dn-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 190px;
}
.cta-bar .info .p {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--dn-brand);
}
.cta-bar .btn {
  flex-shrink: 0;
  height: 44px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 600;
  border: 1.5px solid var(--dn-brand);
  cursor: pointer;
}
.cta-bar .btn.solid {
  background: var(--dn-brand);
  color: var(--dn-brand-ink);
}
.cta-bar .btn.solid:hover {
  background: #d40018;
}
.cta-bar .btn.ghost {
  background: var(--dn-bg);
  color: var(--dn-brand);
}

/* ==========================================================================
   Product Tabs (Details, Specs, Reviews, Tags)
   ========================================================================== */
.tabsblock {
  max-width: 680px;
  margin: 36px auto 0;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 48px;
  box-sizing: border-box;
  text-align: start;
}
@media (max-width: 480px) {
  .tabsblock {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 40px;
  }
}
.tabs,
.tabbar {
  display: flex;
  gap: 28px;
  margin-top: 0;
  border-bottom: 1px solid var(--dn-line, #e9e9ec);
}
.tab,
.tabbtn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 15px;
  color: var(--dn-muted, #8b8b93);
  padding: 0 0 14px;
  cursor: pointer;
  position: relative;
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s ease;
}
.tab:hover,
.tabbtn:hover {
  color: var(--dn-text, #231f20);
}
.tab[aria-selected="true"],
.tab.on,
.tabbtn.on {
  color: var(--dn-brand, #ef011c);
  font-weight: 600;
}
.tab[aria-selected="true"]::after,
.tab.on::after,
.tabbtn.on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--dn-brand, #ef011c);
}
.tab:focus-visible,
.tabbtn:focus-visible {
  outline: 2px solid var(--dn-brand, #ef011c);
  outline-offset: 3px;
  border-radius: 2px;
}

.panel,
.tabpanel {
  display: none;
  padding-top: 26px;
  text-align: start;
}
.panel[data-active="true"] {
  display: block;
}

/* Details panel & Specifications */
.details-txt {
  font-size: 16px;
  line-height: 1.75;
  color: var(--dn-text, #231f20);
  margin: 0 0 16px;
  max-width: 680px;
}
.details-txt p {
  margin: 0 0 14px;
}
.specs-list {
  margin: 20px 0 0;
  padding: 0;
  max-width: 680px;
}
.spec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--dn-line, #e9e9ec);
  font-size: 14px;
}
.spec dt {
  color: var(--dn-muted, #8b8b93);
  font-weight: 500;
}
.spec dd {
  margin: 0;
  font-weight: 600;
  text-align: end;
  color: var(--dn-text, #231f20);
}

/* ==========================================================================
   Reviews Summary & Unified Stars (20px across entire page)
   ========================================================================== */
h2.section-title,
.rv-title {
  font-size: 22px;
  margin: 0 0 18px;
  font-weight: 600;
  color: var(--dn-text, #231f20);
  text-align: start;
}
.summary,
.rv-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  text-align: start;
}
/* Unified star size across entire page: 20px x 20px */
.stars,
.rate-stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.stars svg,
.rate-stars svg,
.rate-stars button svg,
.rv-item .stars svg {
  width: 20px !important;
  height: 20px !important;
  flex: none;
}
.star-fill {
  fill: var(--dn-brand, #ef011c);
  stroke: var(--dn-brand, #ef011c);
}
.star-empty {
  fill: none;
  stroke: var(--dn-line, #d0d0d5);
  stroke-width: 1.5;
}
.summary-text,
.rv-count {
  font-size: 14px;
  color: var(--dn-muted, #8b8b93);
}

/* ==========================================================================
   Review Form (Clean Directly Visible Form, Accessible Focus)
   ========================================================================== */
.rv-form {
  display: block;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  margin: 24px 0 32px;
  box-sizing: border-box;
  text-align: start;
}
.form-title {
  font-size: 18px;
  margin: 0 0 20px;
  font-weight: 600;
  color: var(--dn-text, #231f20);
}
.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 16px;
}
@media (min-width: 480px) {
  .two-col {
    grid-template-columns: 1fr 1fr;
  }
}
.field {
  margin-bottom: 18px;
  text-align: start;
}
.field label,
#rating-label {
  display: block;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--dn-muted, #6b7280);
  margin-bottom: 6px;
}
html[lang="ar"] .field label, [dir="rtl"] .field label,
html[lang="ar"] #rating-label, [dir="rtl"] #rating-label {
  letter-spacing: 0;
}

/* Input & textarea with clear 4-sided borders (not underline only) */
.field input,
.field textarea {
  width: 100%;
  border: 1px solid var(--dn-line, #d0d0d5);
  border-radius: 6px;
  background: var(--dn-bg, #ffffff);
  color: var(--dn-text, #231f20);
  font-family: inherit;
  font-size: 15px;
  padding: 11px 14px;
  box-sizing: border-box;
  transition: border-color .15s ease, outline .15s ease, box-shadow .15s ease;
}
.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--dn-brand, #ef011c);
  outline-offset: 1px;
  border-color: var(--dn-brand, #ef011c);
}
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--dn-brand, #ef011c);
  outline-offset: 1px;
  border-color: var(--dn-brand, #ef011c);
}
.field textarea {
  min-height: 100px;
  resize: vertical;
}

/* Rate interactive star buttons */
.rate-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rate-stars {
  display: inline-flex;
  gap: 4px;
}
.rate-stars button {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  line-height: 0;
  border-radius: 4px;
  -webkit-tap-highlight-color: transparent;
}
.rate-stars button:focus-visible {
  outline: 2px solid var(--dn-brand, #ef011c);
  outline-offset: 2px;
}

/* Action buttons */
.form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 20px;
}
.submit-btn {
  min-width: 160px;
  padding: 13px 28px;
  background: var(--dn-brand, #ef011c);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, filter .15s ease;
}
.submit-btn:hover {
  background: #d40018;
}
.submit-btn:focus-visible {
  outline: 2px solid var(--dn-text, #231f20);
  outline-offset: 2px;
}
.submit-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}
@media (max-width: 480px) {
  .submit-btn {
    width: 100%;
    text-align: center;
  }
}

/* ==========================================================================
   Reviews List & Empty State
   ========================================================================== */
.rv-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
  max-width: 640px;
}
.rv-item {
  padding: 18px 20px;
  border: 1px solid var(--dn-line, #e9e9ec);
  border-radius: 8px;
  background: var(--dn-bg, #ffffff);
  text-align: start;
}
.rv-item .stars {
  margin-bottom: 8px;
  display: flex;
  gap: 2px;
}
.rv-item .who {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.rv-item .who b {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--dn-text, #231f20);
}
.rv-item .who span {
  font-size: 12px;
  color: var(--dn-muted, #8b8b93);
}
.rv-item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--dn-text, #231f20);
}

.rv-empty {
  margin-top: 24px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--dn-muted, #8b8b93);
  text-align: start;
}

/* Status message */
.rv-msg {
  margin-top: 14px;
  font-size: 13.5px;
  padding: 11px 16px;
  border-radius: 6px;
  display: none;
}
.rv-msg.success {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
  display: block;
}
.rv-msg.error {
  background: #fff1f2;
  color: #9f1239;
  border: 1px solid #fecdd3;
  display: block;
}

/* ==========================================================================
   Accessibility & Prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .tab,
  .tabbtn,
  .write-btn,
  .submit-btn,
  .cancel-btn,
  .rate-stars button,
  .field input,
  .field textarea {
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, filter .15s ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tab,
  .tabbtn,
  .write-btn,
  .submit-btn,
  .cancel-btn,
  .rate-stars button,
  .field input,
  .field textarea {
    transition: none !important;
    animation: none !important;
  }
}

/* Related Products Section */
.related {
  margin-top: 52px;
  padding-top: 36px;
  border-top: 1px solid var(--dn-line);
}
.r-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.r-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--dn-text);
  font-family: 'Poppins', 'Cairo', sans-serif;
  position: relative;
}
.r-title::after {
  content: "";
  display: block;
  width: 32px;
  height: 2.5px;
  margin-top: 6px;
  background: var(--dn-brand);
}
.related .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* Responsive Rules */
@media (min-width: 768px) {
  .related .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

@media (min-width: 992px) {
  .pdp {
    grid-template-columns: 5fr 6fr;
    gap: 56px;
    align-items: start;
  }
  .pdp-gallery {
    position: sticky;
    top: 100px;
  }
  .p-title {
    font-size: 32px;
  }
  .r-title {
    font-size: 24px;
  }
  .related {
    margin-top: 72px;
  }
  .related .grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}

@media (max-width: 991px) {
  .cta-bar {
    display: flex;
  }
  body.html-product-details-page {
    padding-bottom: 76px;
  }
}