/* ============================================================
   GRAINATION — FULL FRAME v4 · UTILITY LAYER
   Commerce / account / auth / policy. Functional-first:
   compact headers (no giant FH Lecturis on purchase/account flow),
   clean forms, WooCommerce-safe structure. Tokens from fullframe.css.
   ============================================================ */

/* ---- compact page header (replaces giant hero on utility pages) ---- */
.util-head{background:var(--bone);color:var(--ink);padding:calc(var(--headh) + clamp(30px,5vw,60px)) 0 clamp(24px,3vw,40px);border-bottom:1px solid var(--line);}
.util-crumb{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin:0 0 16px;}
.util-crumb a{color:var(--mut);}.util-crumb a:hover{color:var(--cobalt);}.util-crumb .sep{margin:0 8px;opacity:.5;}
.util-crumb .cur{color:var(--ink);}
.util-head h1{font-family:var(--grot);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.92;
  font-size:clamp(34px,5vw,58px);margin:0;}
.util-head .lead{max-width:60ch;margin:16px 0 0;font-size:clamp(15px,1.5vw,17px);line-height:1.55;color:#3a3a38;}
.util-steps{display:flex;align-items:center;gap:10px;margin-top:22px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);}
.util-steps .stp.on{color:var(--cobalt);}
.util-steps .stp.on::before{content:"● ";}
.draft-note{margin-top:20px;display:inline-block;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--acid);background:var(--void);padding:10px 15px;border-radius:2px;}
.util-body{padding:clamp(30px,5vw,64px) 0 clamp(48px,7vw,96px);}

/* ---- WooCommerce notices (never remove; just styled) ---- */
.wc-notice{border:1.5px solid var(--ink);padding:14px 18px;margin:0 0 18px;font-size:14px;line-height:1.5;background:var(--paper);}
.wc-notice.info{border-color:var(--cobalt);}
.wc-notice.success{border-color:#1F8A5B;}
.wc-notice.error{border-color:#EA3A17;}
.wc-notice b{font-weight:700;}

/* ---- 2-col commerce layout (main + sticky summary) ---- */
.util-2col{display:grid;grid-template-columns:1fr 360px;gap:clamp(24px,3vw,52px);align-items:start;}
.util-2col>*{min-width:0;}
@media(max-width:900px){.util-2col{grid-template-columns:1fr;}}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:12px;
  border-bottom:1.5px solid var(--ink);margin-bottom:4px;}
.sec-h h2{font-family:var(--grot);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(18px,2vw,24px);margin:0;}
.sec-h .n{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);}

/* ---- cart lines ---- */
.cart-line{display:grid;grid-template-columns:88px 1fr auto;gap:18px;padding:20px 0;border-bottom:1.5px solid var(--line);align-items:start;}
.cart-line .ci{width:88px;height:88px;background:var(--bone);border:1px solid var(--line);overflow:hidden;}
.cart-line .ci image-slot{width:100%;height:100%;}
.cart-line .cat{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt);}
.cart-line .nm{font-family:var(--grot);font-weight:700;letter-spacing:-.01em;font-size:17px;margin:4px 0 2px;}
.cart-line .opt{font-size:13px;color:#666;margin:0 0 10px;}
.cart-line .rm{background:none;border:0;padding:0;cursor:pointer;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);}
.cart-line .rm:hover{color:#EA3A17;}
.cart-line .cr{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:12px;}
.cart-line .price{font-family:var(--grot);font-weight:900;font-size:18px;letter-spacing:-.02em;}
.qstep{display:inline-flex;align-items:center;border:1.5px solid var(--ink);}
.qstep button{width:34px;height:36px;background:var(--paper);border:0;font-size:16px;cursor:pointer;font-family:var(--mono);}
.qstep .qv{width:40px;text-align:center;font-family:var(--grot);font-weight:900;font-size:15px;}
.cart-actions{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:20px;}
.cart-actions .cont{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);}
.cart-actions .cont:hover{color:var(--cobalt);}
.cart-actions .n{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);}

