/*
 * thokai-inner.css — inner-page design, matched to the landing page.
 *
 * The landing page's visual language, read straight off the Elementor data
 * for page 9 so this file repeats it rather than approximating it:
 *
 *   eyebrow        Courgette 30px            (script, teal)
 *   section title  BaskOldFace 40-50px / 600 (uppercase, maroon | green | brown)
 *   sub-line       Calibri 23-26px           (grey)
 *   ground         feather-bg.webp band, or the pale #e8f0f7 collection blue
 *   buttons        blue/brown/green-btn-bg.webp shaped plates, white caps
 *   product card   cream fill, italic brown title, teal price, brown plate CTA
 *
 * Colour tokens come from thokai-design.css, which loads first.
 */

:root {
    --td-display: "BaskOldFace", "Baskerville Old Face", Baskerville, "Libre Baskerville", "Playfair Display", Georgia, serif;
    --td-script:  "Courgette", "Segoe Script", cursive;
    --td-body:    "Calibri", "Segoe UI", Tahoma, sans-serif;

    /* the cyan plate reads much brighter than the brand teal, so buttons pair
       brown at rest with green on hover; blue is kept for the odd accent only */
    --td-btn-blue:  url("../../../../uploads/2026/09/blue-btn-bg.webp");
    --td-btn-brown: url("../../../../uploads/2026/09/brown-btn-bg.webp");
    --td-btn-green: url("../../../../uploads/2026/09/green-btn-bg.webp");
    --td-band:      url("../../../../uploads/2026/09/feather-bg.webp");
    --td-collect-bg:url("../../../../uploads/2026/09/shop-bg.webp");
}


/* =====================================================================
   1. PAGE HERO — the band every inner page opens on
   ===================================================================== */

.tk-hero {
    position: relative;
    background: #fff var(--td-band) no-repeat center center;
    background-size: cover;
    padding: 54px 0 44px;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(72, 24, 12, .07);
}
.tk-hero-inner { position: relative; z-index: 2; }

.tk-hero-eyebrow {
    font-family: var(--td-script);
    font-size: clamp(19px, 2.1vw, 28px);
    line-height: 1.3;
    color: var(--td-teal) !important;
    margin: 0 0 2px;
}

.tk-hero-title {
    font-family: var(--td-display);
    font-size: clamp(30px, 4.2vw, 50px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--td-maroon);
    margin: 0;
}

/* our-story-dec.webp is the little rule the landing page sets under the
   wordmark; it doubles as the divider beneath a page title. */
.tk-hero-orn {
    display: block;
    width: 220px;
    height: 20px;
    margin: 12px auto 0;
    background: url("../../../../uploads/2026/09/our-story-dec.webp") no-repeat center center;
    background-size: contain;
    opacity: .9;
}

.tk-hero-sub {
    font-family: var(--td-body);
    font-size: clamp(15px, 1.4vw, 21px);
    color: var(--td-ink) !important;
    max-width: 720px;
    margin: 10px auto 0;
}

/* ---- breadcrumbs (theme, Woo archive and Woo single all land here) ---- */
.tk-crumbs,
.tk-hero .woocommerce-breadcrumb {
    font-family: var(--td-body);
    font-size: 14px;
    letter-spacing: .04em;
    color: var(--td-ink);
    margin: 16px 0 0;
}
.tk-crumbs a,
.tk-hero .woocommerce-breadcrumb a { color: var(--td-teal); text-decoration: none; }
.tk-crumbs a:hover,
.tk-hero .woocommerce-breadcrumb a:hover { color: var(--td-green); text-decoration: underline; }
.tk-crumbs .sep { color: #b6c6d0; padding: 0 8px; }
.tk-crumbs [aria-current="page"] { color: var(--td-brown); }

@media (max-width: 767px) {
    .tk-hero { padding: 34px 0 28px; background-size: 190% auto; }
    .tk-hero-orn { width: 160px; }
}


/* =====================================================================
   2. SHOP / CATEGORY ARCHIVE
   ===================================================================== */

.tk-archive {
    /* the collection band's feather artwork, veiled back to a whisper so it
       reads as a ground rather than competing with the product cards */
    /* background-color: #ffff;
    background-image:
        linear-gradient(to bottom,
            rgba(232, 240, 247, .50) 0%,
            rgba(232, 240, 247, .88) 55%,
            var(--collect) 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center top; */
    background-size: 100% 660px, 100% auto;
    padding: 46px 0 60px;
}
.tk-archive > .container { position: relative; z-index: 2; }

/* result count + sort row */
.tk-archive-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 26px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.tk-archive-bar .woocommerce-result-count {
    font-family: var(--td-body);
    font-size: 15px;
    color: var(--td-ink);
    margin: 0;
}
.tk-archive-bar .woocommerce-ordering { margin: 0; }
.tk-archive-bar select,
.tk-archive-bar .orderby {
    font-family: var(--td-body);
    font-size: 14px;
    color: var(--td-brown);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 9px 14px;
    outline: none;
}
.tk-archive-bar select:focus { border-color: var(--td-teal-lt); }

/* category description, when a term has one */
.tk-term-intro {
    font-family: var(--td-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--td-ink);
    max-width: 900px;
    margin: 0 auto 30px;
    text-align: center;
}

/* ---- product cards: the Featured Products card, reused ---- */
.tk-archive ul.products,
.woocommerce ul.products { margin: 0; padding: 0; }

.tk-archive ul.products li.product,
.woocommerce-page ul.products li.product {
    background: var(--cream);
    border-radius: 14px;
    overflow: hidden;
    padding: 0 0 25px !important;
    text-align: center;
    box-shadow: 0 4px 16px rgba(72, 24, 12, .07);
    transition: transform .3s ease, box-shadow .3s ease;
}
.tk-archive ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 26px rgba(72, 24, 12, .14);
    background: var(--td-white);
}
.tk-archive ul.products li.product img,
.woocommerce-page ul.products li.product img {
    border-radius: 0;
    margin-bottom: 12px;
}
.tk-archive ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {   
    font-style: italic;
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 1.35;
    color: var(--td-brown);
    text-transform: capitalize;
    padding: 0 14px !important;
    margin: 0 0 6px !important;
    min-height: calc(16px * 1.35 * 2);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.tk-archive ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
    display: block;
    margin-bottom: 12px;
    color: var(--td-teal-lt) !important;
}
.tk-archive ul.products li.product .price .amount,
.woocommerce-page ul.products li.product .price .amount {
    font-size: 20px;
    font-weight: 600;
    font-style: italic;
    color: var(--td-teal-lt);
}
.tk-archive ul.products li.product .price del { opacity: .55; }
.tk-archive ul.products li.product .price ins { text-decoration: none; }

