/* ============================================================
   Components — buttons, tags, cards, forms, header, footer
   ============================================================ */

/* ---------------- Buttons ---------------- */
.btn{
  --bg:var(--green-700); --fg:#fff; --bd:transparent;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.95em 1.7em;border-radius:var(--r-pill);
  background:var(--bg);color:var(--fg);border:1.5px solid var(--bd);
  font-family:var(--font-ui);font-size:var(--step--1);font-weight:600;letter-spacing:.01em;
  line-height:1;cursor:pointer;overflow:hidden;isolation:isolate;
  transition:transform var(--t-med) var(--e-out),box-shadow var(--t-med) var(--e-out),
             background var(--t-med) var(--e-out),color var(--t-med) var(--e-out);
  will-change:transform;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--green-900);
  transform:translateY(101%);transition:transform var(--t-med) var(--e-out);
}
.btn:hover::before{transform:translateY(0)}
.btn:hover{box-shadow:var(--sh-green)}
.btn:active{transform:scale(.97)}
.btn .ico{width:1.15em;height:1.15em;flex:none;transition:transform var(--t-med) var(--e-out)}
.btn:hover .ico{transform:translateX(3px)}

.btn--gold{--bg:var(--gold-500);--fg:var(--navy-900)}
.btn--gold::before{background:var(--gold-600)}
.btn--gold:hover{box-shadow:var(--sh-gold)}
.btn--ghost{--bg:transparent;--fg:var(--navy-800);--bd:var(--navy-800)}
.btn--ghost::before{background:var(--navy-800)}
.btn--ghost:hover{color:#fff}
.btn--ghost-light{--bg:transparent;--fg:var(--cream);--bd:rgba(251,248,241,.4)}
.btn--ghost-light::before{background:var(--cream)}
.btn--ghost-light:hover{color:var(--green-900)}
.btn--wa{--bg:#25D366;--fg:#06331A}
.btn--wa::before{background:#1FB855}
.btn--sm{padding:.7em 1.25em;font-size:var(--step--2)}
.btn--lg{padding:1.15em 2.2em;font-size:var(--step-0)}
.btn--block{display:flex;width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}

/* Text link with underline sweep */
.link{
  position:relative;font-weight:600;font-size:var(--step--1);
  display:inline-flex;align-items:center;gap:.45em;color:var(--navy-800);
}
.link::after{
  content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1.5px;
  background:currentColor;transform-origin:right;transform:scaleX(1);
  transition:transform var(--t-med) var(--e-out);
}
.link:hover::after{transform:scaleX(0);transform-origin:left}

/* ---------------- Tags / badges ---------------- */
.tag{
  display:inline-flex;align-items:center;gap:.4em;
  padding:.42em .85em;border-radius:var(--r-pill);
  font-size:var(--step--2);font-weight:600;letter-spacing:.02em;
  background:var(--green-100);color:var(--green-700);
}
.tag--gold{background:var(--gold-200);color:var(--gold-700)}
.tag--sale{background:var(--sale);color:#fff}
.tag--out{background:var(--line);color:var(--fg-mute)}
.pill{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.55em 1.05em;border-radius:var(--r-pill);
  background:var(--paper);border:1px solid var(--border);
  font-size:var(--step--1);font-weight:500;box-shadow:var(--sh-xs);
}

/* ---------------- Cards ---------------- */
.card{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  overflow:hidden;transition:transform var(--t-med) var(--e-out),box-shadow var(--t-med) var(--e-out),
                             border-color var(--t-med) var(--e-out);
}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:var(--line)}

/* Product card */
.pcard{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  overflow:hidden;isolation:isolate;
  transition:transform var(--t-med) var(--e-out),box-shadow var(--t-med) var(--e-out),border-color var(--t-med) var(--e-out);
}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:var(--green-300)}
.pcard__media{position:relative;aspect-ratio:1;background:var(--cream-alt);overflow:hidden}
.pcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .75s var(--e-out)}
.pcard:hover .pcard__media img{transform:scale(1.06)}
.pcard__body{display:flex;flex-direction:column;gap:.35rem;padding:1.05rem 1.15rem 1.25rem;flex:1}
.pcard__top{display:flex;align-items:center;gap:.55rem}
.pcard__cat{font-size:var(--step--2);color:var(--green-600);font-weight:600;margin-right:auto}
.pcard__rate{display:inline-flex;align-items:center;gap:.28em;font-size:var(--step--2);font-weight:700;color:var(--navy-800)}
.pcard__rate svg{width:.95em;height:.95em;color:var(--star)}
/* Wishlist sits in the body, not over the artwork — the pack-shot
   creatives already carry their own titles and quality seals. */
.pcard__wish{
  width:1.9rem;height:1.9rem;display:grid;place-items:center;border-radius:50%;flex:none;
  color:var(--fg-mute);position:relative;z-index:2;
  transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--e-spring);
}
.pcard__wish:hover{background:var(--green-50);color:var(--green-700);transform:scale(1.1)}
.pcard__wish[aria-pressed="true"]{color:var(--sale)}
.pcard__wish[aria-pressed="true"] svg{fill:currentColor}
.pcard__wish svg{width:1.05rem;height:1.05rem}
.pcard__tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.15rem}
.pcard__off{font-size:var(--step--2);font-weight:700;color:var(--sale)}
.pcard__name{font-family:var(--font-display);font-size:var(--step-1);font-weight:600;color:var(--navy-800);letter-spacing:-.015em;line-height:1.22}
.pcard__name a::after{content:"";position:absolute;inset:0;z-index:1}
.pcard__size{font-size:var(--step--2);color:var(--fg-mute)}
.pcard__foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:auto;padding-top:.7rem}
.pcard__price{display:flex;align-items:baseline;gap:.45em}
.pcard__price b{font-size:var(--step-1);font-family:var(--font-ui);font-weight:700;color:var(--navy-800);letter-spacing:-.02em}
.pcard__price s{font-size:var(--step--2);color:var(--fg-mute)}
.pcard__add{
  position:relative;z-index:2;display:inline-flex;align-items:center;gap:.45em;
  padding:.62em 1.05em;border-radius:var(--r-pill);
  background:var(--green-100);color:var(--green-700);
  font-size:var(--step--2);font-weight:700;
  transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--e-spring);
}
.pcard__add:hover{background:var(--green-700);color:#fff}
.pcard__add:active{transform:scale(.94)}
.pcard__add svg{width:1em;height:1em}
.pcard__add.is-added{background:var(--green-700);color:#fff}

/* ---------------- Forms ---------------- */
.field{display:grid;gap:.45rem}
.field label{font-size:var(--step--1);font-weight:600;color:var(--navy-800)}
.field .req{color:var(--sale)}
.input,.select,.textarea{
  width:100%;padding:.92em 1.1em;border-radius:var(--r-sm);
  background:var(--paper);border:1.5px solid var(--border);color:var(--fg);
  font-size:var(--step--1);
  transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
}
.input::placeholder,.textarea::placeholder{color:var(--fg-mute)}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--green-600);box-shadow:0 0 0 4px var(--green-100);
}
.textarea{min-height:8rem;resize:vertical;line-height:1.6}
.select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%234A524E' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.05em center;background-size:.7em;
  padding-right:2.6em;
}
.field-err{font-size:var(--step--2);color:var(--sale);display:none}
.field.is-invalid .input,.field.is-invalid .textarea,.field.is-invalid .select{border-color:var(--sale)}
.field.is-invalid .field-err{display:block}

