/** Shopify CDN: Minification failed

Line 187:0 Unexpected "}"

**/
/* ============================================================
   A33 — the client's exported buy-box components
   Loaded on every layout that renders snippets/pdp-buybox.liquid:
   the landing page, the product page and the pre-lander.

   Two sections came across in the Sep 16 handoff: the three
   product-detail accordions that now sit under the gallery, and
   the Why Trust A33 card that took the place of the theme's own
   four accordions in the buy-box column.

   Scoped under .pdp rather than left bare. Everything here is
   drawn in the client's own token names — --plum-*, --wine*,
   --ink*, --font-display, --font-body — and .pdp is where the
   theme declares all of them, in a33-buybox.css on two of the
   layouts and a33-pdp.css on the third. It also keeps .acc off
   the theme's own accordion rules, which stay in the stylesheet
   for the pre-lander.
   ============================================================ */

/* A33 components — extracted from the A33 PDP. Requires the Google Fonts link (Figtree + Hanken Grotesk); see README. */
.pdp .a33-details,
.pdp .trust,
.pdp .stats,
.pdp .studies,
.pdp .stories {font-family:var(--font-body);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}

.pdp .a33-details *,
.pdp .trust *,
.pdp .stats *,
.pdp .studies *,
.pdp .stories * {box-sizing:border-box}

.pdp .trust img,
.pdp .stats img,
.pdp .studies img,
.pdp .stories img {display:block;max-width:100%}

/* Brightened with every other star on the site (Sep 21). This rule is why
   the buy box kept the old rust after a33-pdp.css changed — .pdp .stars
   outranks .stars, and this sheet loads after that one. */
