/* Africane Bloom webshop — shared styles (login, shop, admin). Real responsive layout, no scaled canvas. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #FAF4E8; color: #201C1A; font-family: 'EB Garamond', Georgia, serif; font-size: 18px; line-height: 1.5; }
a { color: #8A4A1E; text-decoration: none; }
a:hover { color: #663711; }
h1, h2, h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; margin: 0; }
h1 { font-style: italic; font-size: 44px; }
h2 { font-size: 28px; }
h3 { font-size: 21px; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* header */
.sh-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 40px; border-bottom: 1px solid #241E17; flex-wrap: wrap; }
.sh-brand { display: flex; align-items: center; gap: 12px; color: #201C1A; }
.sh-brand img { height: 36px; width: auto; display: block; }
.sh-brand span { font-size: 21px; letter-spacing: 0.14em; font-weight: 500; }
.sh-nav { display: flex; align-items: center; gap: 26px; font-size: 16px; flex-wrap: wrap; }
.sh-nav a { color: #201C1A; }
.sh-nav a.on { color: #9C5323; }
.sh-right { display: flex; align-items: center; gap: 18px; font-size: 14px; }
.sh-lang { display: flex; gap: 9px; font-size: 14px; letter-spacing: 0.05em; }
.sh-lang button { background: none; border: 0; padding: 4px; cursor: pointer; color: #5E564F; }
.sh-lang button.on { color: #8A4A1E; font-weight: 600; }
.sh-user { color: #4F4741; }

/* layout */
.sh-main { max-width: 1280px; margin: 0 auto; padding: 40px 40px 80px; }
.sh-narrow { max-width: 560px; }
.sh-lead { color: #4F4741; max-width: 720px; margin: 12px 0 0; }
.sh-card { background: #fff; border: 1px solid #D9C7B3; padding: 28px; }
.sh-card + .sh-card { margin-top: 20px; }
.sh-banner { padding: 14px 18px; margin: 0 0 22px; border: 1px solid #D9C7B3; background: #fff; }
.sh-banner.warn { border-color: #C9A24A; background: #FFF7DD; }
.sh-banner.err { border-color: #B3402A; background: #FDECE8; color: #7A2414; }
.sh-banner.ok { border-color: #5D8A4A; background: #EDF6E8; color: #2E5420; }
.sh-demo { background: #241E17; color: #FAF4E8; text-align: center; padding: 8px 16px; font-size: 14px; }
.sh-demo b { color: #F0C987; }

/* forms */
.sh-form label { display: block; margin-top: 16px; }
.sh-form .lbl { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #6E6660; }
.sh-form input, .sh-form select, .sh-form textarea, .sh-in { width: 100%; margin-top: 6px; padding: 12px 14px; border: 1px solid #D9C7B3; background: #fff; font-size: 16px; color: #241E17; border-radius: 0; }
.sh-form textarea { min-height: 90px; resize: vertical; }
.sh-form input:focus, .sh-form select:focus, .sh-form textarea:focus, .sh-in:focus { outline: 2px solid #8A4A1E; outline-offset: 0; }
.sh-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sh-check { display: flex !important; gap: 10px; align-items: flex-start; font-size: 15px; color: #4F4741; }
.sh-check input { width: auto !important; margin-top: 5px !important; }

.btn { display: inline-block; background: #8A4A1E; color: #fff; border: 1px solid #8A4A1E; padding: 12px 24px; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.btn:hover { background: #663711; border-color: #663711; color: #fff; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.ghost { background: transparent; color: #8A4A1E; }
.btn.ghost:hover { background: #8A4A1E; color: #fff; }
.btn.small { padding: 7px 14px; font-size: 12px; }
.btn.danger { background: #B3402A; border-color: #B3402A; }
.linkbtn { background: none; border: 0; padding: 0; color: #8A4A1E; cursor: pointer; text-decoration: underline; font-size: inherit; }
.sh-tabs { display: flex; gap: 0; border-bottom: 1px solid #241E17; margin-bottom: 28px; flex-wrap: wrap; }
.sh-tabs button { background: none; border: 0; padding: 12px 22px; cursor: pointer; font-size: 16px; color: #5E564F; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.sh-tabs button.on { color: #8A4A1E; border-bottom-color: #8A4A1E; font-weight: 500; }
.sh-tabs .cnt { display: inline-block; background: #8A4A1E; color: #fff; font-size: 12px; border-radius: 999px; padding: 0 8px; margin-left: 6px; }

/* shop: filter + grid */
.sh-shop { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }
.sh-filters { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 6px; }
.sh-filters > * { flex: 1 1 170px; min-width: 0; }
.sh-count { color: #5E564F; font-size: 14px; margin: 8px 0 18px; }
.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 24px 20px; }
.sh-v { background: #fff; border: 1px solid #E4DFD8; display: flex; flex-direction: column; }
.sh-v img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: #F1EADB; }
.sh-v .in { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sh-v .nm { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 500; line-height: 1.15; }
.sh-v .mt { font-size: 14px; color: #5E564F; }
.sh-v .pr { font-size: 15px; color: #8A4A1E; }
.sh-v .pr.req { color: #5E564F; }
.sh-v .ctl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 8px; }
.sh-v .ctl select, .sh-v .ctl input { width: 100%; padding: 8px 8px; border: 1px solid #D9C7B3; background: #fff; font-size: 15px; border-radius: 0; }
.sh-v .ctl .full { grid-column: 1 / -1; }
.sh-more { text-align: center; margin: 32px 0 0; }

/* cart */
.sh-cart { position: sticky; top: 16px; background: #fff; border: 1px solid #241E17; padding: 22px; max-height: calc(100vh - 32px); overflow: auto; }
.sh-cart h2 { font-size: 26px; margin-bottom: 10px; }
.sh-line { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-top: 1px solid #E4DFD8; font-size: 16px; }
.sh-line .nm { font-weight: 500; }
.sh-line .sub { grid-column: 1 / -1; font-size: 14px; color: #5E564F; }
.sh-line .rm { background: none; border: 0; color: #B3402A; cursor: pointer; font-size: 14px; padding: 0; }
.sh-hint { background: #FFF7DD; border: 1px solid #E6D08A; font-size: 13.5px; padding: 6px 10px; margin-top: 6px; }
.sh-totals { border-top: 1px solid #241E17; margin-top: 8px; padding-top: 12px; font-size: 16px; }
.sh-totals div { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.sh-totals .big { font-size: 20px; font-weight: 500; }
.sh-fab { display: none; }
#cart-close { display: none; }

/* tables (admin, orders) */
.sh-table { width: 100%; border-collapse: collapse; font-size: 15.5px; background: #fff; }
.sh-table th { text-align: left; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #6E6660; font-weight: 500; padding: 10px 12px; border-bottom: 1px solid #241E17; }
.sh-table td { padding: 10px 12px; border-bottom: 1px solid #E4DFD8; vertical-align: top; }
.sh-table td.num, .sh-table th.num { text-align: right; white-space: nowrap; }
.sh-scroll { overflow-x: auto; }
.pill { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 13px; border: 1px solid #D9C7B3; background: #F7F1E4; }
.pill.pending, .pill.new { background: #FFF7DD; border-color: #E6D08A; }
.pill.approved, .pill.confirmed { background: #EDF6E8; border-color: #A8CC98; }
.pill.rejected, .pill.cancelled { background: #FDECE8; border-color: #E4A99C; }
.sh-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sh-order { border: 1px solid #D9C7B3; background: #fff; margin-top: 16px; }
.sh-order > summary { padding: 14px 18px; cursor: pointer; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.sh-order > div { padding: 0 18px 18px; }
.sh-muted { color: #5E564F; font-size: 14px; }
.sh-pre { white-space: pre-wrap; word-break: break-word; }

/* footer */
.sh-footer { border-top: 1px solid #241E17; padding: 28px 40px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; color: #5E564F; }
.sh-footer a { color: inherit; }
.sh-footer .links { display: flex; gap: 20px; flex-wrap: wrap; }

@media (max-width: 1000px) {
  .sh-header { padding: 14px 20px; }
  .sh-main { padding: 28px 20px 110px; }
  .sh-footer { padding: 24px 20px; }
  h1 { font-size: 36px; }
  .sh-nav { gap: 6px 18px; font-size: 15px; }
  .sh-shop { grid-template-columns: 1fr; }
  .sh-cart { position: fixed; inset: 0; z-index: 50; max-height: none; border: 0; transform: translateY(100%); transition: transform .2s; }
  .sh-cart.open { transform: none; }
  #cart-close { display: inline; }
  .sh-fab { display: flex; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; justify-content: space-between; align-items: center; background: #8A4A1E; color: #fff; border: 0; padding: 14px 18px; font-size: 16px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
  .sh-row2 { grid-template-columns: 1fr; }
  .sh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .sh-v .nm { font-size: 19px; }
  .sh-v .ctl { grid-template-columns: 1fr; }
}