/*
Theme Name:  True Ceylon Spices
Theme URI:   https://trueceylonspices.com
Description: True Ceylon Spices child theme — built on Storefront. Custom WooCommerce product page, shop grid, cart, checkout and global design system for a premium organic Ceylon cinnamon brand.
Author:      True Ceylon Spices
Author URI:  https://trueceylonspices.com
Template:    storefront
Version:     1.0.0
License:     GNU General Public License v2 or later
Text Domain: trueceylon
*/

/* ============================================================
   DESIGN TOKENS
   All colours, fonts and radii are defined here as CSS custom
   properties. Change a value here and it updates the entire
   theme automatically.
   ============================================================ */
:root {
    /* ── Primary accent ── */
    --tcs-accent:        #6f5f96;   /* lavender-purple (CTA buttons, links) */
    --tcs-accent-lt:     #8b7bb0;   /* hover / active tint */
    --tcs-accent-bg:     #f6f4fa;   /* very light tint for panels */

    /* ── Dark tones ── */
    --tcs-dark:          #333333;   /* headings */
    --tcs-dark-mid:      #4a4458;   /* nav / footer background */
    --tcs-dark-soft:     #6b6280;

    /* ── Text ── */
    --tcs-body:          #444444;   /* body copy */
    --tcs-muted:         #777777;   /* secondary labels */

    /* ── Backgrounds ── */
    --tcs-white:         #ffffff;
    --tcs-cream:         #f8f7fc;   /* site background */
    --tcs-panel:         #f3f1f9;   /* card / section panels */
    --tcs-panel-mid:     #ebe7f3;

    /* ── Borders ── */
    --tcs-border:        #d6cfe6;
    --tcs-border-lt:     #e6e1f0;

    /* ── Organic green (USDA, trust signals) ── */
    --tcs-green:         #5a8c3a;
    --tcs-green-bg:      #eef5e8;
    --tcs-green-bd:      #a8cc88;

    /* ── Warm gold (stars, highlights) ── */
    --tcs-gold:          #c98a2e;
    --tcs-gold-bg:       #fdf6e0;
    --tcs-gold-bd:       #e8c890;

    /* ── Element overrides ── */
    --tcs-btn-bg:        var(--tcs-accent);
    --tcs-btn-text:      #ffffff;
    --tcs-btn-hover:     var(--tcs-accent-lt);
    --tcs-price:         var(--tcs-dark);
    --tcs-stars:         var(--tcs-gold);
    --tcs-nav-bg:        var(--tcs-dark-mid);
    --tcs-nav-text:      #ffffff;
    --tcs-footer-bg:     var(--tcs-dark-mid);
    --tcs-footer-text:   #f0ecf8;

    /* ── Typography ── */
    --tcs-font-d:        'Berkshire Swash', Georgia, serif;
    --tcs-font-h:        'Lora', Georgia, serif;
    --tcs-font-b:        'Inter', system-ui, -apple-system, sans-serif;

    /* ── Shape ── */
    --tcs-r:             6px;
    --tcs-r-lg:          12px;
    --tcs-r-xl:          18px;
}

/* ============================================================
   BASE RESETS & TYPOGRAPHY
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
    background: var(--tcs-cream);
    color: var(--tcs-body);
    font-family: var(--tcs-font-b);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--tcs-font-h);
    color: var(--tcs-dark);
    font-weight: 500;
    line-height: 1.25;
}
h1 { font-family: var(--tcs-font-d); font-weight: 400; font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.25rem; }

p { margin-bottom: 1rem; }
a { color: var(--tcs-accent); text-decoration: none; transition: color .15s; }
a:hover { color: var(--tcs-accent-lt); }
img { display: block; max-width: 100%; height: auto; }

/* ============================================================
   SITE WRAPPER
   ============================================================ */
.site { max-width: 1200px; margin: 0 auto; background: var(--tcs-white); box-shadow: 0 2px 40px rgba(74,68,88,.08); }

/* ============================================================
   HEADER & NAV
   ============================================================ */
.site-header {
    background: var(--tcs-nav-bg);
    border-bottom: 3px solid var(--tcs-accent);
    padding: 0 32px;
}
.site-header .site-branding { padding: 14px 0; }
.site-title a, .site-title a:visited {
    color: var(--tcs-nav-text);
    font-family: var(--tcs-font-d);
    font-size: 1.3rem;
    font-weight: 400;
}
.site-description { color: rgba(255,255,255,.6); font-size: .8rem; }