/* sale flash, teal instead of Woo's default green pill */
.tk-archive ul.products li.product .onsale,
.woocommerce-page span.onsale {
    background: var(--td-maroon) !important;
    color: #fff !important;
    font-family: var(--td-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 3px;
    padding: 4px 12px;
    min-height: 0;
    line-height: 1.4;
}

/* out of stock note */
.tk-archive ul.products li.product.outofstock .woocommerce-loop-product__link { position: relative; }
.tk-archive ul.products li.product.outofstock .woocommerce-loop-product__link::after {
    content: "Sold out";
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(108, 24, 36, .9);
    color: #fff;
    font-family: var(--td-body);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 3px;
}


/* =====================================================================
   3. BUTTONS — the shaped plates from the landing page
   ===================================================================== */

.tk-btn,
.tk-archive ul.products li.product .button,
.woocommerce-page ul.products li.product .button,
.tk-empty .tk-btn {
    display: inline-block;
    background-color: transparent !important;
    background-image: var(--td-btn-brown) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
    font-family: var(--td-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 11px 30px !important;
    box-shadow: none;
    transition: filter .3s ease, background-image .3s ease;
}
.tk-btn:hover,
.tk-archive ul.products li.product .button:hover,
.woocommerce-page ul.products li.product .button:hover {
    background-image: var(--td-btn-green) !important;
    transform: none;
    color: #fff !important;
}
.tk-btn--blue  { background-image: var(--td-btn-blue) !important; }
.tk-btn--blue:hover  { background-image: var(--td-btn-green) !important; }
.tk-btn--green { background-image: var(--td-btn-green) !important; }
.tk-btn--green:hover { background-image: var(--td-btn-brown) !important; }

/* Woo prints "View cart" after an ajax add; the landing page doesn't show it */
.tk-archive ul.products li.product .added_to_cart { display: none; }


/* =====================================================================
   4. PAGINATION
   ===================================================================== */

.woocommerce nav.woocommerce-pagination { margin-top: 44px; }
.woocommerce nav.woocommerce-pagination ul {
    border: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.woocommerce nav.woocommerce-pagination ul li {
    border: 0;
    overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    font-family: var(--td-body);
    font-size: 15px;
    min-width: 40px;
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fff;
    color: var(--td-brown);
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
    background: var(--td-teal-lt);
    border-color: var(--td-teal-lt);
    color: #fff;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--td-teal);
    border-color: var(--td-teal);
    color: #fff;
    font-weight: 600;
}


/* =====================================================================
   5. STATIC CONTENT PAGES (About, Contact, policies — Elementor built)
   ===================================================================== */

.tk-content {
    background: #fff;
    padding: 54px 0 66px;
}
.tk-content .entry-content,
.page:not(.home) .elementor-widget-text-editor,
.page:not(.home) .elementor-widget-theme-post-content {
    font-family: var(--td-body);
    font-size: 17px;
    line-height: 1.75;
    color: var(--text);
}
.tk-content .entry-content p { color: var(--text); margin-bottom: 16px; }

/* Elementor headings on inner pages take the landing type scale */
.page:not(.home) .elementor-widget-heading .elementor-heading-title,
.tk-content h1, .tk-content h2, .tk-content h3, .tk-content h4 {
    font-family: var(--td-display);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--td-maroon);
}
.tk-content h2 { font-size: clamp(24px, 2.6vw, 34px); margin: 0px; text-transform: uppercase; }
.tk-content h3 { font-size: clamp(19px, 2vw, 24px); margin: 26px 0 10px; color: var(--td-brown); }
.tk-content h4 { font-size: 18px; margin: 20px 0 8px; color: var(--td-teal-dk); }

.tk-prose a { color: var(--td-teal); text-decoration: underline; }
.tk-prose a:hover { color: var(--td-green); }

/* Prose lists only. Scoped to the copy areas rather than "any ul inside
   .tk-content", which would also restyle the WooCommerce block product grids
   and the cart's line items. */
.tk-prose ul,
.tk-content--elementor .elementor-widget-text-editor ul,
.tk-prose ol,
.tk-content--elementor .elementor-widget-text-editor ol { margin: 0 0 18px 22px; }
.tk-prose li,
.tk-content--elementor .elementor-widget-text-editor li { margin-bottom: 8px; color: var(--text); }
.tk-prose ul,
.tk-content--elementor .elementor-widget-text-editor ul { list-style: none; margin-left: 0; }
.tk-prose ul li,
.tk-content--elementor .elementor-widget-text-editor ul li { position: relative; padding-left: 24px; }
.tk-prose ul li::before,
.tk-content--elementor .elementor-widget-text-editor ul li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--td-teal-lt);
}
.tk-prose ol,
.tk-content--elementor .elementor-widget-text-editor ol { margin-left: 22px; }
.tk-prose ol li::marker,
.tk-content--elementor .elementor-widget-text-editor ol li::marker { color: var(--td-teal); font-weight: 600; }