.pdp .stars {color:var(--star,#FFA62B);font-size:19px;letter-spacing:.09em;line-height:1}

.pdp .stars--sm {font-size:13px;display:block;margin-bottom:2px}

.pdp .accordions {margin-top:14px;display:grid;gap:10px}

.pdp .acc {border:1px solid var(--hairline);border-radius:var(--r-md);overflow:hidden;background:linear-gradient(100deg,var(--lilac-2) 22%,var(--lilac-3))}

.pdp .acc summary {list-style:none;cursor:pointer;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px;font-family:var(--font-display);font-size:14.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}

.pdp .acc summary::-webkit-details-marker {display:none}

.pdp .acc__chev {display:grid;place-content:center;transition:transform .28s var(--ease)}

.pdp .acc__chev svg {width:20px;height:20px;stroke-width:2.4}

.pdp .acc[open] .acc__chev {transform:rotate(180deg)}

/* No fade on the panel, deliberately — see the animation: none a few rules
   down, which is the export's own and is kept.

   The export declares a fade here and cancels it three rules later, because
   the height is animated by a33-components.js and a CSS fade on the same
   element fights it. The declaration that survives is the cancel, so the
   fade never ran in the client's bundle either; it is dropped rather than
   carried across dead. The cancel itself has to stay: without it the
   theme's own .acc__body fade applies, under whichever of its two names the
   page's stylesheet uses. */
.pdp .acc__body {padding:0 22px 22px;font-size:17px;line-height:1.62;color:var(--ink-70)}

.pdp .acc__body p {margin:0 0 10px}

.pdp .acc__body p:last-child {margin-bottom:0}

.pdp .acc__note {margin-top:12px;padding-top:12px;border-top:1px solid var(--hairline);font-size:13.5px;color:var(--ink-50)}

@media(max-width:620px) {
  .pdp .stars {font-size:17px}
}

@media(max-width:620px) {
  .pdp .acc summary {padding:17px 18px;letter-spacing:.12em}
}

@media(max-width:620px) {
  .pdp .acc__body {padding:0 18px 18px}
}

.pdp .acc__body a {color:inherit;text-decoration:underline;text-underline-offset:2px}

.pdp .visually-hidden {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.pdp .a33-details .accordions {margin-top:18px;gap:12px}

.pdp .a33-details .acc {background:#fff;border:1px solid var(--hairline);border-radius:var(--r-md);box-shadow:0 2px 10px rgba(36,21,32,.04)}

.pdp .a33-details .acc summary {padding:22px 24px;font-size:clamp(17px,1.5vw,20px);font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink)}

/* One hairline, not a wine border plus a wine box-shadow on top of it: at two
   of them an opened panel read as an error state. The tinted summary row is
   what marks it open now. */
.pdp .a33-details .acc[open] {border-color:var(--hairline);box-shadow:none}

.pdp .acc__plus svg {width:22px;height:22px;stroke:var(--ink);stroke-width:2.2;fill:none;stroke-linecap:round}

.pdp .a33-details .acc[open] .acc__plus {transform:rotate(45deg)}

.pdp .a33-details .acc__body {padding:0 24px 22px}

@media(max-width:620px) {
  .pdp .a33-details .acc summary {padding:18px 18px;font-size:16px}
}

@media(max-width:620px) {
  .pdp .a33-details .acc__body {padding:0 18px 18px}
}

.pdp .trust {margin-top:18px;padding:clamp(22px,3vw,34px) clamp(18px,2.6vw,30px);border-radius:var(--r-xl);color:var(--on-dark);background:
  radial-gradient(120% 90% at 100% 0%,rgba(201,160,99,.28),transparent 55%),
  radial-gradient(90% 70% at 0% 100%,rgba(139,34,112,.55),transparent 60%),
  linear-gradient(160deg,var(--plum-700),var(--plum-900))}

.pdp .trust__title {margin:0 0 clamp(18px,2.4vw,26px);font-family:var(--font-display);font-size:clamp(26px,2.6vw,34px);font-weight:600;letter-spacing:-.01em;text-align:center;line-height:1.15}

.pdp .trust__hl {display:inline-block;padding:.02em .28em;border-radius:6px;background:var(--gold-ink);color:var(--gold-300)}

.pdp .trust__pillars {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}

.pdp .trust__pillar {display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;padding:22px 10px 20px;border:1px solid rgba(255,252,250,.28);border-radius:var(--r-lg);background:rgba(255,252,250,.06);text-align:center}

.pdp .trust__pillar svg {width:48px;height:48px;color:var(--cream)}

.pdp .trust__pillar span {font-family:var(--font-display);font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.35}

.pdp .trust__points {list-style:none;margin:clamp(20px,2.6vw,30px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 22px}

.pdp .trust__points li {display:flex;align-items:flex-start;gap:12px;font-family:var(--font-display);font-size:clamp(16px,1.35vw,18px);font-weight:600;line-height:1.3}

.pdp .trust__check {flex:none;width:24px;height:24px;margin-top:1px;color:var(--gold-300)}

@media(max-width:820px) {
  .pdp .trust__pillars {grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:480px) {
  .pdp .trust__points {grid-template-columns:1fr;gap:12px}
}

@media(max-width:480px) {
  .pdp .trust__title {font-size:24px}
}

.pdp .acc {overflow:hidden}

.pdp .acc.is-animating summary {pointer-events:none}

.pdp .acc__body {animation:none}

.pdp .story__rating .stars {font-size:17px;letter-spacing:.1em;color:var(--star,#FFA62B);line-height:1}

/* ============ BUY-BOX OVERRIDES ============
   From pdp/overrides.css in the handoff. These reach the theme's own markup
   rather than the exported sections, so they are deliberately specific.

   The savings countdown that file hides is already gone from this theme —
   removed outright, along with the timer that drove it — so its rule is not
   carried over. Nor is the FAQ's padding: the FAQ moved inside .bb-stack,
   which is already on the tighter rhythm. */

/* The exported accordions sit in the left column now, so it can be taller
   than the viewport. --g-top is set by a33-components.js. Desktop only: below
   1021px the theme stacks the buy box into one column and makes the gallery
   static, and this must not win there or the gallery scrolls over the tiers. */
@media (min-width: 1021px) {
  .pdp .gallery { position: sticky; top: var(--g-top, 24px); align-self: start; }
}

/* Less air under the buy box before the stack begins; the theme has 96px. */
.pdp { padding-bottom: 28px; }

  to   { opacity: 1; transform: none; }
}

.pdp .a33-details .acc[open] summary {background:var(--lilac-2)}

/* "左边展开最好也保持左右都能看到内容" — the accordions live in the left
   column, so opening one left the right half of the screen empty for a page
   and a half. The buy box now holds in view while that column scrolls past.
   Only above the breakpoint where the two are side by side. */
@media (min-width: 1021px) {
  .pdp .buybox {position:sticky;top:96px;align-self:start}
}