/* Toganmain Shop — storefront styles.
   Loaded AFTER the live site template.css (linked from toganmain.org.au), so
   the site chrome (header/nav/sponsors/footer) is styled there; this file only
   styles the shop content and small chrome additions (cart nav item). */
:root{
  --ink:#333;
  --site-dark:#3a3837;
  --accent:#8dc63f;        /* site heading green */
  --cta:#a2ff55;           /* site CTA button green (.my-custom-button2) */
  --cta-hover:#91e54c;
  --muted:#767676;
  --line:#e2e2e2;
}

/* Cart bar — top of the content area, above the products */
.cartbar{text-align:right;margin:2px 0 10px}
.cartbar .cartbtn{display:inline-block;background:var(--site-dark);color:#fff;text-decoration:none;
  padding:8px 16px;border-radius:4px;font-weight:700;font-size:.92rem}
.cartbar .cartbtn:hover{background:#555;color:#fff}
.cartbar .cartbtn i{margin-right:6px}

/* Notices */
.notice{background:#f4fbe9;border-left:4px solid var(--accent);padding:12px 16px;margin:18px 0;border-radius:4px}
.muted{color:var(--muted)}

/* Product grid */
.shelf{padding:6px 0 30px}
.shelf h2{text-align:center;font-weight:700}
.shop-lede{text-align:center;max-width:640px;margin:0 auto 8px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px;margin-top:18px}
.card{border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;
  flex-direction:column;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.card .pic{aspect-ratio:1/1;background:#f4f4f2;display:flex;align-items:center;justify-content:center;position:relative}
.card .pic img{width:100%;height:100%;object-fit:cover;display:block}
.card .pic .ph{color:var(--muted);font-style:italic;padding:12px;text-align:center}
.card .pic .soldout{position:absolute;top:10px;right:10px;background:#b00020;color:#fff;
  font-size:.75rem;font-weight:600;padding:3px 9px;border-radius:10px}
.card .body{padding:12px 14px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.card .title{font-size:1.02rem;line-height:1.3;font-weight:600;color:#1a1a1a}
.card .price{color:#2f7d1e;font-weight:700}
.card .price small{color:var(--muted);font-weight:400;font-size:.75rem}
.card select{width:100%;padding:7px 8px;border:1px solid #ccc;border-radius:4px;font:inherit;font-size:.9rem}
.card .optlabel{font-size:.78rem;color:var(--muted);margin-bottom:-4px;font-weight:600}
.card .act{margin-top:auto;display:flex;flex-direction:column;gap:8px}

/* Buttons — match the site's green CTA (.my-custom-button2) */
.btn{display:inline-block;background:var(--cta);color:var(--site-dark);border:0;border-radius:4px;
  padding:10px 16px;font:inherit;font-size:.95rem;font-weight:700;cursor:pointer;
  text-decoration:none !important;text-align:center}
.btn:hover{background:var(--cta-hover);color:var(--site-dark)}
.btn.ghost{background:#fff;border:1px solid #bbb;color:#444;font-weight:600}
.btn.ghost:hover{background:#f1f1f1;color:#111}
.btn.full{width:100%}
.linklike{background:none;border:0;padding:0;color:#777;cursor:pointer;font:inherit;text-decoration:underline}
.linklike:hover{color:#333}

/* Cart table */
table.cart{width:100%;border-collapse:collapse;margin-top:14px}
table.cart th,table.cart td{padding:10px 10px;border-bottom:1px solid var(--line);text-align:left;font-size:.95rem}
table.cart th{font-size:.85rem;letter-spacing:.02em;color:var(--muted)}
table.cart tr.total td{border-bottom:0}
table.cart .optline{display:block;color:var(--muted);font-size:.82rem}

/* Checkout fields */
fieldset.delivery{border:1px solid var(--line);border-radius:6px;padding:12px 16px;margin:0 0 14px;display:flex;flex-direction:column;gap:8px}
fieldset.delivery label{display:flex;gap:8px;align-items:center}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:12px 0 18px}
.fields label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;color:#444;font-weight:600}
.fields input{padding:9px 10px;border:1px solid #ccc;border-radius:4px;font:inherit;font-weight:400}

/* Modal */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:200;
  align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal .panel{background:#fff;border-radius:6px;max-width:560px;width:100%;max-height:85vh;
  overflow:auto;padding:26px 30px;position:relative}
.modal .close{position:absolute;top:10px;right:14px;background:none;border:0;font-size:1.6rem;cursor:pointer;color:var(--muted)}
.modal .meta{color:#2f7d1e;font-weight:700}
.modal .desc p{margin:.6em 0}

/* Hero (thank-you) */
.hero{text-align:center;padding:50px 0}

/* Grouped-card option selects (injected by JS) stack like the rest of the card */
.card .act span[data-gopts]{display:flex;flex-direction:column;gap:8px}

/* Details-modal photo gallery */
.mgal{margin:0 0 14px}
.mgal-main{width:100%;max-height:340px;object-fit:contain;background:#f4f4f2;border-radius:6px;display:block}
.mgal-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.mgal-thumbs img{width:64px;height:64px;object-fit:cover;border-radius:4px;cursor:pointer;
  border:2px solid transparent}
.mgal-thumbs img.sel,.mgal-thumbs img:hover{border-color:var(--accent)}

/* Count/qty boxes: obvious frame + comfortable tap target on phones.
   16px font also stops iOS Safari auto-zooming on focus. */
table.cart input[type=number]{
  -webkit-appearance:none;appearance:none;
  border:2px solid var(--site-dark);border-radius:6px;
  background:#fff;padding:10px 8px;font-size:16px;min-width:84px;
}
table.cart input[type=number]:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(141,198,63,.3);
}