.tk-prose blockquote {
    background: var(--cream);
    border-left: 4px solid var(--td-teal-lt);
    border-radius: 0 10px 10px 0;
    margin: 24px 0;
    padding: 18px 24px;
    font-style: italic;
    color: var(--td-brown);
}

.tk-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 22px 0;
    font-family: var(--td-body);
}
.tk-prose table th {
    background: var(--td-teal);
    color: #fff;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: 13px;
    padding: 12px 14px;
    text-align: left;
}
.tk-prose table td {
    border-bottom: 1px solid var(--border);
    padding: 12px 14px;
    color: var(--text);
}
.tk-prose table tr:nth-child(even) td { background: #f8fbfd; }

/* a policy page reads better as a framed sheet on the pale ground */
.tk-content--sheet { background: var(--collect); }
.tk-content--sheet .tk-sheet {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: clamp(24px, 4vw, 56px);
    max-width: 1000px;
    margin: 0 auto;
}


/* =====================================================================
   6. CART / CHECKOUT / ORDER
   ===================================================================== */

.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main { background: var(--warm-bg); }

.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content { padding-bottom: 60px; }

.woocommerce table.shop_table {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    font-family: var(--td-body);
}
.woocommerce table.shop_table th {
    background: var(--td-teal);
    color: #fff;
    font-family: var(--td-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    border: 0;
    padding: 14px 16px;
}
.woocommerce table.shop_table td {
    border-top: 1px solid var(--border);
    padding: 16px;
    color: var(--text);
    vertical-align: middle;
}
.woocommerce table.shop_table .product-name a {
    font-style: italic;
    color: var(--td-brown);
    text-decoration: none;
}
.woocommerce table.shop_table .product-name a:hover { color: var(--td-teal); }
.woocommerce table.shop_table .amount { color: var(--td-teal-lt); font-weight: 600; }
.woocommerce table.shop_table img { border-radius: 6px; }
.woocommerce a.remove {
    color: var(--td-maroon) !important;
    font-weight: 400;
}
.woocommerce a.remove:hover { background: var(--td-maroon) !important; color: #fff !important; }

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
    box-shadow: var(--shadow);
}
.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
    font-family: var(--td-display);
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--td-maroon);
    margin-bottom: 16px;
}
.woocommerce .cart_totals table.shop_table { background: transparent; border: 0; }
.woocommerce .cart_totals table.shop_table th {
    background: transparent;
    color: var(--td-brown);
    text-transform: none;
    font-size: 15px;
    letter-spacing: 0;
    padding: 10px 0;
}
.woocommerce .cart_totals table.shop_table td { border-top: 1px dashed var(--border); padding: 10px 0; text-align: right; }

/* every Woo action button becomes a landing-page plate */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .woocommerce-message a.button {
    background-color: transparent !important;
    background-image: var(--td-btn-brown) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
    font-family: var(--td-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 12px 30px !important;
    transition: filter .3s ease, background-image .3s ease;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    background-image: var(--td-btn-green) !important;
    color: #fff !important;
    transform: none;
}
.woocommerce .checkout-button.button.alt,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    display: block;
    text-align: center;
    background-image: var(--td-btn-green) !important;
    font-size: 14px !important;
    padding: 15px 30px !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background-image: var(--td-btn-brown) !important;
}
.woocommerce a.button.wc-backward,
.woocommerce .return-to-shop a.button { background-image: var(--td-btn-brown) !important; }

