/* ==========================================================
   NISSI — account, favorites, cart, checkout, about, contacts
   ========================================================== */

/* ---------- forms ---------- */
.field{display:grid;gap:.45rem;margin-bottom:1.15rem}
.field>label,.field__label{font-size:.9375rem;font-weight:500}
.field__row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.field input,.field textarea,.field select{width:100%;min-height:52px;padding:0 1rem;font:inherit;color:var(--ink);background:#fff;border:1px solid #aab6b0;border-radius:0;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%2310201b' stroke-width='1.2'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.4rem}
.field textarea{padding:.9rem 1rem;min-height:160px;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:#7b8984}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.field.is-invalid input,.field.is-invalid textarea,.field.is-invalid select{border-color:#a3263f;box-shadow:0 0 0 1px #a3263f}
.field__hint{font-size:.875rem;color:var(--muted)}
.field__error{font-size:.875rem;color:#a3263f;min-height:0}
.field__error:empty{display:none}
.field__error::before{content:"";display:inline-block;width:.9em;height:.9em;margin-right:.4em;vertical-align:-.1em;background:#a3263f;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22L12 2Zm1 15h-2v-2h2v2Zm0-4h-2V9h2v4Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22L12 2Zm1 15h-2v-2h2v2Zm0-4h-2V9h2v4Z'/%3E%3C/svg%3E") center/contain no-repeat}
.pw{position:relative}
.pw input{padding-right:5.4rem}
.pw button{position:absolute;right:4px;top:4px;bottom:4px;padding:0 1rem;font-size:.875rem;font-weight:500;color:var(--accent)}
.pw button:hover{text-decoration:underline;text-underline-offset:4px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.form-msg{padding:.95rem 1.1rem;border:1px solid;margin-bottom:1.3rem;font-size:.9375rem}
.form-msg[hidden]{display:none}
.form-msg--ok{border-color:var(--accent);background:#edf4f0}
.form-msg--err{border-color:#a3263f;background:#fbeff1;color:#7d1a2e}
.form-msg a{text-decoration:underline;text-underline-offset:4px}
.btn--block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.form-note{margin-top:1.2rem;font-size:.875rem;color:var(--muted)}

/* ---------- account pages: photo + form ---------- */
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:calc(100svh - var(--header-h) - 42px)}
.auth__media{position:relative;background:var(--bg-deep);overflow:hidden}
.auth__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.auth__panel{display:flex;align-items:center;justify-content:center;padding:clamp(32px,6vw,96px) var(--gutter)}
.auth__card{width:min(440px,100%)}
.auth h1{font-size:clamp(2.2rem,3.6vw,3.25rem);margin-bottom:.6rem}
.auth__lead{color:var(--muted);font-size:1.0625rem;margin-bottom:2rem}
.auth__alt{margin-top:1.6rem;text-align:center;color:var(--muted)}
.auth__alt a{color:var(--ink)}
.auth .btn{margin-top:.4rem}

/* ---------- page banner (about, contacts) ---------- */
.banner{position:relative;display:grid;place-items:center;text-align:center;min-height:clamp(220px,22vw,340px);color:#fff;overflow:hidden;background:var(--bg-void)}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner::after{content:"";position:absolute;inset:0;background:rgba(11,63,51,.5)}
.banner__text{position:relative;z-index:1;padding:clamp(28px,4vw,56px) var(--gutter)}
.banner h1{font-size:clamp(2.4rem,5vw,4.25rem);margin-bottom:.7rem}
.banner p{max-width:46ch;margin:0 auto;font-size:1.125rem;color:#eef3ef}

/* ---------- about ---------- */
.about-founder{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,112px);align-items:center;padding-block:clamp(56px,8vw,112px)}
.about-founder__photo{position:relative;aspect-ratio:4/5;background:var(--bg-deep);overflow:hidden}
.about-founder__photo img{width:100%;height:100%;object-fit:cover}
.about-founder__photo figcaption{position:absolute;left:0;bottom:0;padding:1rem 1.2rem;background:rgba(250,250,247,.94);font-size:.9375rem}
.about-founder__photo figcaption b{display:block;font-size:1.0625rem;font-weight:500}
.about-founder h2{margin-bottom:1.4rem}
.about-founder p{max-width:58ch;margin-bottom:1.1rem;font-size:1.125rem;line-height:1.75;color:#2f3d37}
.about-quote{margin-top:1.8rem;padding-left:1.4rem;border-left:2px solid var(--gold);font-size:1.375rem;font-weight:300;line-height:1.45;max-width:46ch}
.about-mission{padding-block:clamp(64px,9vw,136px);text-align:center;border-top:1px solid var(--line)}
.about-mission h2{margin-bottom:1.4rem}
.about-mission p{max-width:60ch;margin:0 auto 1.1rem;font-size:1.25rem;line-height:1.7;font-weight:300}
.about-values{background:var(--bg-deep);border-block:1px solid var(--line);padding-block:clamp(56px,8vw,112px)}
.about-values h2{margin-bottom:clamp(28px,4vw,56px)}
.about-values ul{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px)}
.about-values li{padding-top:1.4rem;border-top:1px solid var(--gold)}
.about-values h3{font-size:1.75rem;margin-bottom:.7rem}
.about-values p{color:#3d4a44;max-width:36ch}
.about-cta{padding-block:clamp(56px,8vw,104px);text-align:center}
.about-cta h2{margin-bottom:1.6rem}

/* ---------- contacts ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);padding-block:clamp(48px,7vw,96px);align-items:start}
.card{background:#fff;border:1px solid var(--line-soft);padding:clamp(24px,3vw,44px)}
.card h2{font-size:clamp(1.7rem,2.6vw,2.25rem);margin-bottom:.5rem}
.card__lead{color:var(--muted);margin-bottom:1.8rem}
.contact-list li{display:grid;grid-template-columns:auto 1fr auto;gap:0 1rem;align-items:center;padding:1rem 0;border-top:1px solid var(--line-soft)}
.contact-list li:first-child{border-top:0}
.contact-list svg{color:var(--gold)}
.contact-list .label{display:block;font-size:.875rem;color:var(--muted)}
.contact-list .value{display:block;font-size:1.0625rem;font-weight:500;overflow-wrap:anywhere}
.contact-list a.act{font-size:.9375rem;font-weight:500}
.contact-list a.act:hover{color:var(--accent-hi)}
.contact-list .social{display:flex;gap:1.2rem}

/* ---------- favorites ---------- */
.page-top{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding-block:clamp(32px,5vw,64px) clamp(20px,3vw,36px)}
.page-top h1{font-size:clamp(2.4rem,4.4vw,4rem)}
.page-top p{color:var(--muted);font-size:1.0625rem;margin-top:.4rem}
.empty-state{text-align:center;padding:clamp(56px,9vw,128px) 0}
.empty-state svg{color:var(--gold);margin:0 auto 1.4rem}
.empty-state h2{margin-bottom:.7rem}
.empty-state p{color:var(--muted);max-width:42ch;margin:0 auto 1.8rem}
.fav-wrap{padding-bottom:clamp(56px,8vw,112px)}

/* ---------- cart + checkout ---------- */
.steps{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;padding-top:clamp(24px,3vw,40px);font-size:.9375rem;color:var(--muted);list-style:none}
.steps li{display:flex;align-items:center;gap:.6rem}
.steps li+li::before{content:"";width:28px;height:1px;background:var(--line)}
.steps [aria-current=step]{color:var(--ink);font-weight:500}
.shop-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,420px);gap:clamp(32px,5vw,88px);align-items:start;padding-block:clamp(24px,3vw,40px) clamp(56px,8vw,112px)}
.stepper{display:inline-grid;grid-template-columns:44px 44px 44px;align-items:center;border:1px solid #aab6b0;text-align:center}
.stepper button{height:44px;display:grid;place-items:center;color:var(--accent)}
.stepper button:hover:not(:disabled){background:var(--bg-deep)}
.stepper button:disabled{opacity:.3;cursor:default}
.stepper output{font-variant-numeric:tabular-nums;font-weight:500}
.link-btn{font-size:.9375rem;color:var(--muted)}
.link-btn:hover{color:var(--ink)}
.summary{position:sticky;top:calc(var(--header-h) + 24px);background:#fff;border:1px solid var(--line-soft);padding:clamp(22px,2.4vw,34px)}
.summary h2{font-size:1.75rem;margin-bottom:1.2rem}
.summary dl{display:grid;gap:.8rem}
.summary dl>div{display:flex;justify-content:space-between;gap:1rem}
.summary dt{color:var(--muted)}
.summary dd{font-variant-numeric:tabular-nums;text-align:right}
.summary .total{margin-top:.4rem;padding-top:1.1rem;border-top:1px solid var(--line-soft);font-size:1.25rem}
.summary .total dt{color:var(--ink)}
.summary .total dd{font-weight:500}
.summary .btn{margin-top:1.4rem}
.summary__more{display:block;margin-top:1.1rem;text-align:center}
.summary__note{margin-top:1rem;font-size:.875rem;color:var(--muted)}
.mini-lines{margin-bottom:1.4rem;border-bottom:1px solid var(--line-soft)}
.mini-line{display:grid;grid-template-columns:64px 1fr auto;gap:1rem;align-items:center;padding:.8rem 0}
.mini-line__img{position:relative;aspect-ratio:1;background:var(--case)}
.mini-line__img img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.mini-line__img span{position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;border-radius:11px;background:var(--accent);color:#fff;font-size:.75rem;line-height:22px;text-align:center;font-weight:600}
.mini-line b{display:block;font-weight:500}
.mini-line small{color:var(--muted);font-size:.875rem}

.co-section{padding:clamp(20px,2.4vw,32px) 0;border-top:1px solid var(--line-soft)}
.co-section:first-of-type{border-top:0;padding-top:0}
.co-section h2{font-size:1.625rem;margin-bottom:1.2rem}
.pay-option{display:flex;align-items:center;gap:.8rem;padding:1rem 1.1rem;border:1px solid var(--accent);background:#f4f8f6;margin-bottom:1.2rem}
.pay-option svg{color:var(--accent)}
.pay-note{padding:.9rem 1.1rem;border:1px dashed var(--gold);background:#fbf8ef;font-size:.9375rem;margin-bottom:1.2rem}

.confirm{max-width:760px;margin:0 auto;text-align:center;padding-block:clamp(48px,8vw,112px)}
.confirm__icon{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;border:1px solid var(--accent);color:var(--accent);margin:0 auto 1.6rem}
.confirm h1{font-size:clamp(2.2rem,4vw,3.5rem);margin-bottom:.8rem}
.confirm p{color:var(--muted);font-size:1.125rem}
.confirm__no{display:inline-block;margin:1.4rem 0;padding:.7rem 1.4rem;border:1px solid var(--line);font-weight:500;letter-spacing:.06em}
.confirm .summary{text-align:left;position:static;margin:2rem 0}
.confirm__actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .auth{grid-template-columns:1fr}
  .auth__media{display:none}
  .about-founder,  .about-founder__photo{max-width:480px}
    .about-values ul{grid-template-columns:1fr}
  .summary{position:static}
  /* cart / checkout: one column (the fixed 320px+ summary column used to push the totals over the items) */
  .shop-layout{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .grid-2{grid-template-columns:1fr}
  .contact-list li{grid-template-columns:auto 1fr}
  .contact-list li>.act-cell{grid-column:2}
}