/* Quantity stepper */
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--border);border-radius:var(--r-pill);background:var(--paper);overflow:hidden}
.qty button{width:2.5rem;height:2.5rem;display:grid;place-items:center;color:var(--navy-800);transition:background var(--t-fast)}
.qty button:hover{background:var(--green-100)}
.qty input{width:2.6rem;text-align:center;border:0;background:none;font-weight:700;font-size:var(--step--1);-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ---------------- Stars ---------------- */
.stars{display:inline-flex;gap:.1em;color:var(--star)}
.stars svg{width:1em;height:1em}

/* ---------------- Accordion ---------------- */
.acc{border-top:1px solid var(--border)}
.acc__item{border-bottom:1px solid var(--border)}
.acc__btn{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:1.4rem 0;text-align:left;
  font-family:var(--font-display);font-size:var(--step-1);font-weight:600;color:var(--navy-800);
  transition:color var(--t-fast);
}
.acc__btn:hover{color:var(--green-600)}
.acc__ico{flex:none;width:1.6rem;height:1.6rem;margin-top:.15rem;position:relative}
.acc__ico::before,.acc__ico::after{
  content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:2px;
  transform:translate(-50%,-50%);transition:transform var(--t-med) var(--e-out),opacity var(--t-med);
}
.acc__ico::before{width:1rem;height:1.8px}
.acc__ico::after{width:1.8px;height:1rem}
.acc__item.is-open .acc__ico::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.acc__panel{overflow:hidden;height:0}
.acc__panel>div{padding-bottom:1.5rem;color:var(--fg-soft);max-width:62ch}

/* ---------------- Breadcrumb ---------------- */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.55em;font-size:var(--step--1);color:var(--fg-mute)}
.crumb a:hover{color:var(--green-600)}
.crumb span[aria-current]{color:var(--navy-800);font-weight:600}
.crumb .sep{opacity:.5}

/* ---------------- Page hero (inner pages) ---------------- */
.phero{position:relative;padding-block:clamp(3rem,2rem + 5vw,6rem) clamp(2.5rem,2rem + 3vw,4rem);background:var(--cream-alt);overflow:hidden}
.phero__inner{position:relative;z-index:2;display:grid;gap:.9rem;justify-items:center;text-align:center}
.phero h1{font-size:var(--step-6)}
.phero__deco{position:absolute;inset:0;z-index:1;opacity:.5;pointer-events:none}

/* ---------------- Marquee ---------------- */
.marquee{overflow:hidden;position:relative;display:flex}
.marquee__track{display:flex;flex:none;gap:3.5rem;padding-right:3.5rem;align-items:center;will-change:transform}
.marquee__item{display:inline-flex;align-items:center;gap:.8rem;white-space:nowrap;
  font-family:var(--font-display);font-size:var(--step-3);font-weight:600;letter-spacing:-.02em}
.marquee__dot{width:.5em;height:.5em;border-radius:50%;background:var(--gold-500);flex:none}

/* ---------------- Toast ---------------- */
.toasts{position:fixed;right:1.25rem;bottom:1.25rem;z-index:1200;display:grid;gap:.6rem;pointer-events:none}
.toast{
  display:flex;align-items:center;gap:.75rem;padding:.9rem 1.15rem;border-radius:var(--r-md);
  background:var(--navy-900);color:var(--cream);box-shadow:var(--sh-lg);
  font-size:var(--step--1);font-weight:500;pointer-events:auto;max-width:22rem;
}
.toast svg{width:1.15rem;height:1.15rem;flex:none;color:var(--green-300)}

/* ---------------- Skip link ---------------- */
.skip{position:absolute;left:1rem;top:-4rem;z-index:2000;padding:.8rem 1.2rem;border-radius:var(--r-sm);
  background:var(--navy-900);color:#fff;font-weight:600;transition:top var(--t-med) var(--e-out)}
.skip:focus{top:1rem}