/* ============================================================
   VINUM SHOP — Component Stylesheet
   Loaded after bootstrap.css + Default.css
   Font: 'Gotham A','Gotham B',Arial,sans-serif  (body = Guardian Egyptian serif 20px)
   Accent: #99b19a  Border-bold: 2px solid #111
   ============================================================ */

/* ── Base font reset for all shop UI ── */
.shop-content,
.shop-content *,
.offcanvas,
.offcanvas * {
    font-family: 'Gotham A', 'Gotham B', Arial, sans-serif;
}
/* Restore Font Awesome — its icons require font-family: FontAwesome */
.shop-content .fa,
.shop-content .fa:before,
.offcanvas .fa,
.offcanvas .fa:before {
    font-family: FontAwesome !important;
}

/* ── Back / breadcrumb link ── */
.shop-back {
    color: #888;
    font-size: 15px;
    text-decoration: none;
}
.shop-back:hover,
.shop-back:focus { color: #555; text-decoration: none; }

/* ── Headings ── */
.shop-h1 { font-size: 28px; font-weight: 700; margin: 0 0 10px; letter-spacing: -0.02em; }
.shop-h2 { font-size: 20px; font-weight: 700; margin: 0; }
.shop-h3 { font-size: 18px; font-weight: 700; margin: 0; }
.shop-meta { font-size: 15px; color: #888; }

/* ── Badge (ABO, DIGITAL, etc.) ── */
.shop-badge {
    display: inline-block;
    background: #99b19a;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ── Prices ── */
.shop-price-xl  { font-size: 32px; font-weight: 700; color: #99b19a; line-height: 1.1; }
.shop-price-lg  { font-size: 24px; font-weight: 700; color: #99b19a; }
.shop-price-md  { font-size: 20px; font-weight: 700; color: #99b19a; }
.shop-price     { font-size: 16px; font-weight: 700; color: #222; }

/* ── Text helpers ── */
.shop-muted     { font-size: 14px; color: #888; line-height: 1.4; }
.shop-secondary { font-size: 16px; color: #666; }
.shop-accent    { color: #99b19a; }

/* ── Hero section (page title + intro) ── */
.shop-hero {
    text-align: center;
    padding: 20px 0 36px;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 40px;
}
.shop-hero-intro {
    color: #666;
    max-width: 600px;
    margin: 8px auto 0;
    font-size: 16px;
    line-height: 1.6;
}

/* ── Section header row (title left, link right) ── */
.shop-section-head { margin-bottom: 20px; overflow: hidden; }
.shop-section-head::after { content: ''; display: table; clear: both; }
.shop-section-link {
    float: right;
    font-size: 15px;
    color: #99b19a;
    font-weight: 600;
    text-decoration: none;
    margin-top: 4px;
}
.shop-section-link:hover { color: #5a8a5c; text-decoration: none; }

/* ── Widget icon override ── */
.shop-widget-icon {
    background-image: none !important;
    text-align: center;
    line-height: 60px;
    font-size: 18px;
    color: #99b19a;
}

/* ── Quantity stepper ── */
/* Uses plain table so borders collapse cleanly — no Bootstrap input-group quirks */
.shop-stepper {
    display: inline-table;
    border-collapse: collapse;
    vertical-align: middle;
}
.shop-stepper td {
    padding: 0;
    border: 1px solid #ccc;
    vertical-align: middle;
}
.shop-stepper .btn {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: #fff;
    color: #333;
    padding: 5px 11px;
    line-height: 1.4;
    display: block;
}
.shop-stepper .btn:hover  { background: #f5f5f5; color: #111; }
.shop-stepper .btn:active { background: #eaeaea; }
.shop-stepper .btn:disabled,
.shop-stepper .btn[disabled] { opacity: 0.3; cursor: not-allowed; }
.shop-stepper-qty {
    padding: 5px 12px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    background: #fff;
    min-width: 36px;
    white-space: nowrap;
}

/* ── Price breakdown table (cart, checkout summary) ── */
.shop-price-table { width: 100%; border-collapse: collapse; }
.shop-price-table td { padding: 9px 0; vertical-align: middle; }
.shop-price-table .label-col { font-size: 16px; color: #666; }
.shop-price-table .value-col { font-size: 16px; text-align: right; white-space: nowrap; }
.shop-price-table .muted-col { font-size: 14px; color: #aaa; }
.shop-price-table tr.subtotal-row { border-bottom: 1px solid #eee; }
.shop-price-table tr.total-row    { border-top: 2px solid #111; }
.shop-price-table tr.total-row td { padding-top: 12px; padding-bottom: 12px; }

/* ── Product card ── */
.shop-card-img {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f5f5f5;
}
.shop-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.shop-card-img .shop-badge { position: absolute; top: 8px; left: 8px; }
.shop-card-placeholder {
    width: 100%;
    text-align: center;
    padding-top: 40%;
    color: #ccc;
    font-size: 2rem;
}
.shop-card-body  { padding: 12px 8px 8px; }
.shop-card-title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px;
    line-height: 1.3;
    color: #111;
    text-decoration: none;
}
.shop-card-title:hover { color: #99b19a; text-decoration: none; }
.shop-card-teaser { font-size: 14px; color: #888; margin: 0 0 8px; line-height: 1.45; }
.shop-card-foot   { margin-top: 8px; overflow: hidden; }

/* ── Feature list (subscription tiers) ── */
.shop-feature-list { list-style: none; margin: 0 0 20px; padding: 0; }
.shop-feature-item { margin-bottom: 8px; overflow: hidden; }
.shop-feature-item > i    { float: left; margin-top: 3px; margin-right: 8px; }
.shop-feature-item > span { display: block; overflow: hidden; font-size: 16px; color: #444; line-height: 1.4; }
.shop-feature-item.excluded { opacity: 0.4; }

/* ── Empty state ── */
.shop-empty { text-align: center; padding: 80px 20px; }
.shop-empty-icon { font-size: 3.5rem; color: #ccc; display: block; margin-bottom: 24px; }

/* ── Trust / security line below CTA button ── */
.shop-trust { margin-top: 14px; font-size: 15px; color: #888; text-align: center; }

/* ── Offcanvas overrides ── */
.offcanvas-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 2px solid #111; flex-shrink: 0; background: #fff; }
.offcanvas-body   { flex: 1; overflow-y: auto; font-size: 16px; }
.offcanvas-footer { padding: 20px 24px; border-top: 1px solid #e5e5e5; flex-shrink: 0; background: #f8f8f8; font-size: 16px; }
.offcanvas-title  { margin: 0; font-size: 20px; font-weight: 700; }
.btn-close { background: transparent; border: none; font-size: 1.6rem; cursor: pointer; padding: 0 4px; line-height: 1; color: #888; }
.btn-close:hover { color: #000; }
.btn-close::before { content: '×'; }

/* ── Widget padding — Default.css only adds horizontal padding (0 30px); shop needs vertical breathing room too ── */
.shop-content .widget-content.with-padding { padding: 24px 30px; }
.shop-content .widget-head { padding: 0 30px; }

/* ── Number input — hide browser spin arrows ── */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }