/* ISY Shop theme — MOBILE-FIRST. Matches shop.isyedu.org brand palette.
   Base styles target small screens; min-width media queries enhance for
   tablet/desktop. */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap');

:root{
  --gold:#DDB41F;
  --gold-btn:#CEA510;
  --gold-btn-hover:#b8940e;
  --ink:#333333;
  --btn-text:#3D3D3D;
  --body:#6D6D6D;
  --dark:#404040;
  --bg:#FFFFFF;
  --line:#e6e6e6;
  --muted:#f6f6f6;
  --radius:0px;
  --sale:#c0392b;
  --ok:#2e7d32;
  --warn:#b26a00;
  --err:#c0392b;
  --maxw:1200px;
  --tap:44px;            /* minimum touch target */
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
html,body{margin:0;padding:0;overflow-x:hidden;}      /* never scroll sideways */
body{
  font-family:"Source Sans Pro",HelveticaNeue-Light,"Helvetica Neue",Helvetica,Arial,sans-serif;
  color:var(--body);background:var(--bg);line-height:1.6;font-size:16px;
}
img{max-width:100%;height:auto;}
a{color:var(--ink);text-decoration:none;}
a:hover{color:var(--gold-btn);}
h1,h2,h3,h4{color:var(--ink);font-weight:700;line-height:1.25;margin:.2em 0 .5em;}
h1{font-size:24px;}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 14px;}

/* ---------- Header (mobile-first, 2 rows) ---------- */
.topbar{background:var(--gold);color:var(--btn-text);}
.topbar .container{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding-top:10px;padding-bottom:10px;}
.brand{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0;}
.brand img{height:42px;width:auto;}
.brand .name{font-size:18px;font-weight:700;color:var(--btn-text);letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.header-actions{flex:1 1 100%;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:15px;}
.header-actions a,.header-actions .greeting{color:var(--btn-text);font-weight:600;}
.header-actions .linkbtn{background:none;border:none;font:inherit;color:var(--btn-text);font-weight:600;cursor:pointer;padding:0;}
.header-actions .linkbtn:hover{color:var(--gold-btn);}
.header-actions .signin-btn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border:1px solid rgba(51,51,51,.35);color:var(--ink);}
.header-actions .signin-btn:hover{background:rgba(255,255,255,.25);color:var(--ink);}
.header-actions .greeting{margin-left:auto;}
.cart-pill{display:inline-flex;align-items:center;gap:8px;background:var(--btn-text);color:var(--gold);padding:0 14px;height:40px;font-weight:700;}
.cart-pill:hover{color:var(--gold);background:#2a2a2a;}
.cart-pill .cart-txt{display:none;}
.cart-pill .count{background:var(--sale);color:#fff;border-radius:999px;padding:0 6px;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;}

@media(min-width:760px){
  .topbar .container{flex-wrap:nowrap;gap:18px;min-height:92px;}
  .brand{flex:0 0 auto;margin-right:auto;}
  .brand img{height:60px;}
  .brand .name{font-size:24px;}
  .header-actions{flex:0 0 auto;order:0;font-size:16px;}
  .cart-pill{order:1;}
  .cart-pill .cart-txt{display:inline;}
  .header-actions .greeting{margin-left:0;}
}

/* ---------- Layout with sidebar ---------- */
.layout{display:block;padding:20px 0 48px;}
.sidebar{margin-bottom:26px;}
.sidebar h3{font-size:15px;text-transform:uppercase;letter-spacing:.6px;border-bottom:2px solid var(--gold);padding-bottom:8px;margin-top:22px;}
.sidebar h3:first-child{margin-top:0;}

/* Collapsible category accordion */
.cat-tree,.cat-children{list-style:none;margin:0;padding:0;}
.cat-children{padding-left:14px;display:none;}
.cat-node.open > .cat-children{display:block;}
.cat-node{border-bottom:1px solid var(--line);}
.cat-children .cat-node:last-child{border-bottom:none;}
.cat-row{display:flex;align-items:center;gap:4px;}
.cat-link{flex:1;padding:9px 0;color:var(--body);min-height:24px;}
.cat-link:hover,.cat-link.active{color:var(--gold-btn);font-weight:600;}
.cat-toggle{background:none;border:none;cursor:pointer;padding:6px 10px;color:#b0b0b0;font-size:11px;line-height:1;
  transition:transform .15s ease;min-height:32px;flex:none;}
.cat-node.open > .cat-row > .cat-toggle{transform:rotate(90deg);color:var(--gold-btn);}
.price-filter input{width:78px;padding:9px;border:1px solid var(--line);}

.sidebar-toggle{display:none;}
@media(min-width:900px){
  .layout{display:grid;grid-template-columns:240px 1fr;gap:32px;padding:24px 0 60px;align-items:start;}
  .sidebar{margin-bottom:0;position:sticky;top:14px;max-height:calc(100vh - 28px);overflow-y:auto;padding-right:6px;}
}
@media(max-width:899px){
  .sidebar-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;background:var(--muted);
    border:1px solid var(--line);padding:13px 14px;font-weight:700;color:var(--ink);cursor:pointer;font-size:14px;min-height:var(--tap);}
  .sidebar-toggle .caret{transition:transform .15s ease;color:var(--gold-btn);}
  .sidebar.open .sidebar-toggle .caret{transform:rotate(90deg);}
  .sidebar-body{display:none;border:1px solid var(--line);border-top:none;padding:6px 14px 14px;}
  .sidebar.open .sidebar-body{display:block;}
  .sidebar-body h3:first-child{margin-top:12px;}
}

/* ---------- Toolbar / sort ---------- */
.shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
.result-count{color:var(--body);font-size:14px;}
select,input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=time],input[type=password],textarea{
  font-family:inherit;font-size:16px;              /* 16px avoids iOS zoom-on-focus */
  padding:11px 12px;border:1px solid #ccc;border-radius:var(--radius);background:#fff;color:var(--ink);
  min-height:var(--tap);width:100%;
}
select{width:auto;max-width:100%;}
select:focus,input:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:0;border-color:var(--gold);}

