/* ==========================================================================
   Perry's Diamonds & Estate Jewelry - custom widget CSS
   Paste into Punchmark Site Manager > Design / Theme Settings > Global CSS.
   Do NOT paste into the page editor.

   Covers:
     .perrys-fin  - Layaway & Financing   (/pages/layaway-and-financing)
     .perrys-cj   - Custom Jewelry Design (/pages/custom-jewelry-design)
     .perrys-ji   - Jewelry Insurance     (/pages/jewelry-insurance)
     .perrys-jr   - Jewelry Repairs       (/pages/jewelry-repairs)
     .perrys-pb   - Pearl & Bead Restringing (/pages/pearl-and-bead-restringing)
     .perrys-tu   - Trade Up Policy       (/pages/trade-up-policy)
     .perrys-gg   - Going Green            (/pages/going-green)
     .perrys-faq  - FAQ                    (/pages/faq)
     .perrys-ap   - Jewelry Appraisals     (/pages/jewelry-appraisals)
     .perrys-ci   - Cleaning & Inspection  (/pages/cleaning-and-inspection)

   Shared layout hooks: .perrys-split-section, .perrys-strip, .perrys-cta-band,
   .perrys-disclosure

   .perrys-split-section
     Put this class on any image/text split section on any Perry's page and
     it gets the full-bleed 6/6 treatment below. .perrys-fin-split is kept
     as an alias so the existing financing page keeps working unchanged.

   Bootstrap 5 baseline. Inherits the perrys-* type scale already in the theme.

   Specificity note: the column-gutter reset uses an attribute selector, which
   scores at class level (0,3,0). The text-column padding rules match it at
   (0,3,0) via `.perrys-split-section .row > .perrys-split-text` and win only
   because they come later in the file. Do not simplify those selectors and do
   not move them above the gutter reset, or the padding silently disappears.
   ========================================================================== */

/* ==========================================================================
   SHARED - split sections
   ========================================================================== */

.perrys-split-section,
.perrys-fin-split {
  overflow: hidden;
}

.perrys-split-section > .container,
.perrys-split-section > .container-fluid,
.perrys-fin-split > .container,
.perrys-fin-split > .container-fluid {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.perrys-split-section .row,
.perrys-fin-split .row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

@media (min-width: 992px) {
  .perrys-split-section .row,
  .perrys-fin-split .row {
    display: flex;
    align-items: stretch;
  }
}

.perrys-split-section .row > [class*="col-"],
.perrys-fin-split .row > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

/* --- Stacking order on mobile ---------------------------------------------
   Split sections alternate which side the image sits on at desktop, so DOM
   order alternates too. Below lg that would drop the image under the copy on
   every text-first section. Force the media half to the top on small screens
   so the image always leads, whichever side it takes on desktop.

   Bootstrap's .row is already display:flex below lg, so order works without
   any extra display rule here. */

@media (max-width: 991.98px) {
  .perrys-split-section .perrys-split-media,
  .perrys-fin-split .perrys-split-media {
    order: -1;
  }
}

/* --- Media half ----------------------------------------------------------- */

.perrys-split-section .perrys-split-media,
.perrys-split-section .perrys-split-img,
.perrys-fin-split .perrys-split-media,
.perrys-fin-split .perrys-split-img {
  height: 100%;
}

.perrys-split-section .perrys-split-img img,
.perrys-fin-split .perrys-split-img img {
  width: 100%;
  height: 100%;
  min-height: 32rem;
  object-fit: cover;
  display: block;
}

@media (max-width: 991.98px) {
  .perrys-split-section .perrys-split-img img,
  .perrys-fin-split .perrys-split-img img {
    min-height: 20rem;
  }
}

/* --- Text half ------------------------------------------------------------
   Padding here keeps copy off the column edge and must outrank the gutter
   reset above, hence the doubled section class and child combinator. */

.perrys-split-section .row > .perrys-split-text,
.perrys-fin-split .row > .perrys-split-text {
  padding: 3.5rem 1.75rem;
}

@media (min-width: 992px) {
  .perrys-split-section .row > .perrys-split-text,
  .perrys-fin-split .row > .perrys-split-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5rem 4.5rem;
  }
}