/* Nav */
.main-navigation { background: var(--tcs-nav-bg); }
.main-navigation a {
    color: rgba(255,255,255,.85) !important;
    font-family: var(--tcs-font-b);
    font-size: .82rem;
    letter-spacing: .04em;
    font-weight: 500;
    padding: 18px 14px !important;
}
.main-navigation a:hover { color: #fff !important; background: rgba(255,255,255,.08); }
.main-navigation ul li.current-menu-item > a { color: #fff !important; }

/* Storefront header cart */
.storefront-handheld-footer-bar,
.site-header-cart .cart-contents {
    background: var(--tcs-accent);
    color: var(--tcs-btn-text);
    border-radius: var(--tcs-r);
    padding: 8px 16px;
    font-weight: 600;
    font-size: .85rem;
}
.site-header-cart .cart-contents:hover { background: var(--tcs-accent-lt); }

/* ============================================================
   STOREFRONT HERO STRIP (optional)
   ============================================================ */
.storefront-hero { display: none; } /* hidden — use page-builder or widgets */

/* ============================================================
   WooCommerce GLOBAL
   ============================================================ */

/* Remove default WC breadcrumb styling */
.woocommerce-breadcrumb {
    font-size: .8rem;
    color: var(--tcs-muted);
    padding: 12px 32px;
    background: var(--tcs-panel);
    border-bottom: 1px solid var(--tcs-border);
    margin: 0 !important;
}
.woocommerce-breadcrumb a { color: var(--tcs-muted); }
.woocommerce-breadcrumb a:hover { color: var(--tcs-accent); }

/* Price */
.woocommerce .price, .woocommerce-page .price {
    color: var(--tcs-price) !important;
    font-family: var(--tcs-font-d) !important;
    font-size: 1.6rem !important;
    font-weight: 400 !important;
}
.woocommerce .price ins { text-decoration: none !important; }

/* Buttons — primary */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce a.button.alt {
    background: var(--tcs-btn-bg) !important;
    color: var(--tcs-btn-text) !important;
    border: none !important;
    border-radius: var(--tcs-r) !important;
    font-family: var(--tcs-font-b) !important;
    font-weight: 600 !important;
    font-size: .95rem !important;
    padding: 13px 22px !important;
    transition: background .15s !important;
    text-transform: none !important;
    letter-spacing: .01em !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button.alt:hover,
.woocommerce button.button.alt:hover {
    background: var(--tcs-btn-hover) !important;
    color: var(--tcs-btn-text) !important;
}

/* Stars */
.woocommerce .star-rating span::before { color: var(--tcs-stars) !important; }
.woocommerce .star-rating { color: var(--tcs-stars) !important; }

/* Notices */
.woocommerce-message { border-top-color: var(--tcs-accent) !important; }
.woocommerce-info { border-top-color: var(--tcs-accent) !important; }

/* ============================================================
   SHOP / ARCHIVE GRID
   ============================================================ */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    margin: 0 !important;
}
@media (max-width: 900px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 640px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 380px) { .woocommerce ul.products { grid-template-columns: 1fr !important; } }

.woocommerce ul.products li.product {
    background: var(--tcs-white) !important;
    border: 1px solid var(--tcs-border) !important;
    border-radius: var(--tcs-r-lg) !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    width: auto !important;
    transition: box-shadow .18s, transform .18s !important;
    display: flex !important;
    flex-direction: column !important;
}
.woocommerce ul.products li.product:hover {
    box-shadow: 0 6px 28px rgba(111,95,150,.14) !important;
    transform: translateY(-3px) !important;
}
.woocommerce ul.products li.product a img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--tcs-font-h) !important;
    font-size: .95rem !important;
    font-weight: 500 !important;
    color: var(--tcs-dark) !important;
    padding: 12px 14px 4px !important;
    line-height: 1.4 !important;
}
.woocommerce ul.products li.product .price {
    font-size: 1rem !important;
    padding: 0 14px 10px !important;
}
.woocommerce ul.products li.product .button {
    margin: 0 14px 14px !important;
    text-align: center !important;
    width: calc(100% - 28px) !important;
    display: block !important;
}
/* Organic badge on card */
.woocommerce ul.products li.product .onsale {
    background: var(--tcs-green) !important;
    color: #fff !important;
    border-radius: 30px !important;
    font-size: .72rem !important;
    font-weight: 600 !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    padding: 4px 12px !important;
    min-height: auto !important;
    min-width: auto !important;
    line-height: 1.4 !important;
}

/* ============================================================
   CART PAGE
   ============================================================ */
