/* =============================================================================
   Packages chooser — /shop/packages/ (WP-16). Heritage Gold v2.1 canon,
   self-contained: local --op-* tokens mirror the shipped main-theme values and
   every --sys-* read carries a literal fallback, so the page is correct whether
   or not the WP-21 canon-token port (design-system-2.0/main.css) has landed
   shop-side. Primitives (.op-grain-layer, .op-eyebrow, .op-secnum, .op-pill*)
   are duplicated here from the main theme's classes.css because the shop fork
   does not ship that file.

   SD-QB-A11Y: CTA-on-gold fill is #9c6408 (AA ~4.9:1); #B7780D is decorative
   only, never body text.
   ============================================================================= */

.packages-page {
    --op-ink: var(--sys-color-ink, #231F19);
    --op-ink2: var(--sys-color-ink-deep, #15120D);
    --op-cream: var(--sys-color-cream, #F4EEE1);
    --op-cream2: var(--sys-color-cream-2, #EDE4D2);
    --op-kraft: #E8DCC0;
    --op-gold: #B7780D;                                  /* decorative only */
    --op-gold-cta: var(--sys-color-cta-gold, #9c6408);   /* AA behind white text */
    --op-gold-bright: #EBC65A;
    --op-gold-deep: #7a5c11;
    --op-goldb: #E0A92B;
    --op-terra: #9a3b1f;
    --op-body-warm: var(--sys-color-body-warm, #4a4439);
    --op-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    font-family: 'Lato', sans-serif;
    color: var(--op-ink);
}

.packages-page section[id] { scroll-margin-top: 84px; }

/* ---- texture layers ---- */
.packages-page .op-grain-layer { position:absolute; inset:0; background-image:var(--op-grain); background-size:180px; mix-blend-mode:overlay; opacity:.35; pointer-events:none; }
.packages-page .op-dots-gold { position:absolute; inset:0; background-image:radial-gradient(#EBC65A 1.2px, transparent 1.5px); background-size:10px 10px; mix-blend-mode:soft-light; opacity:.4; pointer-events:none; }

/* ---- type primitives ---- */
.packages-page .op-eyebrow { font-family:'Montserrat',sans-serif; font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.packages-page .op-secnum { font-family:'Montserrat',sans-serif; font-weight:800; font-size:46px; line-height:.8; color:var(--op-gold-deep); }
.packages-page .op-secnum--bronze { color:#7a5a2c; }

/* ---- pill primitives ---- */
.packages-page .op-pill { display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:9999px; font-family:'Montserrat',sans-serif; font-weight:800; font-size:14px; text-transform:uppercase; letter-spacing:.04em; text-decoration:none; cursor:pointer; min-height:48px; transition:transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease; }
.packages-page .op-pill--gold { background:var(--op-gold-cta); color:#fff; border:none; padding:14px 26px; box-shadow:0 10px 24px rgba(43,40,35,.18); }
.packages-page .op-pill--gold:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(43,40,35,.24); color:#fff; }
.packages-page .op-pill--outline-ink { background:transparent; color:var(--op-ink); border:1.5px solid rgba(35,31,25,.3); padding:13px 24px; }
.packages-page .op-pill--outline-ink:hover { background:var(--op-ink); color:#fff; }
.packages-page .op-pill:focus-visible { outline:3px solid #D8A81B; outline-offset:3px; }
.packages-page .op-pk-hero .op-pill:focus-visible { outline-color:#fff; }

/* ---- lift ---- */
.packages-page .op-lift { transition:transform .2s ease, box-shadow .2s ease; }

/* =============================== HERO (dark) =============================== */
.op-pk-hero { position:relative; overflow:hidden; background:linear-gradient(160deg, var(--op-ink2) 0%, #26201573 55%, var(--op-ink2) 100%), radial-gradient(ellipse at 70% 20%, rgba(235,198,90,.16), transparent 55%), var(--op-ink2); padding:132px 24px 56px; }
.op-pk-hero__inner { position:relative; z-index:2; max-width:880px; margin:0 auto; text-align:center; }
.op-pk-hero__eyebrow { color:var(--op-goldb); margin-bottom:14px; }
.op-pk-hero__h1 { margin:0 0 16px; font-family:'Montserrat',sans-serif; font-weight:800; letter-spacing:-.018em; font-size:clamp(2rem,5vw,3.15rem); line-height:1.05; color:var(--op-cream); }
.op-pk-hero__accent { display:block; font-family:'Playfair Display',Georgia,serif; font-style:italic; font-weight:500; font-size:.62em; color:var(--op-gold-bright); margin-top:8px; letter-spacing:0; }
.op-pk-hero__lead { margin:0 auto 22px; max-width:640px; font-size:clamp(1rem,.9rem + .25vw,1.125rem); line-height:1.65; color:rgba(244,238,225,.82); }

/* season-state ribbon (kraft chip; real data or the graceful default — no countdowns) */
.op-pk-ribbon { display:inline-flex; align-items:center; gap:9px; margin:0 0 10px; background:var(--op-kraft); color:var(--op-ink); border:1.5px dashed rgba(35,31,25,.4); border-radius:9999px; padding:9px 18px; font-family:'Montserrat',sans-serif; font-weight:800; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; }
.op-pk-ribbon__dot { width:8px; height:8px; border-radius:50%; background:var(--op-gold-cta); flex-shrink:0; }

.op-pk-lang { display:block; margin-top:12px; font-family:'Montserrat',sans-serif; font-weight:800; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,238,225,.6); text-decoration:none; }
.op-pk-lang:hover { color:var(--op-gold-bright); }

/* =============================== sections =============================== */
.op-pk-section { position:relative; padding:clamp(3rem,8vw,5rem) 24px; }
.op-pk-section--cream { background:var(--op-cream); }
.op-pk-section--cream2 { background:var(--op-cream2); }
.op-pk-wrap { max-width:980px; margin:0 auto; }
.op-pk-header { display:flex; align-items:flex-end; gap:18px; margin-bottom:34px; }
.op-pk-header__eyebrow { color:var(--op-terra); margin-bottom:6px; }
.op-pk-header__h2 { margin:0; font-family:'Montserrat',sans-serif; font-weight:800; letter-spacing:-.015em; font-size:clamp(1.6rem,4vw,2.5rem); line-height:1.06; color:var(--op-ink); }
.op-pk-header__note { margin:10px 0 0; font-size:.95rem; line-height:1.6; color:var(--op-body-warm); }

/* =============================== chooser =============================== */
/* progressive enhancement: chooser is JS-only; the month list is the no-JS page */
.op-chooser { display:none; }
.js .op-chooser { display:block; }
.js .op-fallback { display:none; }

.op-choice { border:none; margin:0 0 20px; padding:0; }
.op-choice legend { font-family:'Montserrat',sans-serif; font-weight:800; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--op-gold-deep); margin-bottom:10px; padding:0; }
.op-chip { display:inline-block; margin:0 8px 8px 0; }
.op-chip input { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.op-chip span { display:inline-flex; align-items:center; min-height:44px; padding:10px 18px; background:#fff; border:1.5px solid rgba(35,31,25,.25); border-radius:9999px; font-family:'Montserrat',sans-serif; font-weight:800; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--op-ink); cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease; }
.op-chip input:checked + span { background:var(--op-ink); border-color:var(--op-ink); color:#fff; }
.op-chip input:focus-visible + span { outline:3px solid #D8A81B; outline-offset:2px; }
.op-chip span:hover { border-color:var(--op-ink); }

/* ---- resolved luggage-tag card (canon §1.9: kraft, punch hole, perforation, stamp) ---- */
.op-tagcard { position:relative; max-width:560px; margin:38px auto 0; background:var(--op-kraft); border:1px solid rgba(35,31,25,.1); border-radius:20px; padding:36px 30px 28px; box-shadow:0 12px 30px rgba(43,40,35,.15); overflow:hidden; }
.op-tagcard:hover { transform:translateY(-5px); box-shadow:0 22px 48px rgba(43,40,35,.18); }
.op-tagcard__hole { position:absolute; left:50%; top:-2px; width:26px; height:26px; transform:translate(-50%,-55%); background:var(--op-cream); border:1.5px solid rgba(35,31,25,.16); border-radius:50%; }
.op-tagcard__head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:4px 0 0; }
.op-tagcard__name { margin:0; font-family:'Montserrat',sans-serif; font-weight:800; letter-spacing:-.01em; font-size:clamp(1.1rem,2.6vw,1.45rem); line-height:1.2; color:var(--op-ink); }
.op-tagcard__badge { background:var(--op-gold-deep); color:#fff; padding:5px 11px; font-family:'Montserrat',sans-serif; font-weight:800; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; box-shadow:0 8px 20px rgba(43,40,35,.18); flex-shrink:0; }
.op-tagcard__perf { border-top:2px dashed rgba(35,31,25,.4); margin:16px -30px; }
/* the resolved live Woo price — the ONLY rendered price on the page (OD-6) */
.op-tagcard__price { margin:0 0 6px; font-family:'Playfair Display',Georgia,serif; font-style:italic; font-weight:500; font-size:1.55rem; line-height:1.3; color:var(--op-ink); }
.op-tagcard__price del { opacity:.55; margin-right:10px; }
.op-tagcard__price ins { text-decoration:none; }
.op-tagcard__ref { margin:0 0 20px; font-size:.82rem; color:#574f42; }
.op-tagcard__ref a { color:var(--op-gold-deep); }
.op-tagcard__ctas { display:flex; flex-wrap:wrap; gap:12px; }
.op-tagcard__ctas .op-pill { flex:1 1 220px; }
.op-tagcard__quiet { display:inline-block; margin-top:14px; font-size:.9rem; color:var(--op-gold-deep); text-decoration:underline; }
.op-tagcard__quiet:hover { color:var(--op-ink); }

.op-pk-unavailable { max-width:560px; margin:32px auto 0; background:#fff; border-left:4px solid var(--op-terra); padding:16px 18px; font-size:.95rem; line-height:1.6; color:var(--op-body-warm); }

/* =============================== no-JS list =============================== */
.op-pk-month { margin:30px 0 12px; font-family:'Montserrat',sans-serif; font-weight:800; letter-spacing:-.01em; font-size:1.25rem; color:var(--op-ink); border-bottom:2px dashed rgba(35,31,25,.3); padding-bottom:8px; }
.op-pk-list { list-style:none; margin:0; padding:0; }
.op-pk-list li { padding:7px 0; border-bottom:1px solid rgba(35,31,25,.08); }
.op-pk-list a { font-size:.98rem; color:var(--op-ink); text-decoration:none; }
.op-pk-list a:hover { color:var(--op-gold-deep); text-decoration:underline; }

/* =============================== responsive =============================== */
@media (max-width:600px) {
    .op-pk-hero { padding:112px 18px 44px; }
    .op-pk-section { padding-left:18px; padding-right:18px; }
    .op-pk-header { gap:12px; }
    .op-pk-header .op-secnum { font-size:34px; }
    .op-tagcard { padding:32px 22px 24px; }
    .op-tagcard__perf { margin-left:-22px; margin-right:-22px; }
    .op-tagcard__ctas .op-pill { flex:1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .packages-page .op-pill, .packages-page .op-lift, .op-tagcard, .op-chip span { transition:none; }
    .op-tagcard:hover { transform:none; }
}