@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&family=Figtree:wght@400;500;600;700&display=swap");

/* ==========================================================================
   Shopel — override sheet for the Epsilon theme
   --------------------------------------------------------------------------
   Drop this file in the theme folder as css/shopel.css and enqueue it after
   css/tokens.css (see the note at the bottom of this file).

   Two parts:
     1. the --eps-* tokens, remapped to Shopel values
     2. the handful of legacy component rules tokens cannot reach

   The token block is written as :root:root on purpose. The admin design panel
   prints its own <style id="eps-design"> block on :root later in the head, so
   the doubled selector is what keeps the Shopel palette in place. Delete one
   :root if you want the admin colour pickers to win again.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root:root {
  /* Brand. The orange you look at is not the orange you click:
     #FF8A41 is expressive (marks, promoted accents), #B94A0D is functional
     (buttons, links) and clears 5.2:1 with white text. */
  --eps-primary: #b94a0d;
  --eps-primary-dark: #943c0c;
  --eps-primary-soft: #fff4ec;
  --eps-primary-contrast: #ffffff;
  --eps-secondary: #0e141c;
  --eps-accent: #ff8a41;

  /* Cool slate neutrals. No beige, no cream, no warm grey. */
  --eps-text: #12171e;
  --eps-text-muted: #6b7480;
  --eps-bg: #ffffff;
  --eps-surface: #ffffff;
  --eps-surface-alt: #f7f8fa;
  --eps-border: #e3e6eb;

  --eps-success: #12855a;
  --eps-warning: #b5730a;
  --eps-danger: #c0342b;
  --eps-success-soft: #e8f5ee;
  --eps-warning-soft: #fdf4e3;
  --eps-danger-soft: #fceded;
  --eps-info-soft: #eaf2fc;

  /* Type. Lexend for display and headings, Figtree for everything else. */
  --eps-font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --eps-font-heading: "Lexend", "Figtree", system-ui, sans-serif;
  --eps-fs-base: 16px;
  --eps-fs-scale: 1.2;
  --eps-lh: 1.6;
  --eps-fw-heading: 700;

  /* Space: 4px grid, generous rhythm. */
  --eps-space: 16px;
  --eps-section-gap: 64px;

  /* Shape. 5px controls, 8px cards, 10px layers. Nothing is a 16px blob. */
  --eps-radius: 8px;
  --eps-radius-sm: 5px;
  --eps-radius-lg: 10px;
  --eps-radius-pill: 999px;
  --eps-border-width: 1px;

  /* Elevation. Resting cards carry a border, not a shadow. */
  --eps-shadow-sm: none;
  --eps-shadow: 0 2px 8px rgba(14, 20, 28, .08), 0 1px 2px rgba(14, 20, 28, .06);
  --eps-shadow-lg: 0 12px 32px rgba(14, 20, 28, .14);

  /* Motion. Flat easing, no overshoot. */
  --eps-transition: 140ms cubic-bezier(.2, 0, .2, 1);

  --eps-container: 1280px;
  --eps-card-ratio: 75%;

  --eps-heading: #12171e;
  --eps-link: #b94a0d;
  --eps-link-hover: #943c0c;
  --eps-icon: #6b7480;
  --eps-tracking: -0.01em;
  --eps-heading-transform: none;

  /* Cards */
  --eps-cols: 4;
  --eps-card-gap: 24px;
  --eps-card-padding: 16px;
  --eps-card-radius: 8px;
  --eps-card-fit: cover;
  --eps-card-title-size: 15px;
  --eps-card-title-lines: 2;
  --eps-card-price-size: 20px;
  --eps-card-price-color: #12171e;

  /* Controls */
  --eps-btn-radius: 5px;
  --eps-btn-height: 40px;
  --eps-btn-padding-x: 16px;
  --eps-btn-font-size: 15px;
  --eps-btn-font-weight: 600;
  --eps-btn-shadow: none;
  --eps-btn-primary-bg: #b94a0d;
  --eps-btn-primary-text: #ffffff;
  --eps-btn-primary-bg-hover: #943c0c;
  --eps-btn-publish-bg: #b94a0d;
  --eps-btn-publish-text: #ffffff;
  --eps-btn-publish-bg-hover: #943c0c;
  --eps-btn-contact-bg: #b94a0d;
  --eps-btn-contact-text: #ffffff;
  --eps-btn-contact-bg-hover: #943c0c;

  --eps-input-height: 40px;
  --eps-input-radius: 5px;
  --eps-input-bg: #ffffff;
  --eps-input-border: #cbd1d9;
  --eps-input-focus: #b94a0d;

  --eps-header-bg: #ffffff;
  --eps-header-text: #12171e;
  --eps-header-height: 72px;
  --eps-logo-height: 26px;

  --eps-footer-bg: #0e141c;
  --eps-footer-text: #cbd1d9;
  --eps-footer-link: #ffffff;
  --eps-footer-cols: 4;
  --eps-footer-padding: 64px;

  --eps-focus-ring: 0 0 0 3px rgba(249, 123, 50, .35);

  /* Shopel-only values the Epsilon token set has no slot for. */
  --sh-promoted-fg: #943c0c;
  --sh-promoted-bg: #fff4ec;
  --sh-promoted-border: #ffcdaa;
  --sh-verified-fg: #0b625a;
  --sh-verified-bg: #e8f5f3;
  --sh-favorite: #c0342b;
  --sh-n-100: #eff1f4;
  --sh-n-300: #cbd1d9;
}