@media (min-width: 1400px) {
  .perrys-split-section .row > .perrys-split-text,
  .perrys-fin-split .row > .perrys-split-text {
    padding-left: 6rem;
    padding-right: 6rem;
  }
}

.perrys-split-section .perrys-split-text > *,
.perrys-fin-split .perrys-split-text > * {
  width: 100%;
}

.perrys-split-section .perrys-split-body,
.perrys-split-section .perrys-body-detail,
.perrys-fin-split .perrys-split-body,
.perrys-fin-split .perrys-body-detail {
  max-width: 42rem;
  margin-left: 0;
  margin-right: auto;
}

/* --- Type rhythm inside the text half ------------------------------------- */

.perrys-split-section .perrys-kicker,
.perrys-fin-split .perrys-kicker {
  margin-bottom: 1.25rem;
}

.perrys-split-section .perrys-split-title,
.perrys-fin-split .perrys-split-title {
  margin-bottom: 1.25rem;
}

.perrys-split-section .perrys-split-body,
.perrys-fin-split .perrys-split-body {
  margin-bottom: 1.5rem;
}

.perrys-split-section .perrys-split-body:last-child,
.perrys-fin-split .perrys-split-body:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   SHARED - feature lists
   ========================================================================== */

/* --- Feature lists --------------------------------------------------------
   Functional bullets, not the display list used for "Why Perry's".
   Body size, upright, short-rule marker.

   .perrys-feature-list is the hook to use on new pages. The per-page names
   below are kept so existing pages keep working; do not add more of them. */

.perrys-feature-list,
.perrys-fin .perrys-fin-list,
.perrys-ji .perrys-ji-list,
.perrys-jr .perrys-jr-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 2rem;
  max-width: 42rem;
}

.perrys-feature-list li,
.perrys-fin .perrys-fin-list li,
.perrys-ji .perrys-ji-list li,
.perrys-jr .perrys-jr-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.7rem;
  font-style: normal;
  line-height: 1.6;
}

.perrys-feature-list li::before,
.perrys-fin .perrys-fin-list li::before,
.perrys-ji .perrys-ji-list li::before,
.perrys-jr .perrys-jr-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.perrys-feature-list li:last-child,
.perrys-fin .perrys-fin-list li:last-child,
.perrys-ji .perrys-ji-list li:last-child,
.perrys-jr .perrys-jr-list li:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   LAYAWAY & FINANCING
   ========================================================================== */

/* --- Call to action line -------------------------------------------------- */

.perrys-fin-split .perrys-body-detail {
  margin-bottom: 0.75rem;
}

.perrys-fin-split .perrys-link {
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* --- Disclosure ----------------------------------------------------------- */

.perrys-fin-disclosure {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.perrys-fin .perrys-fin-disclosure__text {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.72;
  font-size: 0.8125rem;
  line-height: 1.65;
}

/* ==========================================================================
   CUSTOM JEWELRY DESIGN
   ========================================================================== */

/* --- Award badges ---------------------------------------------------------
   Four BOB Award seals in a row, wrapping to two up on phones. */

.perrys-cj .perrys-cj-awards__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem 2.5rem;
  margin: 0 auto;
  padding: 0 1.5rem 3.5rem;
  max-width: 60rem;
}

.perrys-cj .perrys-cj-awards__list li {
  flex: 0 0 auto;
}

.perrys-cj .perrys-cj-awards__list img {
  display: block;
  width: auto;
  height: 7.5rem;
  max-width: 100%;
}

@media (max-width: 575.98px) {
  .perrys-cj .perrys-cj-awards__list {
    gap: 1.25rem 1.5rem;
  }
  .perrys-cj .perrys-cj-awards__list img {
    height: 5.5rem;
  }
}

/* --- Start a Project band -------------------------------------------------
   The wizard is the conversion on this page, so give the button room. */

.perrys-cj-wizard {
  padding: 4.5rem 1.5rem;
  text-align: center;
}

.perrys-cj-wizard .perrys-svc-lead {
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.25rem;
}

.perrys-cj-wizard__cta .btn-primary,
.perrys-cj-wizard .btn-primary {
  min-width: 15rem;
}

/* --- Three up image strip -------------------------------------------------
   Full bleed, equal thirds, no gutters, matching heights. */

.perrys-strip .row,
.perrys-cj-strip .row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  margin-left: 0;
  margin-right: 0;
}