.woocommerce table.cart { border-collapse: collapse; width: 100%; }
.woocommerce table.cart thead tr th {
    background: var(--tcs-dark-mid);
    color: #fff;
    font-family: var(--tcs-font-b);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 12px 16px;
    border: none;
}
.woocommerce table.cart td {
    padding: 16px;
    border-bottom: 1px solid var(--tcs-border-lt);
    vertical-align: middle;
}
.woocommerce table.cart .product-thumbnail img {
    border-radius: var(--tcs-r);
    width: 72px;
    height: 72px;
    object-fit: cover;
}
.woocommerce table.cart .product-name a { color: var(--tcs-dark); font-weight: 500; }
.woocommerce table.cart .product-name a:hover { color: var(--tcs-accent); }
.woocommerce .cart-collaterals .cart_totals { background: var(--tcs-panel); border-radius: var(--tcs-r-lg); padding: 24px; border: 1px solid var(--tcs-border); }
.woocommerce .cart_totals h2 { font-size: 1.1rem; color: var(--tcs-dark); margin-bottom: 16px; }
.woocommerce .cart_totals table { width: 100%; }
.woocommerce .cart_totals table th, .woocommerce .cart_totals table td { padding: 10px 0; border-bottom: 1px solid var(--tcs-border); font-size: .9rem; }
.woocommerce .cart_totals .order-total th, .woocommerce .cart_totals .order-total td { border-bottom: none; font-weight: 700; font-size: 1.1rem; }
.woocommerce .quantity input.qty { border: 1.5px solid var(--tcs-border); border-radius: var(--tcs-r); padding: 8px 12px; width: 72px; text-align: center; font-size: .95rem; }
.woocommerce .quantity input.qty:focus { outline: none; border-color: var(--tcs-accent); }
.woocommerce .coupon .input-text { border: 1.5px solid var(--tcs-border); border-radius: var(--tcs-r); padding: 11px 14px; font-size: .92rem; }
.woocommerce .coupon .input-text:focus { outline: none; border-color: var(--tcs-accent); }

/* ============================================================
   CHECKOUT PAGE
   ============================================================ */
.woocommerce-checkout .woocommerce { padding: 32px; }
.woocommerce form .form-row label { font-size: .82rem; font-weight: 600; color: var(--tcs-dark); margin-bottom: 5px; display: block; letter-spacing: .02em; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
    border: 1.5px solid var(--tcs-border) !important;
    border-radius: var(--tcs-r) !important;
    padding: 11px 14px !important;
    font-size: .92rem !important;
    font-family: var(--tcs-font-b) !important;
    color: var(--tcs-dark) !important;
    background: var(--tcs-white) !important;
    width: 100% !important;
    transition: border-color .15s !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus { border-color: var(--tcs-accent) !important; outline: none !important; }
#order_review { background: var(--tcs-panel); border-radius: var(--tcs-r-lg); padding: 24px; border: 1px solid var(--tcs-border); }
#order_review h3 { font-size: 1.1rem; margin-bottom: 16px; }
.woocommerce-checkout #payment { background: var(--tcs-panel); border-radius: var(--tcs-r-lg); border: 1px solid var(--tcs-border); }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--tcs-border); padding: 16px 20px; }
.woocommerce-checkout #payment .payment_method_paypal img { vertical-align: middle; height: 22px; }

/* ============================================================
   MY ACCOUNT
   ============================================================ */
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; }
.woocommerce-MyAccount-navigation li a {
    display: block; padding: 11px 16px; border-radius: var(--tcs-r);
    color: var(--tcs-body); font-size: .9rem; transition: background .15s, color .15s;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover { background: var(--tcs-accent-bg); color: var(--tcs-accent); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    background: var(--tcs-footer-bg);
    color: var(--tcs-footer-text);
    border-top: 4px solid var(--tcs-accent);
    padding: 44px 32px 20px;
}
.site-footer a { color: var(--tcs-footer-text); opacity: .8; }
.site-footer a:hover { opacity: 1; color: #fff; }
.site-footer .widget-title { color: #fff; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin-bottom: 14px; font-family: var(--tcs-font-b); }
.site-footer .site-info { font-size: .78rem; color: rgba(255,255,255,.5); border-top: 1px solid rgba(255,255,255,.1); padding-top: 16px; margin-top: 32px; text-align: center; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .site-header { padding: 0 18px; }
    .woocommerce-breadcrumb { padding: 10px 18px; }
    .site-footer { padding: 32px 18px 16px; }
    .woocommerce-checkout .woocommerce { padding: 18px; }
}
@media (max-width: 480px) {
    h1 { font-size: 1.5rem; }
    .woocommerce table.cart td { padding: 10px; }
}