/* ==========================================
   Typography override scope for Product Panel
   Add your custom font rules in your theme or here
========================================== */

.ofr-product-panel__typography {
    /* Base font rules */
    font-family: new-hero;   /* override here as needed */
    color: #063647 !important;
}

.ofr-product-panel__typography p {
 	line-height:150%;
}

/* Heading overrides (optional) */
.ofr-product-panel__typography h1.ofr-product-panel__title {
    /* Example customisation — replace with your real font */
    font-family: inherit;
    font-weight: 500;
    font-size: 4.18rem;
    color: #063647;
    text-transform: none;
}

.ofr-product-panel__typography .ofr-product-panel__rating {
    /* Example: smaller text, uppercase, tracking adjustment */
    font-family: inherit;
}

.ofr-product-panel__typography .ofr-product-panel__intro {
    font-family: inherit;
}

.ofr-product-panel__typography .ofr-accordion-title {
   font-family: inherit;
   font-style: normal;
   font-weight: 600;
   font-size: 1.8rem !important;
}

.ofr-product-panel__typography .ofr-accordion-body-inner {
    font-family: inherit;
    font-size: inherit;
}

.ofr-product-panel__typography .ofr-accordion-body-inner h4 {
    font-family: inherit;
    font-weight: 600;
    font-size: 1.6rem;
    color: #063647;
    text-transform: none;
    margin: 0 0 1rem;
}

.ofr-product-panel__typography p + h4 {
	margin: 2rem 0 1rem !important;
 }

/* Button typography */
.ofr-product-panel__typography .ofr-product-panel__cta-button {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}


.ofr-product-panel {
  margin: 4rem 0 4rem;
}

/* Reduce top margin on product panel for ≤1100px */
@media (max-width: 1100px) {
  .ofr-product-panel {
    margin-top: 1.25rem;
  }
}


/* 50/50 split with 40px gutter */
.ofr-product-panel__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 60px; /* gutter */
}

/* Left column: media */
.ofr-product-panel__media {
  flex: 0 0 calc(50% - 30px);
  max-width: calc(50% - 30px);
}

/* Right column: content */
.ofr-product-panel__content {
  flex: 0 0 calc(50% - 30px);
  max-width: calc(50% - 30px);
}

/* Hero image */
.ofr-product-panel__hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
}

/* Thumbnail grid */
.ofr-product-panel__thumbs {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
}

.ofr-product-panel__thumb {
  background: #f3f5f7;
  border-radius: 12px;
  overflow: hidden;
}

.ofr-product-panel__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Right column: content */

.ofr-product-panel__title {
  margin: 0 0 1rem;
}

.ofr-product-panel__rating {
  margin-bottom: 2rem;
}

.ofr-product-panel__intro {
  margin-bottom: 2rem;
}

.ofr-product-panel__intro p {
  margin: 0 0 0.75rem;
}
.ofr-product-panel__intro p:last-child {
  margin-bottom: 3.2rem;
}

.ofr-product-panel__cta {
  margin-bottom: 4rem;
}

/* Accordions */

.ofr-product-panel__accordions {
 /*  border-top: 1px solid #073946; */
  border-bottom: 1px solid #063647;
}

.ofr-accordion-item {
  border-top: 1px solid #063647;
}

/* Heading wrapper reset */
.ofr-accordion-heading {
  font-family: inherit;
  margin: 0;
  padding: 0;
}

/* Accordion header button */
.ofr-accordion-toggle {
  width: 100%;
  padding: 0.75rem 0;
  background: #ffffff;
  border: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-align: left;
}

/* Reset theme button styles on product panel accordions */
.ofr-product-panel .ofr-accordion-toggle,
.swatch-white .ofr-product-panel .ofr-accordion-toggle {
  background: #ffffff;
  color: inherit;
  border: 0;
  box-shadow: none;
  text-shadow: none;
}

/* Keep our layout / padding */
.ofr-product-panel .ofr-accordion-toggle {
  padding: 1.75rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-align: left;
}


.ofr-accordion-toggle:hover {
 /*  background: #f6f9fb; */
}

.ofr-accordion-title {
  font-weight: 600;
  color: #063647;
}

/* Accordion body */
.ofr-accordion-body {
  padding: 0.15rem 0 2.5rem;
}

.ofr-accordion-body-inner p {
  margin-bottom: 0.45rem;
}
.ofr-accordion-body-inner p:last-child {
  margin-bottom: 0;
}

.ofr-accordion-body-inner ul {
  margin: 0.2rem 0 2.4rem 1.1rem;
}

/* ================================
   Product Panel Accordion Chevron
   Uses Font Awesome icons
   (assumes FA already loaded by theme)
================================ */