.perrys-strip .row > [class*="col-"],
.perrys-cj-strip .row > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

.perrys-strip .perrys-cj-strip__img img,
.perrys-cj-strip .perrys-cj-strip__img img {
  display: block;
  width: 100%;
  height: 22rem;
  object-fit: cover;
}

@media (max-width: 575.98px) {
  .perrys-strip .perrys-cj-strip__img img,
.perrys-cj-strip .perrys-cj-strip__img img {
    height: 15rem;
  }
}

/* ==========================================================================
   JEWELRY INSURANCE
   ========================================================================== */

/* --- Get a Quote CTA ------------------------------------------------------ */

.perrys-ji .perrys-ji-cta .btn-primary,
.perrys-ji .perrys-ji-cta.btn-primary {
  min-width: 13rem;
}

/* --- Disclosure -----------------------------------------------------------
   This is a legal notice, so keep it readable rather than shrinking it away. */

.perrys-ji-disclosure {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.perrys-ji .perrys-ji-disclosure__text {
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.78;
  font-size: 0.875rem;
  line-height: 1.7;
}

.perrys-ji .perrys-ji-disclosure__asof {
  max-width: 52rem;
  margin: 1rem auto 0;
  opacity: 0.6;
  font-size: 0.8125rem;
  font-style: italic;
}

/* ==========================================================================
   TRADE UP POLICY
   ========================================================================== */

/* --- Intro CTA ------------------------------------------------------------ */

.perrys-tu .perrys-tu-intro__cta .btn-primary,
.perrys-tu .perrys-tu-intro__cta.btn-primary {
  min-width: 12rem;
}

/* --- Closing CTA band -----------------------------------------------------
   Centred band, same rhythm as the custom jewelry wizard band. */

.perrys-cta-band,
.perrys-tu-cta {
  padding: 4.5rem 1.5rem;
  text-align: center;
}

.perrys-cta-band .perrys-svc-lead,
.perrys-tu-cta .perrys-svc-lead {
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.25rem;
}

.perrys-tu-cta__cta .btn-primary,
.perrys-tu-cta .btn-primary {
  min-width: 14rem;
}

.perrys-cta-band .perrys-link,
.perrys-tu-cta .perrys-link {
  display: inline-block;
  margin-top: 1.25rem;
}

.perrys-cta-band .btn-primary {
  min-width: 14rem;
}

/* --- Disclosure -----------------------------------------------------------
   Terms of the trade-in credit. Quiet, but still legible. */

.perrys-tu-disclosure {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.perrys-tu .perrys-tu-disclosure__text {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.72;
  font-size: 0.8125rem;
  line-height: 1.65;
}

/* ==========================================================================
   GOING GREEN
   ========================================================================== */

/* Runs entirely on the shared hooks above. This block is a placeholder so the
   page has somewhere obvious to grow into. */

.perrys-gg .perrys-gg-sell__cta .btn-primary,
.perrys-gg .perrys-gg-sell__cta.btn-primary {
  min-width: 15rem;
}

/* ==========================================================================
   FAQ
   ========================================================================== */

/* --- Page rhythm ----------------------------------------------------------
   Long, text-only page, so hold the measure well short of full width and let
   each group read as its own section rather than one continuous list.

   Group separation is carried by three things together: a wide gap above the
   heading, a hairline rule the full width of the measure, and a heading that
   is styled as a section label (left aligned, letterspaced, smaller than the
   theme's display h2) rather than as a page title. Any one of those alone
   reads as decoration; together they read as a break. */

.perrys-faq-body {
  padding-top: 0;
  padding-bottom: 4.5rem;
}

.perrys-faq-body .perrys-faq-group__title,
.perrys-faq-body .perrys-faq-list {
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}

.perrys-faq-body .perrys-faq-group__title {
  position: relative;
  text-align: left;
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 5.5rem;
  margin-bottom: 2rem;
  padding-top: 2.25rem;
}

/* Hairline across the full measure, sitting above the heading. */
.perrys-faq-body .perrys-faq-group__title::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.18;
}

/* Short accent rule under the heading, matching the kicker treatment used
   on the split pages. */
.perrys-faq-body .perrys-faq-group__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.85rem;
  width: 2.5rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

/* First group sits directly under the hero, so it needs neither the big gap
   nor the divider rule. */
.perrys-faq-body .perrys-faq-group__title--first {
  margin-top: 3.25rem;
  padding-top: 0;
}

.perrys-faq-body .perrys-faq-group__title--first::before {
  display: none;
}

@media (max-width: 767.98px) {
  .perrys-faq-body .perrys-faq-group__title {
    font-size: 1.25rem;
    margin-top: 4rem;
    padding-top: 1.75rem;
    margin-bottom: 1.75rem;
  }
  .perrys-faq-body .perrys-faq-group__title--first {
    margin-top: 2.5rem;
  }
}

/* --- Accordion ------------------------------------------------------------
   Native <details>/<summary>, so it opens with no JavaScript and stays
   open for print and for anyone landing via in-page search. The marker is
   drawn with ::after so it can be a thin plus/minus rather than the
   browser's default triangle. */

.perrys-faq-list details {
  border-top: 1px solid currentColor;
  border-color: rgba(0, 0, 0, 0.12);
}

.perrys-faq-list details:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.perrys-faq-list summary {
  position: relative;
  display: block;
  cursor: pointer;
  padding: 1.15rem 3rem 1.15rem 0;
  font-size: 1.0625rem;
  line-height: 1.45;
  list-style: none;
}

/* Kill the default disclosure triangle in every engine. */
.perrys-faq-list summary::-webkit-details-marker {
  display: none;
}

.perrys-faq-list summary::marker {
  content: "";
}

/* Thin plus that becomes a minus when open. */
.perrys-faq-list summary::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 50%;
  width: 0.85rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.perrys-faq-list summary::before {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  width: 1px;
  height: 0.85rem;
  margin-top: -0.425rem;
  background: currentColor;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.perrys-faq-list details[open] summary::before {
  opacity: 0;
}

.perrys-faq-list summary:hover {
  opacity: 0.75;
}

.perrys-faq-list summary:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}

.perrys-faq-answer {
  padding: 0 3rem 1.5rem 0;
  max-width: 44rem;
}

.perrys-faq-answer p {
  margin-bottom: 0.9rem;
  line-height: 1.7;
}

.perrys-faq-answer p:last-child {
  margin-bottom: 0;
}

.perrys-faq-answer a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

@media (max-width: 575.98px) {
  .perrys-faq-list summary {
    padding-right: 2.25rem;
  }
  .perrys-faq-answer {
    padding-right: 0;
  }
}

/* ==========================================================================
   SHARED - disclosures
   ========================================================================== */

/* --- Fine print ------------------------------------------------------------
   Quiet closing note for pricing, terms and as-of dates. .perrys-disclosure
   is the hook to use on new pages; the per-page names above are kept so the
   financing, insurance and trade-up pages keep working. Do not add more of
   them. */

.perrys-disclosure {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.perrys-disclosure__text {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.72;
  font-size: 0.8125rem;
  line-height: 1.65;
}

/* ==========================================================================
   JEWELRY APPRAISALS / CLEANING & INSPECTION
   ========================================================================== */

/* Both run entirely on the shared hooks above. Only the CTA widths differ. */

.perrys-ap .perrys-ap-intro__cta .btn-primary,
.perrys-ap .perrys-ap-intro__cta.btn-primary,
.perrys-ci .perrys-ci-cta__cta .btn-primary,
.perrys-ci .perrys-ci-cta__cta.btn-primary {
  min-width: 15rem;
}