/* ---- order summary card ---- */
.sum-card{position:sticky;top:calc(var(--headh) + 16px);border:1.6px solid var(--ink);background:var(--paper);}
.sum-card .mast{display:flex;justify-content:space-between;background:var(--ink);color:#fff;padding:10px 16px;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
.sum-card .mast .acid{color:var(--acid);}
.sum-card .top{padding:16px 18px 4px;font-family:var(--grot);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:18px;}
.sum-card .body{padding:8px 18px 16px;}
.sum-mini{margin-bottom:12px;display:grid;gap:10px;}
.sum-mini .it{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;}
.sum-mini .im{position:relative;width:34px;height:34px;background:var(--bone);border:1px solid var(--line);}
.sum-mini .im .q{position:absolute;top:-7px;right:-7px;width:17px;height:17px;background:var(--cobalt);color:#fff;
  border-radius:50%;font-family:var(--mono);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.sum-mini .nm{font-size:13px;font-weight:600;line-height:1.2;}.sum-mini .nm .o{display:block;font-weight:400;color:#777;font-size:11px;}
.sum-mini .pr{font-family:var(--grot);font-weight:700;font-size:14px;}
.sline{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px;}
.sline span{color:var(--mut);}.sline b{font-weight:700;}
.sline.free b{color:#1F8A5B;}
.coupon{display:flex;gap:8px;margin:12px 0;}
.coupon input{flex:1;border:1.5px solid var(--line);background:var(--paper);padding:10px 12px;font-family:inherit;font-size:13px;}
.coupon button{border:1.5px solid var(--ink);background:var(--paper);padding:0 16px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;}
.stotal{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0 2px;}
.stotal .l{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);}
.stotal .v{font-family:var(--grot);font-weight:900;font-size:30px;letter-spacing:-.02em;}
.stotal .v small{font-size:16px;color:var(--mut);}
.sum-card .sfoot{padding:0 18px 18px;}
.sum-card .sfoot .qc{width:100%;justify-content:center;}
.trust{display:grid;gap:6px;margin-top:14px;}
.trust .t{font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);display:flex;align-items:center;gap:7px;}
.trust .t .dot{width:6px;height:6px;background:var(--cobalt);border-radius:50%;}

/* ---- forms ---- */
.co-form{display:flex;flex-direction:column;gap:clamp(28px,3.4vw,44px);}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px;}
@media(max-width:480px){.field-grid{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:6px;}
.field.full{grid-column:1 / -1;}
.field label{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);}
.field .req{color:var(--red,#C0392B);}
.field input,.field textarea,.field select{border:1.5px solid var(--line);background:var(--paper);padding:12px 14px;font-family:inherit;font-size:15px;width:100%;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--cobalt);}
.field textarea{min-height:96px;resize:vertical;}
.co-toggle{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:480px){.co-toggle{grid-template-columns:1fr;}}
.co-toggle .opt{text-align:left;border:1.6px solid var(--line);background:var(--paper);padding:15px 16px;cursor:pointer;display:flex;flex-direction:column;gap:3px;}
.co-toggle .opt.sel{border-color:var(--cobalt);box-shadow:inset 0 0 0 1px var(--cobalt);background:#fff;}
.co-toggle .ot{font-family:var(--grot);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;font-size:16px;}
.co-toggle .od{font-size:12.5px;color:#666;}
.co-pay{display:grid;gap:10px;}
.co-pay .row{display:flex;align-items:center;gap:12px;border:1.6px solid var(--line);background:var(--paper);padding:14px 16px;cursor:pointer;}
.co-pay .row.sel{border-color:var(--cobalt);box-shadow:inset 0 0 0 1px var(--cobalt);background:#fff;}
.co-pay .rd{width:16px;height:16px;border:1.5px solid var(--mut);border-radius:50%;flex:none;position:relative;}
.co-pay .row.sel .rd{border-color:var(--cobalt);}
.co-pay .row.sel .rd::after{content:"";position:absolute;inset:3px;background:var(--cobalt);border-radius:50%;}
.co-pay .pl{font-weight:700;font-size:15px;}.co-pay .pd{font-size:12.5px;color:#666;}
.co-agree{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:#4a4a46;}
.co-agree input{margin-top:2px;}

/* ---- account ---- */
.acct-grid{display:grid;grid-template-columns:240px 1fr;gap:clamp(24px,3vw,48px);align-items:start;}
@media(max-width:860px){.acct-grid{grid-template-columns:1fr;}}
.acct-nav{border:1.5px solid var(--line);background:var(--paper);position:sticky;top:calc(var(--headh) + 16px);}
.acct-nav .who{padding:16px 18px;border-bottom:1.5px solid var(--line);}
.acct-nav .who .hi{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);display:block;}
.acct-nav .who .nm{font-family:var(--grot);font-weight:900;font-size:18px;letter-spacing:-.01em;}
.acct-nav a{display:flex;align-items:center;gap:12px;padding:12px 18px;font-size:14px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line);}
.acct-nav a .ic{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--mut);width:16px;}
.acct-nav a.on{background:var(--bone);color:var(--cobalt);}.acct-nav a.on .ic{color:var(--cobalt);}
.acct-nav a:hover{background:var(--bone);}
.acct-nav a.out{color:var(--mut);}
.acct-main h2{font-family:var(--grot);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(24px,3vw,36px);margin:0 0 6px;}
.acct-main .sub{color:#4a4a46;font-size:15px;margin:0 0 26px;}
.acct-cards{display:flex;flex-wrap:wrap;gap:1.5px;background:var(--line);border:1.5px solid var(--line);margin-top:6px;}
.acct-cards>*{flex:1 1 220px;min-width:0;}
.acct-card{background:var(--paper);padding:20px;display:flex;flex-direction:column;gap:6px;}
.acct-card:hover{background:var(--bone);}
.acct-card .ic{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--cobalt);}
.acct-card h3{font-family:var(--grot);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;font-size:18px;margin:2px 0;}
.acct-card p{font-size:13px;color:#4a4a46;margin:0;flex:1;line-height:1.5;}
.acct-card .go{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-top:8px;}
.acct-card:hover .go{color:var(--cobalt);}
.acct-orders{border-top:1.5px solid var(--ink);margin-top:4px;}
.acct-order{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1.5px solid var(--line);}
.acct-order .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);display:block;}
.acct-order .v{font-weight:700;font-size:14px;}
.acct-order .badge{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;}
.acct-order .badge.proc{background:rgba(0,91,255,.1);color:var(--cobalt);}
.acct-order .badge.done{background:rgba(31,138,91,.12);color:#1F8A5B;}
.acct-reminders{display:grid;grid-template-columns:1fr 1fr;gap:1.5px;background:var(--line);border:1.5px solid var(--line);margin-top:6px;}
.acct-reminders .rm{background:var(--paper);padding:18px;display:flex;gap:14px;}
.acct-reminders .rm .n{font-family:var(--disp);font-size:24px;line-height:1;color:var(--cobalt);}
.acct-reminders .rm p{margin:0;font-size:13.5px;line-height:1.55;color:#4a4a46;}
@media(max-width:560px){.acct-reminders{grid-template-columns:1fr;}.acct-order{grid-template-columns:1fr 1fr;}}

/* ---- auth (login / register / lost) ---- */
.auth{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;}
@media(max-width:820px){.auth{grid-template-columns:1fr;}.auth-visual{display:none;}}
.auth-visual{position:relative;background:var(--void);overflow:hidden;}
.auth-visual image-slot{position:absolute;inset:0;width:100%;height:100%;}
.auth-visual .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,11,.3),rgba(11,11,11,.75));}
.auth-visual .vcap{position:absolute;left:0;right:0;bottom:0;padding:clamp(28px,4vw,52px);color:#fff;z-index:2;}
.auth-visual .vk{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acid);}
.auth-visual h2{font-family:var(--grot);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.95;font-size:clamp(28px,3.4vw,44px);margin:12px 0 8px;}
.auth-visual p{max-width:36ch;font-size:15px;line-height:1.5;color:rgba(255,255,255,.75);margin:0;}
.auth-form{display:flex;flex-direction:column;justify-content:center;padding:calc(var(--headh) + 24px) clamp(24px,5vw,80px) 48px;}
.auth-form .brand-mk{height:22px;width:auto;margin-bottom:clamp(24px,3vw,40px);}
.auth-pane{display:none;}.auth-pane.on{display:block;}
.auth-eyebrow{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt);margin:0 0 10px;}
.auth-h1{font-family:var(--grot);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.9;font-size:clamp(34px,4.5vw,54px);margin:0 0 12px;}
.auth-sub{font-size:15px;line-height:1.55;color:#4a4a46;margin:0 0 24px;max-width:44ch;}
.auth-form .co-form{gap:16px;}
.auth-row{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.auth-check{display:flex;gap:8px;align-items:center;font-size:13px;color:#4a4a46;}
.auth-link,.auth-alt button{background:none;border:0;padding:0;cursor:pointer;font-size:13px;font-weight:700;color:var(--cobalt);font-family:inherit;}
.auth-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);margin:4px 0 0;}
.auth-alt{margin:20px 0 0;font-size:14px;color:#4a4a46;}

/* ---- order confirmation ---- */
.conf-hero{background:var(--bone);padding:calc(var(--headh) + clamp(34px,6vw,72px)) 0 clamp(30px,4vw,52px);text-align:center;border-bottom:1px solid var(--line);}
.conf-check{width:56px;height:56px;border-radius:50%;background:#1F8A5B;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:18px;}
.conf-hero .k{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt);margin:0 auto 12px;}
.conf-hero h1{font-family:var(--grot);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.9;font-size:clamp(40px,6vw,80px);margin:0 0 14px;}
.conf-hero p{max-width:52ch;margin:0 auto;font-size:15px;line-height:1.6;color:#4a4a46;}
.conf-card{max-width:640px;margin:clamp(30px,4vw,52px) auto 0;border:1.6px solid var(--ink);background:var(--paper);}
.conf-meta{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:1px;background:var(--line);border-bottom:1.5px solid var(--ink);}
.conf-meta .m{background:var(--paper);padding:14px 16px;}
.conf-meta .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);display:block;}
.conf-meta .v{font-weight:700;font-size:14px;margin-top:3px;}
.conf-items{padding:18px;}
.conf-items .it{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);}
.conf-items .im{position:relative;overflow:hidden;width:40px;height:40px;background:var(--bone);border:1px solid var(--line);}
.conf-items .nm{font-weight:600;font-size:14px;}.conf-items .nm .o{display:block;font-weight:400;color:#777;font-size:12px;}
.conf-items .pr{font-family:var(--grot);font-weight:700;}
.conf-items .tot{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0 2px;}
.conf-items .tot .l{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);}
.conf-items .tot .v{font-family:var(--grot);font-weight:900;font-size:24px;letter-spacing:-.02em;}
.conf-next{max-width:640px;margin:20px auto 0;display:flex;flex-wrap:wrap;gap:1.5px;background:var(--line);border:1.5px solid var(--line);}
.conf-next>*{flex:1 1 140px;min-width:0;}
.conf-next a{background:var(--paper);padding:16px;text-align:center;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);}
.conf-next a:hover{background:var(--bone);color:var(--cobalt);}
@media(max-width:560px){.conf-meta{grid-template-columns:1fr 1fr;}}

