/*
 * Tinka Design — Jess's design (October 2026), on top of homu.css.
 *
 * This codebase is now the Tinka site only (HŌMU has its own copy, Homu
 * Laravel). homu.css stays as the shared base — every page's colours already
 * run through its --homu-* variables — and this file, loaded after it,
 * re-points those variables at Tinka's palette and adds the new look:
 * white pages with warm grey panels, rounded corners, pill buttons, a rust
 * accent and heavy sentence-case Helvetica headings.
 *
 * New Tinka-specific pieces (header, homepage sections, product page) use the
 * --t-* tokens below.
 */
:root {
    /* Jess's palette */
    --t-ink:          #2A1C16;  /* headings, text, dark buttons */
    --t-accent:       #8C4A2E;  /* rust: primary buttons, highlights */
    --t-accent-dark:  #6B3420;  /* rust on light panels (tags) */
    --t-text:         #5A4A41;  /* paragraphs */
    --t-muted:        #6E6661;
    --t-panel:        #F6F5F3;  /* cards and bands */
    --t-panel-2:      #EFEDEA;  /* image wells */
    --t-line:         #E8E6E3;
    --t-line-soft:    #ECEAE7;
    --t-olive:        #5E5F3A;  /* "in stock" */
    --t-olive-text:   #4F5030;
    --t-peach:        #E7B99C;
    --t-bar:          #1F1F1F;  /* announcement bar */
    --t-white:        #FFFFFF;

    --t-radius-lg:    28px;
    --t-radius:       22px;
    --t-radius-sm:    16px;
    --t-pill:         999px;
    --t-wrap:         1320px;

    /* The shared variables, re-pointed so existing pages match. */
    --homu-paper:        #FFFFFF;
    --homu-cream:        var(--t-panel);
    --homu-brown:        var(--t-accent);
    --homu-ink:          var(--t-ink);
    --homu-ink-hover:    #4A372E;
    --homu-text:         #4A3A31;
    --homu-muted:        var(--t-muted);
    --homu-line:         var(--t-line);
    --homu-line-strong:  #CFCAC4;
    --homu-sale:         #B0563A;
    --homu-success:      var(--t-olive);
    --homu-tracking:     0.04em;
}

body { background: var(--t-white); color: var(--homu-text); }

/* Jess's headings: heavy, tight, sentence case (homu.css made them capitals). */
h1, h2, h3 {
    text-transform: none;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--t-ink);
}
h4, h5, h6 { color: var(--t-ink); }

a { color: var(--t-ink); }
a:hover { color: var(--t-accent); }

/* Buttons: pills. */
.btn { border-radius: var(--t-pill); text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 15px; }
.btn-primary, .btn-dark { background: var(--t-ink); border-color: var(--t-ink); color: var(--t-white); }
.form-control { border-radius: 12px; }