@media (prefers-reduced-motion: reduce) { :root:root { --eps-transition: 0ms; } }

body { font-family: var(--eps-font); font-size: var(--eps-fs-base); line-height: var(--eps-lh); color: #343b45; background: var(--eps-bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--eps-font-heading); letter-spacing: -0.01em; color: var(--eps-text); }
h4, h5, h6 { font-family: var(--eps-font); font-weight: 600; color: var(--eps-text); }
a { color: var(--eps-link); }
a:hover { color: var(--eps-link-hover); }
:focus-visible { outline: 2px solid #e2620f; outline-offset: 2px; }


/* --------------------------------------------------------------------------
   2. Listing card (legacy .simple-prod markup)
   -------------------------------------------------------------------------- */

/* White card, 1px rule at rest, shadow only on hover, 1px lift. */
.simple-prod { border-radius: var(--eps-card-radius); }
.simple-prod .simple-wrap { background: var(--eps-surface); border: 1px solid var(--eps-border); border-radius: var(--eps-card-radius); padding: 0 0 var(--eps-card-padding); overflow: hidden; transition: box-shadow 200ms cubic-bezier(.2,0,.2,1), transform 200ms cubic-bezier(.2,0,.2,1); }
.simple-prod:hover .simple-wrap { background: var(--eps-surface); box-shadow: var(--eps-shadow); transform: translateY(-1px); }
.simple-prod.is-premium .simple-wrap { border-color: var(--sh-promoted-border); }

/* Photos: flat, no drop shadow, grey placeholder showing through. */
.simple-prod .img-wrap { background: var(--sh-n-100); }
.simple-prod .img-wrap > a img { box-shadow: none; border-radius: 0; }
.simple-prod .img-wrap.no-image > a img { box-shadow: none; }

/* The dark gradient bar is removed. The price sits in a white chip instead —
   the only overlay Shopel permits on a listing photo is the control gradient,
   and a price is not a control. */
.simple-prod .img-wrap .bar { background: none; padding: 8px; }
.simple-prod .img-wrap .bar .price { float: none; display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 5px; background: rgba(255,255,255,.94); color: var(--eps-text); font-family: var(--eps-font); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.simple-prod .img-wrap .bar .image-counter { right: auto; left: 8px; top: 8px; bottom: auto; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 4px; background: rgba(14,20,28,.72); color: #fff; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.simple-prod .img-wrap .bar .image-counter:after { content: none; }

/* Promoted listings carry the accent on three surfaces at once: the card rule,
   the band behind the name, and the badge. The tint is light enough that the
   title keeps its normal ink — the emphasis comes from the surface, not from
   recolouring the text, which would cost legibility. */
.simple-prod.is-premium .simple-wrap,
.simple-prod.day-offer .simple-wrap,
.simple-prod.highlight .simple-wrap {
  border-color: var(--eps-accent);
  box-shadow: inset 0 0 0 1px var(--eps-accent);
}

.simple-prod.is-premium .data,
.simple-prod.day-offer .data,
.simple-prod.highlight .data {
  background: var(--sh-promoted-bg);
  border-top: 1px solid var(--sh-promoted-border);
}

.simple-prod.is-premium .info,
.simple-prod.day-offer .info,
.simple-prod.highlight .info { color: var(--sh-promoted-fg); }

/* The photo band follows, so the tint does not stop halfway up the card. */
.simple-prod.is-premium .img-wrap,
.simple-prod.day-offer .img-wrap,
.simple-prod.highlight .img-wrap { background: var(--sh-promoted-bg); }

/* Offer of the day is the louder of the two: solid accent, ink on top.
   #ff8a41 with #12171e clears 7.4:1, so the label stays readable. */
.simple-prod.day-offer .simple-wrap { border-color: var(--eps-accent); }
.simple-prod.day-offer .day-offer-mark {
  background: var(--eps-accent);
  color: #12171e;
  border-color: var(--eps-accent);
  font-weight: 700;
}

/* Promoted is a labelled badge, never colour alone. */
.simple-prod .premium-mark, .items-box .label-premium { left: 8px; top: 8px; bottom: auto; padding: 3px 8px; border-radius: 4px; background: var(--sh-promoted-bg); color: var(--sh-promoted-fg); border: 1px solid var(--sh-promoted-border); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.simple-prod .day-offer-mark { background: var(--sh-promoted-bg); color: var(--sh-promoted-fg); border: 1px solid var(--sh-promoted-border); font-style: normal; letter-spacing: 0; border-radius: 4px; }
.simple-prod.day-offer .simple-wrap { box-shadow: none; border-color: var(--sh-promoted-border); }

/* Favourite: filled vs outline icon, not an opacity change. */
.simple-prod .favorite i, #item-main .favorite i { width: 32px; height: 32px; border-radius: 999px; background: rgba(255,255,255,.92); color: #4b535e; box-shadow: 0 1px 2px rgba(14,20,28,.12); }
.simple-prod .favorite i:hover, #item-main .favorite i:hover { background: #fff; color: var(--eps-text); }
.simple-prod .favorite a.is_favorite i, #item-main .favorite a.is_favorite i { background: #fff; color: var(--sh-favorite); }
.simple-prod .favorite a.is_favorite:hover i, #item-main .favorite a.is_favorite:hover i { background: #fff; color: #93251e; }

/* Seller avatar sits bottom-right of the photo, ringed in the card surface. */
.simple-prod .img-wrap .user-image { left: auto; right: 10px; top: auto; bottom: -14px; width: 32px; height: 32px; }
.simple-prod .img-wrap .user-image > img { border: 2px solid var(--eps-surface); }
.simple-prod .img-wrap .user-image .business { background: #eaf2fc; color: #144888; font-size: 8px; border-radius: 3px; }
.simple-prod .img-wrap .user-image .online { background: #12855a; }

/* Body: metadata, then a two-line title, then chips. */
.simple-prod .data { padding: 12px var(--eps-card-padding) 0; }
.simple-prod .info { font-size: 13px; color: var(--eps-text-muted); margin-bottom: 6px; }
.simple-prod .title { font-family: var(--eps-font); font-size: var(--eps-card-title-size); font-weight: 500; line-height: 1.3; color: var(--eps-text); margin-bottom: 6px; }
.simple-prod .extra { font-size: 13px; color: var(--eps-text-muted); }
.simple-prod .label { padding: 2px 8px; border-radius: 999px; background: var(--sh-n-100); color: #4b535e; font-size: 12px; font-weight: 600; }
.simple-prod .description { font-size: 14px; line-height: 1.45; color: #4b535e; }
.simple-prod .right .price, .simple-prod .price.standalone { font-family: var(--eps-font); font-size: var(--eps-card-price-size); font-weight: 700; color: var(--eps-card-price-color); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* Sold / reserved: a label, not a blur. */
.simple-prod.st-sold .simple-wrap:after { background: rgba(255,255,255,.55); backdrop-filter: none; }
.simple-prod.st-sold .simple-wrap:before { transform: none; left: 8px; top: 8px; width: auto; border-radius: 4px; background: var(--sh-n-100); color: #4b535e; border: 1px solid var(--eps-border); box-shadow: none; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; }

/* List view keeps the same rules at a smaller crop. */
.products.list .simple-prod .img-wrap { border-radius: 6px; overflow: hidden; }
.products.list .simple-prod .img-wrap .bar { padding: 0; }
.products.list .simple-prod .price.standalone { color: var(--eps-text); }


/* --------------------------------------------------------------------------
   3. Controls, badges, feedback
   -------------------------------------------------------------------------- */

.eps-btn { border-radius: var(--eps-btn-radius); font-weight: 600; transition: background var(--eps-transition), border-color var(--eps-transition), color var(--eps-transition); }
.eps-btn:active { transform: scale(.99); }
.eps-btn--secondary { border-color: var(--sh-n-300); color: var(--eps-text); }
.eps-btn--secondary:hover { background: var(--eps-surface-alt); border-color: var(--sh-n-300); color: var(--eps-text); }
.eps-btn--ghost:hover { background: var(--eps-surface-alt); color: var(--eps-text); }
/* Disabled states darken rather than fade — opacity never expresses state. */
.eps-btn[disabled], .eps-btn.is-disabled { opacity: 1; background: var(--sh-n-100); color: #9aa3af; border-color: transparent; }

.eps-input, .eps-select, .eps-textarea { border-radius: var(--eps-input-radius); border-color: var(--eps-input-border); }
.eps-label { font-size: 14px; font-weight: 500; }
.eps-hint { font-size: 13px; }

.eps-badge { border-radius: 999px; background: var(--sh-n-100); color: #4b535e; font-size: 13px; }
.eps-badge--premium { background: var(--sh-promoted-bg); color: var(--sh-promoted-fg); border: 1px solid var(--sh-promoted-border); }
.eps-badge--urgent { background: var(--eps-danger-soft); color: #93251e; }
.eps-badge--success { background: var(--eps-success-soft); color: #0c6243; }
.eps-badge--warning { background: var(--eps-warning-soft); color: #8a5806; }

/* No coloured left-border accent bars anywhere in the system. */
.eps-alert { border: 1px solid transparent; border-left-width: 1px; border-radius: var(--eps-radius); background: var(--eps-info-soft); border-color: #cfe0f6; color: #144888; }
.eps-alert--success { background: var(--eps-success-soft); border-color: #c2e2d1; color: #0c6243; }
.eps-alert--warning { background: var(--eps-warning-soft); border-color: #ecd9ac; color: #8a5806; }
.eps-alert--error { background: var(--eps-danger-soft); border-color: #f0cbc9; color: #93251e; }
.eps-alert__body { color: inherit; opacity: .9; }
.eps-toast { border-left: none; border: 1px solid var(--eps-border); border-radius: var(--eps-radius-lg); box-shadow: var(--eps-shadow-lg); }

.eps-card { box-shadow: none; border-radius: var(--eps-radius); }
.eps-card:hover { box-shadow: var(--eps-shadow); }
.eps-card--link:hover { transform: translateY(-1px); }
.eps-card__price { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.eps-table th { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--eps-text-muted); }
.eps-table td { font-variant-numeric: tabular-nums; }
.eps-table tbody tr:hover { background: var(--eps-surface-alt); }

.eps-pagination a, .eps-pagination span { border-radius: var(--eps-radius-sm); border-color: var(--eps-border); }
.eps-pagination a:hover { background: var(--eps-surface-alt); border-color: var(--sh-n-300); color: var(--eps-text); }
.eps-pagination .is-current { background: var(--eps-primary); border-color: var(--eps-primary); }

.eps-tabs a { font-size: 15px; font-weight: 500; }


/* --------------------------------------------------------------------------
   4. Header and footer
   -------------------------------------------------------------------------- */

/* The header gains its shadow only once content scrolls beneath it — Epsilon
   adds .is-scrolled in js/global.js; if your build does not, drop this rule. */
#header, .header { background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--eps-border); box-shadow: none; }
#header.is-scrolled, .header.is-scrolled { box-shadow: 0 1px 3px rgba(14,20,28,.08); }

#footer, .footer { background: var(--eps-footer-bg); color: var(--eps-footer-text); }
#footer a, .footer a { color: var(--eps-footer-text); }
#footer a:hover, .footer a:hover { color: var(--eps-footer-link); }


/* --------------------------------------------------------------------------
   5. Item detail page
   --------------------------------------------------------------------------
   CSS-only half of theme/handoff-item-detail.md. The block reordering in
   item.php still has to happen in markup; everything here is safe to ship now.
   -------------------------------------------------------------------------- */

/* Two columns, sticky rail. */
.item-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 40px; align-items: start; }
.item-sidebar { position: sticky; top: calc(var(--eps-header-height, 72px) + 24px); display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 1023px) { .item-layout { grid-template-columns: 1fr; gap: 24px; } .item-sidebar { position: static; } }

/* Main photo is a 16:9 frame, never a full-height portrait. */
.item-gallery .item-photo { aspect-ratio: 16 / 9; background: var(--eps-surface-alt); border-radius: 8px; overflow: hidden; }
.item-gallery .item-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.item-gallery .item-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 12px; }
@media (max-width: 640px) { .item-gallery .item-thumbs { grid-template-columns: repeat(4, 1fr); } }
.item-gallery .item-thumbs a { aspect-ratio: 1 / 1; border: 2px solid transparent; border-radius: 6px; overflow: hidden; display: block; }
.item-gallery .item-thumbs a.is-active { border-color: var(--eps-primary); }
.item-gallery .item-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Description sits right under the title block, nothing floating beside it. */
.item-description { margin-top: 24px; }
.item-description p { max-width: 68ch; margin: 0 0 12px; }
.item-description .item-qr, .item-description .item-location-float { float: none; display: none; }

/* Specs fold into the description panel under a rule. */
.item-specs { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--eps-border-subtle, var(--eps-border)); }
.item-specs dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin: 0; }
@media (max-width: 640px) { .item-specs dl { grid-template-columns: 1fr; } }
.item-specs div { display: flex; justify-content: space-between; gap: 24px; padding: 12px 0; border-bottom: 1px solid var(--eps-border-subtle, var(--eps-border)); }
.item-specs dd { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; margin: 0; }

/* Legal notice: a disclosure row, not a full-width select. */
.item-legal { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--eps-border-subtle, var(--eps-border)); }
.item-legal summary { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; color: var(--eps-text-muted); cursor: pointer; list-style: none; }
.item-legal summary::-webkit-details-marker { display: none; }

/* One button family in the rail: same height, radius and icon size. */
.item-sidebar .btn, .item-actions .btn { width: 100%; min-height: 40px; border-radius: 5px; font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.item-actions { display: flex; flex-direction: column; gap: 8px; }
.item-actions .btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.item-actions .btn-primary { background: var(--eps-primary); border: 1px solid var(--eps-primary); color: #fff; }
.item-actions .btn-primary:hover { background: var(--eps-primary-dark); border-color: var(--eps-primary-dark); }
.item-actions .btn-secondary, .item-actions .btn-cart { background: #fff; border: 1px solid var(--eps-border-strong, var(--eps-border)); color: var(--eps-text); }
.item-actions .btn-secondary:hover, .item-actions .btn-cart:hover { background: var(--eps-surface-alt); }
.item-actions .btn:active { transform: scale(.99); }
.item-actions .btn-report { background: none; border: none; color: var(--eps-text-muted); font-size: 14px; justify-content: flex-start; }

/* Price row in the rail. */
.item-price-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.item-price-row .price { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--eps-text); }

/* Location card replaces the floated QR/address block. */
.item-location-card .map { aspect-ratio: 16 / 9; border: 1px solid var(--eps-border); border-radius: 8px; overflow: hidden; margin-top: 12px; }

/* Listing card overlays: price bottom-left, photo count bottom-right, avatar
   moved into the card body (see app/shell.jsx). */
.listing-card .card-price { left: 10px; right: auto; bottom: 10px; }
.listing-card .card-photocount { right: 10px; left: auto; bottom: 10px; }
.listing-card .card-avatar { position: static; box-shadow: none; }


/* --------------------------------------------------------------------------
   How to enqueue
   --------------------------------------------------------------------------
   In head.php, after the three existing osc_enqueue_style() calls, add:

     osc_enqueue_style('shopel', osc_current_web_theme_url('css/shopel.css' . eps_asset_version()));

   Nothing else needs to change. If Appearance > Epsilon > Design is switched
   on, its inline block still sets --eps-* on :root, which is why the token
   block above uses :root:root — this sheet wins either way.
   ========================================================================== */