/* ---- policy / legal ---- */
.lg-wrap{display:grid;grid-template-columns:240px 1fr;gap:clamp(28px,4vw,64px);align-items:start;}
@media(max-width:860px){.lg-wrap{grid-template-columns:1fr;}.lg-toc{position:static !important;}}
.lg-toc{position:sticky;top:calc(var(--headh) + 16px);border-left:2px solid var(--line);padding-left:16px;display:flex;flex-direction:column;gap:2px;}
.lg-toc .lt{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:8px;}
.lg-toc a{font-size:12.5px;line-height:1.5;color:#5a5a56;padding:3px 0;}
.lg-toc a:hover{color:var(--cobalt);}
.lg-content{max-width:74ch;}
.lg-updated{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin:0 0 24px;}
.lg-content h2{font-family:var(--grot);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1;font-size:clamp(20px,2.4vw,28px);margin:34px 0 12px;scroll-margin-top:calc(var(--headh) + 16px);}
.lg-content h2:first-of-type{margin-top:0;}
.lg-content p{font-size:15px;line-height:1.7;color:#33322f;margin:0 0 14px;}
.lg-content p.lead{font-size:17px;color:var(--ink);}
.lg-content ul{margin:0 0 16px;padding-left:20px;}
.lg-content li{font-size:15px;line-height:1.65;color:#33322f;margin-bottom:8px;}
.lg-content a{color:var(--cobalt);}
.lg-content strong{color:var(--ink);}
.ph-flag{background:rgba(234,58,23,.08);border:1.5px solid #EA3A17;padding:12px 16px;font-size:13.5px;color:#8a2a15;margin:0 0 14px;}

/* WO-012 Task 2 (2026-07-26, CC) — Order Confirmation .conf-meta mobile overflow fix.
   The 4-col `.conf-meta` grid can't hold "Total $229.39" at ≤430 (each cell ~87px incl. 32px padding;
   grid items' default min-width:auto pushes the value past the viewport → 395px scrollWidth at 390).
   Drop to 2 cols on mobile. `.conf-card .conf-meta` (0,2,0) beats the base + the page-inline copy (0,1,0)
   regardless of source order. */
@media(max-width:430px){
  .conf-card .conf-meta{grid-template-columns:1fr 1fr;}
}