/* ---------- Product grid (2 cols on phones → 4 on desktop) ---------- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media(min-width:560px){.grid{gap:22px;}}
@media(min-width:760px){.grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(4,1fr);gap:24px;}}
.card{position:relative;text-align:center;display:flex;flex-direction:column;}
.card .thumb{aspect-ratio:1/1;background:var(--muted);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.card .thumb img{width:100%;height:100%;object-fit:cover;}
.card h2{font-size:15px;font-weight:600;margin:10px 0 6px;min-height:2.6em;}
.card .price{color:var(--ink);font-weight:700;}
.card .btn{width:100%;}
.badge-sale{position:absolute;top:8px;left:8px;background:var(--sale);color:#fff;font-size:11px;font-weight:700;padding:4px 8px;text-transform:uppercase;z-index:2;}
del{color:#999;font-weight:400;margin-right:6px;}
ins{text-decoration:none;color:var(--sale);}

/* ---------- Buttons (touch-friendly) ---------- */
.btn,button.btn,a.btn{display:inline-block;background:var(--gold-btn);color:var(--btn-text);border:none;
  padding:12px 20px;min-height:var(--tap);font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;border-radius:var(--radius);text-align:center;line-height:1.3;}
.btn:hover{background:var(--gold-btn-hover);color:var(--btn-text);}
.btn-block{display:block;width:100%;}
.btn-dark{background:var(--btn-text);color:#fff;}
.btn-dark:hover{background:#2a2a2a;color:#fff;}
.btn-outline{background:transparent;border:2px solid var(--gold-btn);color:var(--ink);}
.btn-sm{padding:9px 14px;min-height:38px;font-size:14px;}
.btn[disabled],button[disabled]{opacity:.5;cursor:not-allowed;}

/* ---------- Product page ---------- */
.product-page{display:block;padding:18px 0 48px;}
.gallery{margin-bottom:20px;}
.gallery img{width:100%;background:var(--muted);}
.product-info .price{font-size:22px;margin:8px 0 14px;}
.variation-row{margin:14px 0;}
.variation-row label{display:block;font-weight:600;color:var(--ink);margin-bottom:6px;}
.variation-row select{width:100%;max-width:320px;}
.stock-note{font-size:14px;margin:10px 0;}
.in-stock{color:var(--ok);}
.out-stock{color:var(--err);}
.qty-add{display:flex;gap:10px;align-items:center;margin-top:18px;flex-wrap:wrap;}
.qty-add input{width:84px;}
.qty-add .btn{flex:1 1 160px;}
@media(min-width:800px){
  .product-page{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:28px 0 60px;}
  .gallery{margin-bottom:0;}
  .qty-add .btn{flex:0 0 auto;}
}

/* ---------- Tables ---------- */
table.data{width:100%;border-collapse:collapse;}
table.data th,table.data td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;}
table.data th{font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink);}
.cart-thumb{width:60px;height:60px;object-fit:cover;background:var(--muted);}
.totals{margin-top:22px;margin-left:auto;width:100%;}
.totals .row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);}
.totals .grand{font-size:20px;font-weight:700;color:var(--ink);border-bottom:none;}
@media(min-width:560px){.totals{max-width:360px;}}