/* form fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single,
.woocommerce-cart .coupon input.input-text {
    font-family: var(--td-body);
    font-size: 15px;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px 14px;
    height: auto;
    box-shadow: none;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: var(--td-teal-lt);
    box-shadow: 0 0 0 3px rgba(42, 135, 163, .14);
    outline: none;
}
.woocommerce form .form-row label {
    font-family: var(--td-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--td-brown);
    margin-bottom: 6px;
}
.woocommerce form .form-row .required { color: var(--td-maroon); }

.woocommerce-checkout #payment {
    background: var(--collect);
    border-radius: 12px;
}
.woocommerce-checkout #payment div.payment_box {
    background: #fff;
    border: 1px solid var(--border);
    color: var(--text);
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #fff; }

/* ---- notices: one treatment, every page ----
   Woo pins the icon at position:absolute, left:1.5em, and keeps the text clear
   of it with padding-left:3.5em on the notice. Those two numbers belong
   together: the account block in custom.css used to set `padding: 14px 18px`
   on its own, which slid the text under the icon. So the padding and the icon
   position are declared here as a pair, with !important, and anything that
   wants different geometry (the account empty states, which hide the icon)
   overrides both. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    position: relative !important;
    font-family: var(--td-body);
    font-size: 14px;
    line-height: 1.55;
    /* woocommerce.css is enqueued at priority 99, so it loads after every
       theme stylesheet and wins each of these on a specificity tie — its grey
       #f6f5f8 fill and 3px coloured top border came through otherwise. */
    border: 1px solid var(--border) !important;
    border-top: 0 !important;
    border-left: 4px solid var(--td-teal) !important;
    border-radius: 10px !important;
    background: var(--collect) !important;
    color: var(--text);
    box-shadow: none;
    padding: 15px 20px 15px 50px !important;
    margin: 0 0 22px !important;
    list-style: none !important;
    width: auto;
}

/* a notice that carries an action reads as one row: message left, button
   right. :has() keeps this off the plain list notices, which must not be flex. */
.woocommerce-message:has(> .button),
.woocommerce-info:has(> .button),
.woocommerce-error:has(> .button) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    top: 15px !important;
    left: 19px !important;
    font-size: 17px;
    line-height: 1.2;
    color: var(--td-teal);
}
/* Woo gives a notice tabindex="-1" and focuses it on render so a screen
   reader announces it, which makes Chrome paint its default black focus ring
   around the card. Keep a visible ring, in the brand's own colour. */
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(24, 96, 120, .16) !important;
}
.woocommerce-error:focus { box-shadow: 0 0 0 3px rgba(117, 27, 42, .16) !important; }
.woocommerce-message:focus { box-shadow: 0 0 0 3px rgba(60, 120, 72, .18) !important; }

.woocommerce-message > li,
.woocommerce-info > li,
.woocommerce-error > li { margin: 0; padding: 0; list-style: none; }
.woocommerce-message > li + li,
.woocommerce-info > li + li,
.woocommerce-error > li + li { margin-top: 5px; }
.woocommerce-message strong,
.woocommerce-info strong,
.woocommerce-error strong { font-weight: 600; }

.woocommerce-error {
    border-left-color: var(--td-maroon) !important;
    background: #fbeef0 !important;
    color: #751b2a;
}
.woocommerce-error::before { color: var(--td-maroon) !important; }
.woocommerce-message {
    border-left-color: var(--td-green) !important;
    background: #eaf3ec !important;
    color: #2f5f3a;
}
.woocommerce-message::before { color: var(--td-green) !important; }
.woocommerce-info::before { color: var(--td-teal) !important; }

/* the action a notice can carry (View cart, Browse products) sits inline with
   the text rather than floating out of the padded box */
.woocommerce-message > .button,
.woocommerce-info > .button,
.woocommerce-error > .button {
    float: none !important;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 10px 24px !important;
    font-size: 12px;
}


/* =====================================================================
   7. EMPTY STATES (no products, empty cart, no search results)
   ===================================================================== */

.tk-empty {
    text-align: center;
    padding: 60px 20px 70px;
    max-width: 640px;
    margin: 0 auto;
}
.tk-empty-title {
    font-family: var(--td-display);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--td-maroon);
    margin-bottom: 10px;
}
.tk-empty p {
    font-family: var(--td-body);
    font-size: 16px;
    color: var(--td-ink);
    margin-bottom: 24px;
}


/* =====================================================================
   8. LOGIN / MY ACCOUNT trim (the layout already lives in custom.css)
   ===================================================================== */

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    background: var(--td-teal) !important;
    color: #fff !important;
}
.woocommerce-account h2,
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
    font-family: var(--td-display);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--td-maroon);
}


/* ---------------------------------------------------------------------
   Elementor "Full Width" inner pages (About, Contact, the policy pages)
   keep their own section rhythm — this wrapper only scopes the type
   treatment, so it adds no padding or ground of its own.
   ------------------------------------------------------------------ */
.tk-content--elementor {
    background: transparent;
    padding: 0;
}

/* Copy the builder leaves unstyled still reads as Thokai. The banner text on
   each page carries an inline rgba white, so it keeps winning over this. */
.tk-content--elementor .elementor-widget-text-editor {
    font-family: var(--td-body);
    font-size: 17px;
    line-height: 1.75;
    color: #3b3b3b;
}
.tk-content--elementor .elementor-widget-text-editor p,
.tk-content--elementor .elementor-widget-text-editor li { color: inherit; }
.tk-content--elementor .elementor-widget-text-editor strong { color: var(--td-brown); }

/* Accordions (the Contact FAQ) pick up the brand keyline and rounded card */
.tk-content--elementor .elementor-accordion .elementor-tab-title,
.tk-content--elementor .elementor-accordion .elementor-tab-content {
    font-family: var(--td-body);
}
.tk-content--elementor .elementor-accordion .elementor-accordion-item {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
    background: #fff;
}

/* Elementor buttons on inner pages take the landing page's shaped plate */
.tk-content--elementor .elementor-widget-button .elementor-button {
    background-color: transparent !important;
    background-image: var(--td-btn-brown) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
    font-family: var(--td-body);
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 12px 32px !important;
    transition: filter .3s ease, background-image .3s ease;
}
.tk-content--elementor .elementor-widget-button .elementor-button:hover {
    background-image: var(--td-btn-green) !important;
}


