/*
 * Siri Spices ERP — storefront CSS.
 *
 * 1) Register "Canastra Italic" as a usable font family.
 * 2) Alias the theme's existing "Greatest Richmond" family to the same file,
 *    so every heading already using "Greatest Richmond" (hero, section titles,
 *    etc.) automatically renders in Canastra Italic — no widget edits needed.
 * 3) Lock product images to consistent dimensions.
 */

@font-face {
    font-family: 'Canastra Italic';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Canastra-Italic.woff2') format('woff2'),
         url('../fonts/Canastra-Italic.otf')   format('opentype');
}

@font-face {
    font-family: 'Canastra';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Canastra-Italic.woff2') format('woff2'),
         url('../fonts/Canastra-Italic.otf')   format('opentype');
}

/* Override Elementor global typography variables so every place using the
   theme's tertiary font (`tertiary-font` class, `var(--e-global-typography-tertiary-font-family)`)
   resolves to Canastra Italic.
   Note: the kit defines these on `.elementor-kit-6`, not `:root`, so `:root`
   alone loses the cascade. Target the kit class directly. */
:root,
.elementor-kit-6,
body.elementor-kit-6,
html body.elementor-kit-6 {
    --e-global-typography-tertiary-font-family: "Canastra Italic" !important;
    --e-global-typography-tertiary-font-style: italic !important;
}

/* Belt-and-braces: anything still asking for Greatest Richmond by name. */
[style*="Greatest Richmond"],
[class*="Greatest Richmond"] {
    font-family: "Canastra Italic", serif !important;
    font-style: italic !important;
}

/* Hero headline ("The secret is in the spice.") was huge — cap with a
   responsive clamp. Element id ad8ed61 on the home page. */
.elementor-element.elementor-element-ad8ed61 .elementor-heading-title,
.elementor-element-ad8ed61 .elementor-heading-title {
    font-size: clamp(2.25rem, 5vw, 4.5rem) !important;
    line-height: 1.05;
}

/* Product image dimensions: keep tight, only target the WooCommerce thumbnail <img>. */
img.attachment-woocommerce_thumbnail,
img.attachment-woocommerce_single,
img.attachment-shop_catalog,
img.attachment-shop_single {
    aspect-ratio: 4 / 5;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    background: #fff;
}

/* Supermarket trust marks — display-only, no links. A subtle "available at"
   strip with brand names separated by a thin divider, in soft serif italic
   so they read as a credibility line, not a button row. */
.siri-trustmarks {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin: 18px auto 28px;
    padding: 0;
    color: #6b7280;
    font-size: 15px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-weight: 600;
}

.siri-trustmark {
    display: inline-block;
    padding: 6px 18px;
    color: #4b5563;
    user-select: none;
    cursor: default;
    pointer-events: none;
    background: transparent;
    border: none;
    position: relative;
}

.siri-trustmark + .siri-trustmark::before {
    content: "·";
    position: absolute;
    left: -3px;
    color: #cbd5e1;
    font-weight: 700;
}

/* Smart CTA — keep generic but elegant. We target the inner anchor that
   Elementor renders so we don't double-style with the wrapper. */
.elementor-widget-button.siri-smart-cta .elementor-button-wrapper,
.elementor-widget-button.siri-smart-cta .elementor-widget-container {
    background: transparent !important;
    padding: 0;
}

.siri-smart-cta a.elementor-button,
a.siri-smart-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 36px !important;
    background: #d97706 !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 999px !important;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
    border: none !important;
    box-shadow: 0 6px 20px rgba(217, 119, 6, 0.22);
    min-width: 200px;
}

.siri-smart-cta a.elementor-button:hover,
a.siri-smart-cta:hover {
    background: #b45309 !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(180, 83, 9, 0.28);
}

.siri-smart-cta a.elementor-button .elementor-button-text {
    color: #fff !important;
}

/* "Where to Buy" page — outlet cards */
.siri-outlets-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 16px 40px;
}

.siri-outlets-intro {
    font-size: 18px;
    color: #4b5563;
    text-align: center;
    margin: 0 auto 36px;
    max-width: 640px;
    line-height: 1.5;
}

.siri-outlets-group { margin-bottom: 40px; }

.siri-outlets-group h2 {
    font-size: 22px;
    color: #0a472e;
    margin: 0 0 20px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f3f4f6;
}

.siri-outlets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.siri-outlet-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 22px 20px;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;
}

.siri-outlet-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    border-color: #d97706;
}

.siri-outlet-card h3 {
    margin: 0 0 8px;
    font-size: 18px;
    color: #1f2937;
}

.siri-outlet-card p {
    margin: 0 0 18px;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
    flex-grow: 1;
}

.siri-outlet-btn {
    display: inline-block;
    padding: 10px 18px;
    background: #0a472e;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    transition: background 0.15s;
    align-self: flex-start;
}

.siri-outlet-btn:hover { background: #14794d; }

.siri-outlets-foot {
    text-align: center;
    color: #6b7280;
    font-size: 14px;
    margin: 32px 0 0;
}

.siri-outlets-foot a { color: #d97706; font-weight: 600; }

/* Cart line items: small uniform square */
.woocommerce-cart .product-thumbnail img,
.woocommerce-checkout .product-thumbnail img,
.mini-cart .product-thumbnail img,
.cart_item .product-thumbnail img {
    width: 64px;
    height: 64px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}