/* Stacked "card" tables on phones (opt-in via .stack) */
@media(max-width:600px){
  table.stack, table.stack tbody, table.stack tr, table.stack td{display:block;width:100%;}
  table.stack thead{position:absolute;left:-9999px;}
  table.stack tr{border:1px solid var(--line);border-radius:4px;margin-bottom:14px;padding:10px 12px;}
  table.stack td{border:none;padding:7px 0;display:flex;justify-content:space-between;align-items:center;gap:14px;text-align:right;}
  table.stack td::before{content:attr(data-label);font-weight:600;color:var(--ink);text-align:left;flex:0 0 auto;}
  table.stack td.cell-wide{display:block;text-align:left;}
  table.stack td.cell-wide::before{display:block;margin-bottom:4px;}
}

/* ---------- Forms / checkout ---------- */
.form-grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media(min-width:560px){.form-grid{grid-template-columns:1fr 1fr;gap:16px;}}
.field{margin-bottom:14px;}
.field label{display:block;font-weight:600;color:var(--ink);margin-bottom:6px;}
.field .hint{font-size:13px;color:var(--body);}
.checkout-cols{display:block;}
.checkout-cols > div + div{margin-top:24px;}
@media(min-width:900px){
  .checkout-cols{display:grid;grid-template-columns:1fr 380px;gap:36px;align-items:start;}
  .checkout-cols > div + div{margin-top:0;}
}
.panel{border:1px solid var(--line);padding:18px;}
.panel h3{margin-top:0;}
.pay-option,.slot-option{display:flex;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);margin-bottom:8px;cursor:pointer;min-height:var(--tap);}
.pay-option img{height:26px;}
.slot-grid{display:flex;flex-wrap:wrap;gap:8px;}
.slot-grid label{border:1px solid var(--line);padding:11px 14px;cursor:pointer;min-height:var(--tap);display:flex;align-items:center;}
.slot-grid input{margin-right:6px;width:auto;min-height:0;}

/* ---------- Pickup calendar ---------- */
.cal{border:1px solid var(--line);max-width:340px;width:100%;user-select:none;}
.cal-head{display:flex;align-items:center;justify-content:space-between;background:var(--muted);padding:10px 12px;font-weight:700;color:var(--ink);}
.cal-head button{background:none;border:none;font-size:20px;cursor:pointer;color:var(--ink);padding:4px 12px;min-height:40px;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:8px;}
.cal-grid .dow{font-size:11px;text-align:center;color:var(--body);font-weight:700;padding:4px 0;}
.cal-day{text-align:center;padding:10px 0;cursor:pointer;border-radius:3px;font-size:14px;min-height:40px;}
.cal-day.disabled{color:#ccc;cursor:not-allowed;}
.cal-day.selectable:hover{background:var(--gold);color:var(--btn-text);}
.cal-day.selected{background:var(--gold-btn);color:var(--btn-text);font-weight:700;}
.cal-day.empty{cursor:default;}
#slotBox .slot-grid{margin-top:8px;}
.pickup-summary{margin-top:10px;font-weight:600;color:var(--ink);}

/* ---------- Flash / alerts ---------- */
.alert{padding:12px 16px;margin:14px 0;border-left:4px solid;}
.alert-success{background:#eef7ee;border-color:var(--ok);color:#1f5e22;}
.alert-error{background:#fdeeec;border-color:var(--err);color:#8f2519;}
.alert-warn{background:#fff6e6;border-color:var(--warn);color:#7a4a00;}
.alert-info{background:#eef3fb;border-color:#2b6cb0;color:#1c4a7e;}

/* ---------- Pagination ---------- */
.pagination{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:30px 0;}
.pagination a,.pagination span{padding:11px 15px;border:1px solid var(--line);color:var(--ink);min-height:var(--tap);display:inline-flex;align-items:center;}
.pagination .current{background:var(--gold);border-color:var(--gold);color:var(--btn-text);font-weight:700;}

/* ---------- Footer ---------- */
.site-footer{background:var(--dark);color:#cfcfcf;margin-top:36px;}
.site-footer a{color:#fff;}
.site-footer .container{padding:26px 14px;display:flex;flex-direction:column;gap:18px;}
@media(min-width:600px){.site-footer .container{flex-direction:row;justify-content:space-between;gap:20px;}}

/* ---------- Maintenance ---------- */
.maintenance{min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:32px 18px;}
.maintenance .box{max-width:560px;}
.maintenance .logo{height:80px;margin-bottom:18px;}
.maintenance h1{font-size:26px;}
@media(min-width:600px){.maintenance h1{font-size:30px;}.maintenance .logo{height:90px;}}

/* ================= Prototype components (ISY Shop.dc.html) ================= */

/* Open-hours banner */
.hours-strip{background:var(--muted);border-bottom:1px solid var(--line);}
.hours-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px 0;font-size:13px;}
.hours-banner .lead{font-weight:700;color:var(--ink);}
.hours-banner .open-now{color:var(--ok);font-weight:600;}
.hours-banner .closed{color:var(--body);font-weight:600;}

/* Quantity stepper */
.stepper{display:inline-flex;align-items:center;border:1px solid #ccc;height:48px;background:#fff;}
.stepper button{width:46px;height:100%;background:var(--muted);border:none;font-size:20px;color:var(--ink);cursor:pointer;line-height:1;}
.stepper button:first-of-type{border-right:1px solid #ccc;}
.stepper button:last-of-type{border-left:1px solid #ccc;}
.stepper .val{width:52px;text-align:center;font-size:16px;font-weight:600;color:var(--ink);}
.stepper input.val{width:52px;border:none;background:none;-moz-appearance:textfield;min-height:0;padding:0;}
.stepper input.val::-webkit-outer-spin-button,.stepper input.val::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.stepper.sm{height:36px;}
.stepper.sm button{width:38px;font-size:18px;}
.stepper.sm .val{width:44px;}

/* Size chips (product page) */
.size-chips{display:flex;flex-wrap:wrap;gap:8px;}
.size-chip{min-width:46px;padding:11px 12px;border:1px solid #ccc;background:#fff;color:var(--ink);font-weight:600;font-size:14px;cursor:pointer;text-align:center;}
.size-chip.selected{border-color:var(--gold-btn);background:var(--gold);color:var(--btn-text);}
.size-chip[disabled],.size-chip.disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through;}
.pd-eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--gold);text-transform:uppercase;margin:0 0 4px;}

/* Product card sold-out overlay */
.card .thumb{position:relative;}
.card .sold-overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(255,255,255,.72);color:var(--dark);font-weight:700;font-size:13px;letter-spacing:.06em;}

/* Checkout numbered sections */
.co-section{margin-bottom:22px;}
.co-section > h2{margin:0 0 12px;font-size:16px;color:var(--ink);border-bottom:2px solid var(--gold);padding-bottom:6px;}
.co-hint{margin:0 0 12px;font-size:13px;color:var(--body);}

/* Time-slot buttons */
.slot-list{display:flex;flex-direction:column;gap:8px;}
.slot-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:12px 14px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600;cursor:pointer;text-align:left;min-height:var(--tap);}
.slot-btn .period{font-size:12px;opacity:.7;font-weight:400;}
.slot-btn.selected{border-color:var(--gold-btn);background:#fff8e6;}

/* Payment option cards */
.pay-list{display:flex;flex-direction:column;gap:10px;}
.pay-card{display:flex;align-items:center;gap:12px;width:100%;padding:14px;border:1px solid var(--line);background:#fff;cursor:pointer;text-align:left;}
.pay-card.selected{border-color:var(--gold-btn);background:#fff8e6;}
.pay-radio{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:2px solid #ccc;flex:none;}
.pay-card.selected .pay-radio{border-color:var(--gold-btn);}
.pay-card.selected .pay-radio::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--gold-btn);}
.pay-title{font-weight:700;color:var(--ink);font-size:15px;display:block;}
.pay-sub{font-size:12px;color:var(--body);display:block;}
.pay-emoji{margin-left:auto;font-size:20px;}
.aya-block{border:1px solid var(--line);}
.aya-block.selected{border-color:var(--gold-btn);}
.aya-channels{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 14px 14px 48px;}
.aya-chip{padding:11px 8px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600;cursor:pointer;text-align:center;font-size:13px;}
.aya-chip.selected{border-color:var(--gold-btn);background:var(--gold);color:var(--btn-text);}

/* Sticky order summary */
.co-summary{border:1px solid var(--line);background:var(--muted);padding:16px;}
.co-summary .sline{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:3px 0;}
.co-summary .free{color:var(--ok);font-weight:600;}
.co-note{background:#fff;border:1px solid var(--line);padding:10px;font-size:12px;line-height:1.5;margin:12px 0;}
@media(min-width:900px){.co-summary{position:sticky;top:16px;}}

/* Confirmation */
.confirm{max-width:640px;margin:0 auto;text-align:center;padding:24px 0 48px;}
.confirm .check{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 16px;border-radius:50%;background:var(--ok);color:#fff;font-size:38px;}
.confirm-card{text-align:left;border:1px solid var(--line);}
.confirm-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);}
.confirm-grid > div{background:var(--muted);padding:14px;}
.confirm-grid .k{margin:0 0 2px;font-size:11px;font-weight:700;letter-spacing:.08em;color:#9a9a9a;}
.confirm-grid .v{margin:0;font-weight:700;color:var(--ink);font-size:15px;}
.confirm-where{background:var(--muted);border:1px solid var(--line);padding:14px;margin-top:16px;text-align:left;font-size:13px;line-height:1.55;}

/* ---------- Utility ---------- */
.text-center{text-align:center;}
.muted{color:var(--body);}
.mt{margin-top:20px;}
.mb{margin-bottom:20px;}
.empty-state{text-align:center;padding:48px 20px;color:var(--body);}