.ofr-accordion-icon::before {
  font-family: "FontAwesome";
  content: "\f107"; /* chevron-down (closed) */
  font-weight: normal;
  font-size: 24px;
  color: #063647; 
  display: inline-block;
  transition: transform 0.25s ease;
}

/* Open state: chevron-up */
.ofr-accordion-toggle[aria-expanded="true"] .ofr-accordion-icon::before {
  content: "\f106"; /* chevron-up */
  transform: rotate(180deg); /* nice little animation */
}

/* Responsive */

@media (max-width: 1100px) {
  .ofr-product-panel__inner {
    flex-wrap: wrap;
    gap: 30px;
  }

  .ofr-product-panel__media,
  .ofr-product-panel__content {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (max-width: 700px) {
  .ofr-product-panel {
    margin-bottom: 3rem;
  }

  .ofr-product-panel__thumbs {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
  }
}

/* =====================================================
   PRODUCT PANEL — RESPONSIVE COLLAPSIBLE GALLERY
   (One-row preview with adaptive clipping & fade)
===================================================== */

/* Full gallery visible only above 1100px */
@media (min-width: 1101px) {
  .ofr-product-panel__thumbs--collapsible {
    max-height: none;
    overflow: visible;
  }
  .ofr-product-panel__thumbs--collapsible::after {
    content: none;
  }
  .ofr-gallery-toggle {
    display: none;
  }
}


/* ----------------------------------------------
   Tier 1: Small mobile 0–767px
   (smallest thumbs → smallest clip window)
---------------------------------------------- */
@media (max-width: 767px) {
  .ofr-product-panel__thumbs--collapsible {
    position: relative;
    max-height: 9.5rem; /* ~1 row */
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  .ofr-product-panel__thumbs--collapsible::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3.5rem;   /* smallest fade */
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      #ffffff 100%
    );
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
}


/* -------------------------------------------------------------
   Tier 2: Medium devices 768–900px 
   (bigger thumbs → allow a taller clip window + taller fade)
-------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 900px) {
  .ofr-product-panel__thumbs--collapsible {
    position: relative;
    max-height: 11rem; /* slightly taller peek */
    overflow: hidden;
  }

  .ofr-product-panel__thumbs--collapsible::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4rem; /* medium fade */
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      #ffffff 100%
    );
    pointer-events: none;
  }
}


/* -------------------------------------------------------------
   Tier 3: Large mobile / tablet portrait 901–1100px
   (largest thumbnails → biggest peek + softest fade)
-------------------------------------------------------------- */
@media (min-width: 901px) and (max-width: 1100px) {
  .ofr-product-panel__thumbs--collapsible {
    position: relative;
    max-height: 12.5rem; /* shows more of row */
    overflow: hidden;
  }

  .ofr-product-panel__thumbs--collapsible::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4.5rem; /* larger gradient for smoother blend */
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      #ffffff 100%
    );
    pointer-events: none;
  }
}


/* -------------------------------------------------------------
   Expanded state shared across all breakpoints ≤1100px
-------------------------------------------------------------- */
.ofr-product-panel__thumbs--expanded {
  max-height: none;
}
.ofr-product-panel__thumbs--expanded::after {
  opacity: 0;
}

/* Toggle button styling (unchanged) */
.ofr-gallery-toggle {
  margin-top: 1rem;
  padding: 0.6rem 1.4rem;
  font-size: 1rem;
  border-radius: 999px;
  background: #063647 !important;
  color: #fff !important;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ofr-gallery-toggle:hover {
  background: #063647 !important;
}

/* =====================================================
   PATCH — Make "Show more" MOBILE ONLY (≤767px)
   and ensure no clipping on ≥768px
===================================================== */

/* Default: hide the button everywhere */
.ofr-gallery-toggle {
  display: none !important;
}

/* Mobile only: show the button */
@media (max-width: 767px) {
  .ofr-gallery-toggle {
    display: inline-flex !important;
  }
}

/* Tablet + desktop: never clip the thumbs, even if markup has --collapsed */
@media (min-width: 768px) {
  .ofr-product-panel__thumbs--collapsible,
  .ofr-product-panel__thumbs--collapsed,
  .ofr-product-panel__thumbs--expanded {
    max-height: none !important;
    overflow: visible !important;
  }

  .ofr-product-panel__thumbs--collapsible::after,
  .ofr-product-panel__thumbs--collapsed::after,
  .ofr-product-panel__thumbs--expanded::after {
    content: none !important;
    opacity: 0 !important;
  }
}


/* Product rating label override */
.ofr-product-panel
.ofr-product-panel__rating
.ofr-product-panel__rating-label {
  font-size: 1.2rem;
  font-weight: 600;
}

.ofr-reviews-summary {
text-align:left;
}