/* =====================================================================
   9. CART / CHECKOUT — the block versions
   The store runs WooCommerce's Cart and Checkout *blocks*, which render
   .wc-block-* markup that none of the classic .woocommerce rules above
   reach. This section brings them onto the landing palette.
   ===================================================================== */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
    font-family: var(--td-body);
    color: var(--text);
    max-width: 1400px;
    margin: 0 auto;
    padding: 56px 15px 70px;
}
/* Woo's own checkout stylesheet sets padding-top:24px on this same single
   class and loads after the theme's, so the lead-in under the hero needs the
   body prefix to outrank it. */
body .wp-block-woocommerce-cart,
body .wp-block-woocommerce-checkout { padding-top: 56px; }
@media (max-width: 767px) {
    body .wp-block-woocommerce-cart,
    body .wp-block-woocommerce-checkout { padding-top: 34px; }
}

/* ---- empty cart ---- */
.wp-block-woocommerce-empty-cart-block { padding: 10px 15px 40px; }
.wc-block-cart__empty-cart__title {
    font-family: var(--td-display) !important;
    font-size: clamp(24px, 3vw, 34px) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--td-maroon) !important;
    margin: 0 0 6px !important;
}
/* Woo paints the sad-face icon from currentColor on the ::before */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
    color: var(--td-teal-lt) !important;
    opacity: .85;
}
.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots { color: var(--td-teal-lt); }
.wp-block-woocommerce-empty-cart-block > h2:not(.wc-block-cart__empty-cart__title) {
    font-family: var(--td-display);
    font-size: clamp(20px, 2.4vw, 30px);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--td-brown);
    margin: 34px 0 22px;
}

/* ---- the "New in store" block grid: the Featured Products card again ---- */
.wc-block-grid__products {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
}
@media (max-width: 991px) { .wc-block-grid__products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .wc-block-grid__products { grid-template-columns: 1fr; } }

.wc-block-grid__product {
    background: var(--cream);
    border-radius: 14px;
    overflow: hidden;
    margin: 0;
    padding: 0 0 18px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(72, 24, 12, .07);
    transition: transform .3s ease, box-shadow .3s ease;
}
.wc-block-grid__product:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 26px rgba(72, 24, 12, .14);
}
.wc-block-grid__product-link { text-decoration: none; display: block; }
.wc-block-grid__product-image { margin: 0 0 12px; }
.wc-block-grid__product-image img { width: 100%; height: auto; display: block; border-radius: 0; }
.wc-block-grid__product-title {
    font-family: var(--td-body);
    font-style: italic;
    font-size: 16px;
    line-height: 1.35;
    color: var(--td-brown);
    text-transform: capitalize;
    text-decoration: none;
    padding: 0 14px;
    margin-bottom: 6px;
}
.wc-block-grid__product-price {
    font-size: 17px;
    font-weight: 600;
    font-style: italic;
    color: var(--td-teal-lt);
    margin-bottom: 14px;
}
.wc-block-grid__product-price .amount { color: var(--td-teal-lt); }