/* Shared building blocks for the new sections */
.t-wrap { max-width: var(--t-wrap); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.t-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 16px 28px; border-radius: var(--t-pill); border: 2px solid transparent;
    font-weight: 700; font-size: 17px; line-height: 1.1; text-decoration: none; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.t-btn:hover { text-decoration: none; }
.t-btn--accent { background: var(--t-accent); color: var(--t-white); }
.t-btn--accent:hover { background: var(--t-accent-dark); color: var(--t-white); }
.t-btn--dark { background: var(--t-ink); color: var(--t-white); }
.t-btn--dark:hover { background: #4A372E; color: var(--t-white); }
.t-btn--outline { background: transparent; color: var(--t-ink); border-color: var(--t-ink); padding: 14px 26px; }
.t-btn--outline:hover { background: var(--t-ink); color: var(--t-white); }
.t-tag {
    align-self: flex-start; display: inline-block; background: var(--t-panel); color: var(--t-accent-dark);
    font-weight: 700; font-size: 14px; padding: 8px 14px; border-radius: var(--t-pill);
}
.t-kicker { font-weight: 700; color: var(--t-accent); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.t-h2 { margin: 0; font-weight: 800; font-size: clamp(36px, 4vw, 56px); letter-spacing: -0.03em; line-height: 1; }
.t-badge {
    display: inline-block; color: var(--t-white); font-size: 13px; font-weight: 700;
    padding: 6px 10px; border-radius: var(--t-pill); background: var(--t-olive);
}
.t-badge--accent { background: var(--t-accent); }
.t-badge--ink { background: var(--t-ink); }
.t-badge--sale { background: var(--homu-sale); }

/* ==========================================================================
   Announcement bar and header
   ========================================================================== */
.t-bar {
    background: var(--t-bar); color: var(--t-white); padding: 10px 24px;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px;
    font-size: 14px; font-weight: 500; letter-spacing: .01em; position: relative; text-align: center;
}
.t-bar a { color: inherit; }
.t-bar .t-bar-link { text-decoration: underline; text-underline-offset: 3px; margin-left: 4px; }
.t-bar-hi { color: var(--t-peach); }

.site-header { background: var(--t-white); }
.site-header .header-main.t-head {
    display: block; max-width: none; margin: 0; padding: 0;
}
.t-head-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px 32px;
    padding-top: 18px; padding-bottom: 18px;
}
.t-head-logo { flex: 0 0 auto; display: block; text-decoration: none; }
.t-search {
    flex: 1 1 320px; max-width: 620px; display: flex; align-items: center; gap: 10px;
    height: 50px; padding: 0 8px 0 20px; border-radius: var(--t-pill);
    background: var(--t-panel); border: 1px solid var(--t-line); box-sizing: border-box; margin: 0;
}
.t-search input {
    flex: 1; min-width: 0; height: 100%; border: 0; background: transparent;
    font: inherit; font-size: 16px; color: var(--t-ink); outline: none;
}
.t-search input::placeholder { color: var(--t-muted); }
.t-search:focus-within { border-color: var(--t-ink); }
.t-search button {
    height: 38px; padding: 0 18px; border-radius: var(--t-pill); border: 0;
    background: var(--t-ink); color: var(--t-white); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
}
.t-search button:hover { background: var(--t-accent); }
.t-head-icons { display: flex; gap: 4px; align-items: center; }
.t-icon {
    position: relative; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    color: var(--t-ink); border-radius: 50%;
}
.t-icon:hover { color: var(--t-accent); background: var(--t-panel); }
.t-icon .cart-badge {
    position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
    background: var(--t-accent); color: var(--t-white); font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.t-icon .cart-badge:empty { display: none; }

.t-nav { border-top: 1px solid var(--t-line-soft); }
.t-nav-row { display: flex; flex-wrap: wrap; gap: 0 28px; }
.t-nav-item { position: relative; }
.t-nav-item > a {
    display: block; padding: 12px 0; font-size: 16px; font-weight: 600; color: var(--t-ink); text-decoration: none;
    border-bottom: 2px solid transparent;
}
.t-nav-item > a:hover, .t-nav-item:hover > a { color: var(--t-accent); border-bottom-color: var(--t-accent); }
.t-nav-item > a.t-nav-sale { color: var(--t-accent); }
.t-nav-drop {
    position: absolute; top: 100%; left: -16px; z-index: 100; min-width: 240px;
    background: var(--t-white); border: 1px solid var(--t-line); border-radius: var(--t-radius-sm);
    box-shadow: 0 12px 32px rgba(42,28,22,.12); padding: 10px;
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, visibility .15s, transform .15s;
}
.t-nav-item:hover .t-nav-drop, .t-nav-item:focus-within .t-nav-drop { opacity: 1; visibility: visible; transform: none; }
.t-nav-drop a {
    padding: 9px 12px; border-radius: 10px; font-size: 15px; color: var(--t-ink); text-decoration: none; white-space: nowrap;
}
.t-nav-drop a:hover { background: var(--t-panel); color: var(--t-accent); }
.t-nav-drop .t-nav-all { font-weight: 700; }

/* Mobile header and drawer, in the same palette */
.header-mobile .header-icon, .header-mobile a { color: var(--t-ink); }
.header-mobile .cart-badge { background: var(--t-accent); }

/* ==========================================================================
   Homepage
   ========================================================================== */
.t-section { padding-top: 64px; padding-bottom: 24px; display: flex; flex-direction: column; gap: 28px; }
.t-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.t-section-titles { display: flex; flex-direction: column; gap: 8px; }
.t-section-link { font-weight: 700; font-size: 17px; color: var(--t-ink); text-decoration: underline; text-underline-offset: 4px; }

/* Hero: the split layout in Jess's style */
.homu-hero-split { border-bottom: 0; }
.homu-hero-split .homu-hero-split-grid {
    max-width: var(--t-wrap); padding: 48px 24px 32px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 40px;
}
.homu-hero-split--rtl .homu-hero-split-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.homu-hero-split--ltr .homu-hero-split-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.homu-hero-split-copy { display: flex; flex-direction: column; gap: 24px; }
.homu-hero-split-copy .homu-eyebrow.t-tag {
    letter-spacing: 0; text-transform: none; font-size: 14px; color: var(--t-accent-dark);
}
.homu-hero-split .homu-hero-split-copy h1,
[class^="homu-hero"] h1 {
    font-weight: 800; text-transform: none; letter-spacing: -0.035em; line-height: .95;
    font-size: clamp(48px, 6.4vw, 92px); max-width: none; margin: 0; color: var(--t-ink);
}
[class^="homu-hero"] h1 em { font-style: normal; color: var(--t-accent); }
.homu-hero-split-copy p:not(.homu-eyebrow) {
    margin: 0; font-size: 20px; line-height: 1.5; color: var(--t-text); max-width: 30ch;
}
.homu-hero-split-media { position: relative; }
.homu-hero-split-media img {
    width: 100%; height: 560px; max-height: none; object-fit: cover; border-radius: var(--t-radius-lg);
}
.t-hero-card {
    position: absolute; left: 20px; bottom: 20px; background: var(--t-panel); border-radius: 18px;
    padding: 14px 18px; display: flex; align-items: center; gap: 12px;
    box-shadow: 0 8px 24px rgba(42,28,22,.18);
}
.t-hero-card-tick {
    width: 40px; height: 40px; border-radius: 50%; background: var(--t-olive); color: var(--t-white);
    display: flex; align-items: center; justify-content: center; flex: none;
}
.t-hero-card-text { display: flex; flex-direction: column; }
.t-hero-card-text strong { font-size: 16px; color: var(--t-ink); }
.t-hero-card-text span { font-size: 14px; color: var(--t-text); }
/* Hero buttons (partials/hero/ctas) as pills */
.homu-hero-cta { gap: 12px; margin-top: 0; }
.homu-btn {
    border-radius: var(--t-pill); text-transform: none; letter-spacing: 0;
    font-weight: 700; font-size: 17px; padding: 16px 28px; border-width: 2px;
}
.homu-btn--solid { background: var(--t-accent); border-color: var(--t-accent); color: var(--t-white); }
.homu-btn--solid:hover { background: var(--t-accent-dark); border-color: var(--t-accent-dark); color: var(--t-white); }
.homu-btn--ghost { color: var(--t-ink); border-color: var(--t-ink); padding: 14px 26px; }
.homu-btn--ghost:hover { background: var(--t-ink); color: var(--t-white); }

/* Promise strip */
.t-promise { padding-top: 24px; padding-bottom: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.t-promise-card { background: var(--t-panel); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.t-promise-card svg { color: var(--t-accent); }
.t-promise-card strong { font-size: 22px; color: var(--t-ink); letter-spacing: -0.01em; }
.t-promise-card span { font-size: 16px; line-height: 1.5; color: var(--t-text); }

/* Category cards */
.t-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.t-cat { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--t-ink); }
.t-cat img { width: 100%; height: 340px; object-fit: cover; border-radius: var(--t-radius); display: block; background: var(--t-panel-2); transition: transform .25s; }
.t-cat:hover img { transform: scale(1.015); }
.t-cat > span { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 24px; letter-spacing: -0.01em; }
.t-cat:hover { color: var(--t-accent); text-decoration: none; }

/* Product cards */
.t-product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.t-card { background: var(--t-panel); border-radius: var(--t-radius); padding: 12px 12px 20px; display: flex; flex-direction: column; gap: 14px; }
.t-card-media {
    position: relative; height: 280px; border-radius: var(--t-radius-sm); background: var(--t-white);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.t-card-media img { max-width: 88%; max-height: 88%; object-fit: contain; }
.t-card-media .t-badge { position: absolute; top: 12px; left: 12px; }
.t-card-body { padding: 0 8px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.t-card-body h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: 0; line-height: 1.25; }
.t-card-body h3 a { color: var(--t-ink); text-decoration: none; }
.t-card-body h3 a:hover { color: var(--t-accent); }
.t-card-price { display: flex; align-items: baseline; gap: 10px; }
.t-card-price > span { font-size: 24px; font-weight: 700; color: var(--t-ink); }
.t-card-price > span.t-card-price--sale { color: var(--homu-sale); }
.t-card-price s { color: var(--t-muted); font-size: 15px; }
.t-card-ship { font-size: 14px; color: var(--t-olive-text); font-weight: 600; }
.t-card-add {
    margin: 0 8px; height: 48px; border-radius: var(--t-pill); border: 2px solid var(--t-ink);
    background: transparent; color: var(--t-ink); font: inherit; font-weight: 700; font-size: 16px; cursor: pointer;
}
.t-card-add:hover { background: var(--t-ink); color: var(--t-white); }
.t-card-add:disabled { opacity: .6; cursor: wait; }

/* Why wait band */
.t-why {
    background: var(--t-panel); border-radius: 32px; padding: clamp(32px, 5vw, 72px);
    display: flex; flex-wrap: wrap; gap: 40px; align-items: center;
}
.t-why-copy { flex: 1 1 420px; display: flex; flex-direction: column; gap: 20px; }
.t-why-title { font-size: clamp(40px, 5vw, 72px); line-height: .95; letter-spacing: -0.035em; }
.t-why-copy p { margin: 0; font-size: 19px; line-height: 1.55; color: var(--t-text); max-width: 40ch; }
.t-why-compare { flex: 1 1 420px; display: flex; flex-direction: column; gap: 14px; }
.t-why-row { border-radius: 18px; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.t-why-row span { font-size: 17px; }
.t-why-row strong { font-size: 26px; letter-spacing: -0.01em; }
.t-why-row--old { background: var(--t-white); border: 1px solid var(--t-line); color: var(--t-muted); }
.t-why-row--old strong { color: var(--t-muted); text-decoration: line-through; }
.t-why-row--ours { background: var(--t-peach); color: var(--t-ink); }
.t-why-row--ours span { font-weight: 600; }

/* Showroom */
.t-showroom {
    background: var(--t-panel); border-radius: var(--t-radius-lg); padding: 40px;
    display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; margin-bottom: 64px;
}
.t-showroom-copy { flex: 1 1 420px; display: flex; flex-direction: column; gap: 16px; }
.t-showroom-copy .t-h2 { font-size: 40px; }
.t-showroom-copy p { margin: 0; font-size: 18px; line-height: 1.55; color: #4A3A31; max-width: 60ch; }
.t-showroom-where { font-size: 16px !important; font-weight: 600; color: var(--t-ink) !important; }

@media (max-width: 767px) {
    .homu-hero-split .homu-hero-split-grid,
    .homu-hero-split--rtl .homu-hero-split-grid,
    .homu-hero-split--ltr .homu-hero-split-grid { grid-template-columns: minmax(0, 1fr); padding-top: 28px; }
    .homu-hero-split--rtl .homu-hero-split-media { order: 2; }
    .homu-hero-split-media img { height: 380px; }
    .t-cat img { height: 260px; }
    .t-section { padding-top: 44px; }
}

/* Page links as round buttons */
.pagination { gap: 6px; }
.pagination .page-item .page-link { border-radius: var(--t-pill) !important; min-width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-weight: 600; border: 1px solid var(--t-line); margin: 0; }
.pagination .page-item.active .page-link { background: var(--t-ink); border-color: var(--t-ink); }

/* Product lists load the next page as you scroll (products/list.blade.php).
   The button only shows if that fails or scripts are off. */
.t-more { text-align: center; padding: 28px 0 36px; }
.t-more-btn { display: inline-block; padding: 12px 28px; border-radius: var(--t-pill); background: var(--t-ink); color: #fff !important; font-weight: 600; text-decoration: none !important; }
.t-more-btn:hover { background: var(--t-accent); }
.t-more-loading { color: var(--homu-muted); font-size: 14px; }
.t-more [hidden] { display: none !important; }
.pagination .page-link:hover { background: var(--t-panel); color: var(--t-accent); }