/* ---- block buttons: the shaped plate, everywhere ---- */
.wp-block-woocommerce-cart .wp-block-button__link,
.wp-block-woocommerce-checkout .wp-block-button__link,
.wp-block-woocommerce-empty-cart-block .wp-block-button__link,
.wc-block-components-button:not(.is-link) {
    display: inline-block;
    background-color: transparent !important;
    background-image: var(--td-btn-brown) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
    font-family: var(--td-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none !important;
    padding: 12px 28px !important;
    min-height: 0;
    box-shadow: none;
    transition: filter .3s ease, background-image .3s ease;
}
.wp-block-woocommerce-cart .wp-block-button__link:hover,
.wp-block-woocommerce-checkout .wp-block-button__link:hover,
.wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover,
.wc-block-components-button:not(.is-link):hover {
    background-image: var(--td-btn-green) !important;
    color: #fff !important;
}
/* Proceed to checkout fills its narrow totals panel, so the plate artwork
   would stretch and warp its notched ends — it takes the flat brand green
   instead, the same green as the landing page's plate. */
.wc-block-cart__submit-button,
.wc-block-components-button.wc-block-cart__submit-button {
    width: 100%;
    text-align: center;
    background-image: none !important;
    background-color: var(--td-green) !important;
    border-radius: 4px !important;
    font-size: 14px;
    padding: 16px 28px !important;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-button.wc-block-cart__submit-button:hover {
    background-image: none !important;
    background-color: var(--td-green-lt) !important;
    filter: none;
}

/* Place order keeps the plate, but at its natural width and pushed to the
   right of the actions row. Woo forces width:100% on it and turns that row
   into a column at narrow widths, so the width is overridden and the button is
   pushed over with an auto left margin, which works in either direction.
   The .wc-block-components-button:not(.is-link) rule above scores two classes,
   so these need the page-block prefix to outrank it. */
.wp-block-woocommerce-checkout .wc-block-checkout__actions_row {
    justify-content: flex-end;
    align-items: flex-end;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button--full-width {
    width: auto !important;
    min-width: 0;
    margin-left: auto;
    display: inline-flex;
    justify-content: center;
    background-image: var(--td-btn-brown) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    font-size: 13px;
    padding: 14px 44px !important;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:focus-visible {
    background-image: var(--td-btn-green) !important;
    color: #fff !important;
    outline: none;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:active {
    filter: brightness(.96);
}
/* the terms line above it sits left, so the row shouldn't stretch it */
.wp-block-woocommerce-checkout .wc-block-checkout__actions_row > *:not(.wc-block-components-checkout-place-order-button) {
    margin-right: auto;
}
.wc-block-components-button.is-link {
    color: var(--td-teal) !important;
    text-decoration: underline;
}

/* ---- line items table ---- */
.wc-block-cart-items,
.wc-block-cart .wc-block-cart-items {
    border-collapse: separate;
    border-spacing: 0;
}
.wc-block-cart-items__header {
    font-family: var(--td-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--td-brown);
    border-bottom: 2px solid var(--border);
}
.wc-block-cart-items__row { border-bottom: 1px solid var(--border); }
.wc-block-cart-items__row .wc-block-components-product-name {
    font-style: italic;
    font-size: 16px;
    color: var(--td-brown) !important;
    text-decoration: none;
}
.wc-block-cart-items__row .wc-block-components-product-name:hover { color: var(--td-teal) !important; }
.wc-block-cart-item__image img { border-radius: 8px; }
.wc-block-components-product-price__value,
.wc-block-components-totals-item__value {
    color: var(--td-teal-lt);
    font-weight: 600;
}
.wc-block-cart-item__remove-link { color: var(--td-maroon) !important; }

/* ---- order summary panel ---- */
.wp-block-woocommerce-cart-totals-block,
.wc-block-components-sidebar {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
    box-shadow: var(--shadow);
}
/* Woo uses padding-left on this element as the column gutter and drops the
   padding to 0 when the layout stacks — both land inside the card, so the
   inset is stated with !important instead. The gutter comes from the items
   column's padding-right. */
.wp-block-woocommerce-cart-totals-block { padding: 24px !important; }
.wc-block-cart__totals-title,
.wc-block-components-title,
.wc-block-components-checkout-step__title {
    font-family: var(--td-display) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
    color: var(--td-maroon) !important;
}
.wc-block-components-totals-item { color: var(--text); }
.wc-block-components-totals-footer-item {
    /* border-top: 1px solid var(--cream-dk); */
    color: var(--td-brown);
}

/* ---- form fields ---- */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__select,
.wc-block-components-quantity-selector {
    font-family: var(--td-body);
    border-color: var(--border) !important;
    border-radius: 6px;
    color: var(--text);
}
.wc-block-components-text-input input:focus,
.wc-block-components-select__select:focus {
    border-color: var(--td-teal-lt) !important;
    box-shadow: 0 0 0 3px rgba(42, 135, 163, .14);
    outline: none;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input label { color: var(--td-ink); }

/* ---- notices ---- */
.wc-block-components-notice-banner {
    font-family: var(--td-body);
    border-radius: 8px;
}
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-success {
    border-color: var(--td-teal) !important;
    background: var(--collect) !important;
}
.wc-block-components-notice-banner.is-error {
    border-color: var(--td-maroon) !important;
    background: #fbeef0 !important;
}

/* Woo's own block CSS sizes these cards with flex-basis and leaves the list
   marker on, so the grid and the markers both need pinning down. */
.wc-block-grid ul.wc-block-grid__products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
@media (max-width: 991px) {
    .wc-block-grid ul.wc-block-grid__products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 520px) {
    .wc-block-grid ul.wc-block-grid__products { grid-template-columns: 1fr !important; }
}
.wc-block-grid ul.wc-block-grid__products > li.wc-block-grid__product {
    border: 0 !important;
    list-style: none !important;
    max-width: none !important;
    flex: none !important;
    width: auto !important;
}
.wc-block-grid ul.wc-block-grid__products > li.wc-block-grid__product::before,
.wc-block-grid ul.wc-block-grid__products > li.wc-block-grid__product::marker { content: none; }
.wc-block-grid .wc-block-grid__product-title,
.wc-block-grid__product-link,
.wc-block-grid__product-link:hover {
    text-decoration: none !important;
}
.wc-block-grid .wc-block-grid__product-title { color: var(--td-brown) !important; }
.wc-block-grid__product-link:hover .wc-block-grid__product-title { color: var(--td-teal) !important; }
.wc-block-grid__product-image img { max-width: 100% !important; margin: 0 !important; }

/* the cart's block markup starts flush with its first table row, so the
   lead-in under the hero comes entirely from the padding set at the top of
   this section — nothing extra here. */

/* Cart, checkout and account carry their own top spacing inside the block /
   auth markup, so the page wrapper doesn't add a second lead-in under the hero. */
.woocommerce-cart .tk-content,
.woocommerce-checkout .tk-content,
.woocommerce-account .tk-content { padding-top: 0; }


/* Same rule for the classic cart/checkout buttons and the account form's
   submit: a full-bleed button takes the flat brand green, not the plate. */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order,
.woocommerce form.checkout_coupon .button {
    background-image: none !important;
    background-color: var(--td-green) !important;
    border-radius: 4px !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #place_order:hover {
    background-image: none !important;
    background-color: var(--td-green-lt) !important;
}

/* Cart, checkout and account sit on the warm ground the body sets, so the
   page wrapper shouldn't paint white over it. */
.woocommerce-cart .tk-content,
.woocommerce-checkout .tk-content,
.woocommerce-account .tk-content { background: transparent; }

/* The block cart builds its table client-side with no colour of its own, so
   the header row needs stating explicitly. */
.wc-block-cart-items__header,
.wc-block-cart-items__header th {
    background: transparent !important;
    color: var(--td-brown) !important;
    font-weight: 600 !important;
    letter-spacing: .08em;
}


/* =====================================================================
   10. CHECKOUT ORDER SUMMARY
   The block checkout renders its own sidebar card and coupon form, both of
   which came through in plain white with system type. This brings them onto
   the white-panel / Baskerville-heading treatment the rest of the site uses.
   Woo's block stylesheets load after the theme's, hence the !important.
   ===================================================================== */

/* one card, not a card inside a card. White on the pale ground, like the
   cart's totals panel — no sandal fill. */
.wp-block-woocommerce-checkout .wc-block-checkout__sidebar,
.wp-block-woocommerce-checkout .wc-block-components-sidebar {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
    background: var(--white) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* "Order summary" reads as a section title */
.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title { padding-bottom: 4px; }
.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title-text {
    font-family: var(--td-display) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
    color: var(--td-maroon) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title-price,
.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title-icon {
    color: var(--td-teal-lt) !important;
}

/* line items */
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__image img { border-radius: 6px; }
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name {
    font-style: italic;
    text-transform: capitalize;
    color: var(--td-brown) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__total-price,
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__individual-price {
    color: var(--td-teal-lt) !important;
    font-weight: 600;
}

/* the rules between summary rows take the brand border tint, not Woo's grey */
.wp-block-woocommerce-checkout .wc-block-components-totals-wrapper::after,
.wp-block-woocommerce-checkout .wc-block-components-order-summary__content::after {
    border-color: var(--border) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-totals-wrapper {
    border-color: var(--border) !important;
}

/* subtotal / total rows */
.wp-block-woocommerce-checkout .wc-block-components-totals-item__label { color: var(--td-ink); }
.wp-block-woocommerce-checkout .wc-block-components-totals-item__value,
.wp-block-woocommerce-checkout .wc-block-components-formatted-money-amount {
    color: var(--td-teal-lt) !important;
    font-weight: 600;
}
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item {
    /* border-top: 1px solid var(--border); */
    /* padding-top: 12px !important; */
}
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-family: var(--td-display);
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--td-maroon) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 22px;
}

/* ---- coupon form (cart *and* checkout) ----
   Deliberately unprefixed: the cart panel renders the same coupon component,
   and while these rules carried the .wp-block-woocommerce-checkout prefix the
   cart's Apply fell through to the generic plate rule above and came out as
   squashed brown artwork. */
.wc-block-components-totals-coupon .wc-block-components-panel__button {
    font-family: var(--td-body);
    color: var(--td-teal) !important;
    font-weight: 600;
}
.wc-block-components-totals-coupon__input input {
    background: #fff !important;
    border-color: var(--border) !important;
    border-radius: 6px !important;
}
/* The plate artwork squashes badly at this button's size, so the coupon's
   secondary action takes a flat teal fill. align-self stretches it to the
   input's height, which the floating label makes taller than a bare button. */
.wc-block-components-totals-coupon__button,
.wc-block-components-totals-coupon__button.wc-block-components-button,
.wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button {
    background-image: none !important;
    background-color: var(--td-teal) !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    padding: 0 24px !important;
    flex: 0 0 auto !important;
    align-self: stretch;
    /* Chrome will not stretch a <button> to the flex line, so the height that
       matches Woo's floating-label input (50px) is stated outright. */
    min-height: 50px !important;
}
.wc-block-components-totals-coupon__button:hover,
.wc-block-components-totals-coupon__button.wc-block-components-button:hover {
    background-image: none !important;
    background-color: var(--td-teal-lt) !important;
    filter: none;
}
.wc-block-components-totals-coupon__button:disabled,
.wc-block-components-totals-coupon__button.wc-block-components-button:disabled {
    background-color: var(--td-teal) !important;
    opacity: .45;
}


/* =====================================================================
   11. CART / CHECKOUT — 991px and below
   Woo picks the two-column layout in JS: a ResizeObserver puts
   is-large / is-medium / is-small on .wc-block-components-sidebar-layout,
   and is-large keeps two columns while the container is 700px or wider.
   With the theme's page gutters that reaches down to about 762px, where the
   summary column is only ~250px wide and product names wrap two words at a
   time. So is-large is overridden to stack below 992px, and the panels keep
   their card inset in whichever state they land in.
   ===================================================================== */

@media (max-width: 991px) {
    .wc-block-components-sidebar-layout.is-large { flex-direction: column !important; }

    .wc-block-components-sidebar-layout.is-large > .wc-block-components-main,
    .wc-block-components-sidebar-layout.is-large > .wc-block-components-sidebar {
        width: 100% !important;
        max-width: none !important;
        position: static !important;
        top: auto !important;
        box-sizing: border-box;
    }
    .wc-block-components-sidebar-layout.is-large > .wc-block-components-main {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Checkout: summary first, then the form — the order Woo's own stacked
       layout uses. Cart: items first, totals under them. */
    .wc-block-checkout.is-large > .wc-block-checkout__sidebar {
        order: 0 !important;
        margin-bottom: 28px !important;
    }
    .wc-block-checkout.is-large > .wc-block-checkout__main { order: 1 !important; }
    .wc-block-cart.is-large > .wc-block-cart__main { order: 0 !important; }
    .wc-block-cart.is-large > .wc-block-cart__sidebar {
        order: 1 !important;
        margin-top: 28px !important;
    }

    /* the table header row is meaningless once the row goes vertical */
    .wc-block-cart-items__header th { padding-bottom: 10px !important; }
}

/* ---- stacked checkout summary (Woo's own is-medium / is-small layout) ----
   Below ~762px Woo renders the summary twice: a collapsed title bar in the
   sidebar at the top, and the real panel in a fill wrapper under the form.
   Both carry .wp-block-woocommerce-checkout-order-summary-block, and in that
   layout Woo leaves the heading full-bleed while wrapping the rows in a
   second bordered box — a card inside a card, with the heading and the rows
   on different insets. One inset on the card, no inner frame. */
@media (max-width: 767px) {
    .wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
        padding: 16px !important;
    }
    .wp-block-woocommerce-checkout .checkout-order-summary-block-fill {
        border: 0 !important;
        border-radius: 0 !important;
    }
    .wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading {
        margin-bottom: 4px;
    }
    /* the bar at the top holds a heading and nothing else, so the rule under
       that heading has nothing to separate */
    .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title {
        border: 0 !important;
        padding: 2px 0 !important;
    }
    /* the rows carry the card's inset already */
    .wp-block-woocommerce-checkout .wc-block-components-order-summary { padding-left: 0; padding-right: 0; }
    .wp-block-woocommerce-checkout .wc-block-components-totals-coupon { padding-left: 0; padding-right: 0; }
}

/* ---- stacked cart totals ----
   In Woo's stacked cart the panel heading is display:none, which leaves the
   coupon row's divider floating at the top of the card with nothing above it.
   Keep the heading — the checkout's stacked summary keeps its own — and give
   the card air under the line items. */
@media (max-width: 767px) {
    .wc-block-cart__sidebar { margin-top: 24px !important; }
    .wc-block-cart__totals-title {
        display: block !important;
        font-family: var(--td-display) !important;
        font-size: 20px !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
        text-transform: uppercase;
        color: var(--td-maroon) !important;
        margin: 0 0 4px !important;
        padding: 0 !important;
    }
}


/* =====================================================================
   12. MY ACCOUNT
   The layout, tables and forms are styled in custom.css (that block also
   fixes Woo's floats). This section covers the parts the theme adds:
   the nav panel's greeting header, the inline SVG menu icons, and the
   dashboard's quick-link tiles.
   ===================================================================== */

/* ---- nav panel header ---- */
.tk-account-nav .tk-account-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    background: linear-gradient(90deg, var(--td-teal) 0%, var(--td-green) 100%);
}
.tk-account-nav .tk-account-initial {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--td-teal);
    font-family: var(--td-display);
    font-size: 21px;
    line-height: 42px;
    text-align: center;
}
.tk-account-nav .tk-account-hello { display: block; min-width: 0; }
.tk-account-nav .tk-account-eyebrow {
    display: block;
    font-family: var(--td-script);
    font-size: 14px;
    line-height: 1.2;
    color: #ffd9a0;
}
.tk-account-nav .tk-account-name {
    display: block;
    font-family: var(--td-display);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    text-transform: uppercase;
    color: #fff;
    overflow-wrap: anywhere;
}

/* ---- menu icons (inline SVG from woocommerce/myaccount/navigation.php) ---- */
.tk-account-nav .tk-account-icon {
    flex: 0 0 17px;
    color: var(--td-teal);
    transition: color .25s ease;
}
.tk-account-nav ul li a:hover .tk-account-icon,
.tk-account-nav ul li.is-active a .tk-account-icon { color: currentColor; }
.tk-account-nav li.woocommerce-MyAccount-navigation-link--customer-logout .tk-account-icon {
    color: var(--td-maroon);
}

/* ---- dashboard quick links ---- */
.tk-account-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 26px 0 0;
}
@media (max-width: 575px) {
    .tk-account-tiles { grid-template-columns: 1fr; }
}
/* the pale collection ground rather than cream — the account pages carry no
   sandal, same as cart and checkout */
.tk-account-tile {
    display: block;
    background: var(--collect);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 22px;
    text-decoration: none !important;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.tk-account-tile:hover {
    transform: translateY(-3px);
    border-color: var(--td-teal-lt);
    box-shadow: 0 10px 24px rgba(24, 96, 120, .12);
}
.tk-account-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--white);
    color: var(--td-teal);
}
.tk-account-tile-title {
    display: block;
    font-family: var(--td-display);
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--td-maroon);
    margin-bottom: 4px;
}
.tk-account-tile-text {
    display: block;
    font-family: var(--td-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-md);
}

/* ---- the notices container on the custom templates ----
   The product page prints notices straight under the breadcrumb bar, so the
   card needs air above it; on the archive the section's own top padding
   already provides it. */
.tk-notices--pdp { padding-top: 24px; }
.tk-notices .woocommerce-message:last-child,
.tk-notices .woocommerce-info:last-child,
.tk-notices .woocommerce-error:last-child { margin-bottom: 0 !important; }
.tk-archive .tk-notices { margin-bottom: 26px; }