/* ============================================================================
   Trendora storefront theme (revertible). Everything is scoped to body.trendora,
   so removing the body class (toggle off) restores the original design.
   ============================================================================ */

/* Match Trendora's 1280px content width (site default is max-w-6xl = 1152px). */
body.trendora .max-w-6xl { max-width: 1280px; }
/* Neutralise the homepage listings wrapper so the inner .td-grid controls width/padding. */
body.trendora .s308 { max-width: none; padding: 0; }

/* ---- Hero banner ---- */
body.trendora .td-hero {
    max-width: 1280px; margin: 18px auto 8px; padding: 0 16px;
}
body.trendora .td-hero-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    background: linear-gradient(120deg, #ffe4ef 0%, #fff1e6 60%, #ffe9d6 100%);
    border-radius: 18px; padding: 40px 44px; overflow: hidden;
}
body.trendora .td-hero h1 { font-size: 34px; font-weight: 800; color: #1f2937; margin: 0 0 8px; letter-spacing: -.5px; }
body.trendora .td-hero p { color: #6b7280; font-size: 15px; margin: 0 0 18px; }
body.trendora .td-hero-cta {
    display: inline-block; background: #f97316; color: #fff; font-weight: 700; font-size: 14px;
    padding: 11px 26px; border-radius: 999px; text-decoration: none;
}
body.trendora .td-hero-cta:hover { background: #ea580c; }
body.trendora .td-hero-art { font-size: 96px; line-height: 1; flex: 0 0 auto; }

/* ---- Section header ---- */
body.trendora .td-sec { max-width: 1280px; margin: 26px auto 12px; padding: 0 16px; }
body.trendora .td-sec-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; }
body.trendora .td-sec-h h2 { font-size: 21px; font-weight: 800; color: #111827; margin: 0; }
body.trendora .td-sec-h .td-sec-note { font-size: 13px; color: #ef4444; font-weight: 600; }
body.trendora .td-sec-h .td-sec-link { margin-left: auto; font-size: 13px; color: #f97316; text-decoration: none; }

/* ---- Category tiles ---- */
body.trendora .td-tiles {
    max-width: 1280px; margin: 6px auto 4px; padding: 0 16px;
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px;
}
@media (max-width: 900px) { body.trendora .td-tiles { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 520px) { body.trendora .td-tiles { grid-template-columns: repeat(3, 1fr); } }
body.trendora .td-tile {
    display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none;
    background: #fff; border: 1px solid #eef0f2; border-radius: 12px; padding: 14px 8px;
    transition: box-shadow .15s, transform .15s;
}
body.trendora .td-tile:hover { box-shadow: 0 8px 22px rgba(0,0,0,.08); }
body.trendora .td-tile-ic { font-size: 28px; line-height: 1; }
body.trendora .td-tile-nm { font-size: 12px; color: #374151; text-align: center; font-weight: 600; }

/* ---- Product grid + cards ---- */
body.trendora .td-grid {
    max-width: 1280px; margin: 0 auto; padding: 0 16px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
@media (max-width: 820px) { body.trendora .td-grid { grid-template-columns: repeat(2, 1fr); } }

body.trendora .td-card {
    display: flex; flex-direction: column; background: #fff; border: 1px solid #eef0f2;
    border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit;
    transition: box-shadow .15s, transform .15s;
}
body.trendora .td-card:hover { box-shadow: 0 10px 26px rgba(0,0,0,.10); }
body.trendora .td-card-img {
    position: relative; height: 300px; display: flex; align-items: center; justify-content: center;
}
body.trendora .td-card-img img { width: 100%; height: 100%; object-fit: cover; }
body.trendora .td-ph { font-size: 68px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.15)); }
/* rotating placeholder backgrounds so the grid looks colourful like Trendora */
body.trendora .td-c0 { background: linear-gradient(135deg,#fecdd3,#fda4af); }
body.trendora .td-c1 { background: linear-gradient(135deg,#fde68a,#fcd34d); }
body.trendora .td-c2 { background: linear-gradient(135deg,#bfdbfe,#93c5fd); }
body.trendora .td-c3 { background: linear-gradient(135deg,#e9d5ff,#d8b4fe); }
body.trendora .td-c4 { background: linear-gradient(135deg,#bbf7d0,#86efac); }
body.trendora .td-c5 { background: linear-gradient(135deg,#fed7aa,#fdba74); }

body.trendora .td-badge {
    position: absolute; top: 8px; left: 8px; background: #ef4444; color: #fff;
    font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px;
}
body.trendora .td-featured {
    position: absolute; top: 8px; right: 8px; background: rgba(17,24,39,.82); color: #fde68a;
    font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 6px;
}
body.trendora .td-card-body { padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 5px; }
body.trendora .td-card-title {
    font-size: 14px; color: #1f2937; font-weight: 500; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px;
}
body.trendora .td-card-rating { display: flex; align-items: center; gap: 6px; font-size: 12px; }
body.trendora .td-stars { color: #f59e0b; letter-spacing: 1px; }
body.trendora .td-stars-empty { color: #d1d5db; }
body.trendora .td-rc { color: #9ca3af; }
body.trendora .td-card-price { display: flex; align-items: baseline; gap: 8px; }
body.trendora .td-now { font-size: 17px; font-weight: 800; color: #e11d48; }
body.trendora .td-was { font-size: 12px; color: #9ca3af; text-decoration: line-through; }
body.trendora .td-card-meta { font-size: 11px; color: #9ca3af; }

/* ---- Popular shops ---- */
body.trendora .td-shops {
    max-width: 1280px; margin: 0 auto; padding: 0 16px;
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
}
@media (max-width: 900px) { body.trendora .td-shops { grid-template-columns: repeat(3, 1fr); } }
body.trendora .td-shop {
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none;
    border: 1px solid #eef0f2; border-radius: 12px; padding: 14px 8px; background: #fff;
}
body.trendora .td-shop-av {
    width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 15px;
}
body.trendora .td-shop-nm { font-size: 12px; font-weight: 600; color: #374151; }
body.trendora .td-shop-sales { font-size: 11px; color: #9ca3af; }

/* ---- Details page polish ---- */
body.trendora .td-detail .s341 { font-size: 26px; font-weight: 800; }
body.trendora .td-detail .td-d-badge {
    display: inline-block; background: #ef4444; color: #fff; font-size: 13px; font-weight: 700;
    padding: 3px 10px; border-radius: 8px; margin-left: 8px; vertical-align: middle;
}
body.trendora .td-detail .td-d-rating { color: #f59e0b; font-size: 15px; margin: 6px 0; }
body.trendora .td-detail .td-d-rating .td-rc { color: #9ca3af; font-size: 13px; }

/* ---- Trendora-style top bar (announcement + header + category nav) ---- */
/* Hide the original navbar + search bar under the theme. */
body.trendora > nav { display: none; }
body.trendora .s482 { display: none; }

body.trendora .td-announce {
    background: #111827; color: #fff; text-align: center; font-size: 13px; padding: 7px 12px; letter-spacing: .2px;
}
body.trendora .td-topbar { background: #fff; border-bottom: 1px solid #eef0f2; }
body.trendora .td-wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
body.trendora .td-header-row { display: flex; align-items: center; gap: 24px; padding: 14px 16px; }
/* Same logo as the main site: 20px / weight 500, colours come from .s59 (#f0960a) / .s60 (#0e7c00). */
body.trendora .td-logo { font-size: 20px; font-weight: 500; text-decoration: none; white-space: nowrap; }

/* Search sits on its own centred band under the logo row (3.png): keyword | Location | Search */
body.trendora .td-searchband { padding: 12px 16px 14px; border-top: 1px solid #eef0f2; }
body.trendora .td-search {
    display: flex; max-width: 1030px; margin: 0 auto; background: #fff;
    border: 1.5px solid #e5e7eb; border-radius: 999px; overflow: hidden;
}
body.trendora .td-search:focus-within { border-color: #f97316; }
body.trendora .td-search input {
    border: 0; padding: 12px 20px; font-size: 14px; outline: none; min-width: 0; background: #fff;
}
body.trendora .td-search .td-q { flex: 2.2; }
body.trendora .td-search .td-loc { flex: 1; border-left: 1.5px solid #e5e7eb; }
body.trendora .td-search button {
    border: 0; background: #f97316; color: #fff; font-weight: 700; font-size: 14px;
    padding: 0 34px; border-radius: 999px 0 0 999px; cursor: pointer;
}
body.trendora .td-search button:hover { background: #ea580c; }

body.trendora .td-hlinks { display: flex; align-items: center; gap: 20px; white-space: nowrap; margin-left: auto; }

/* Original-marketplace top row pieces (Categories dropdown, Post ad free, messages) */
body.trendora .td-cats-wrap { position: relative; }
body.trendora .td-cats-btn { background: none; border: 0; cursor: pointer; color: #374151; display: inline-flex; align-items: center; gap: 4px; padding: 6px 0; font-size: 14px; }
body.trendora .td-cats-btn:hover { color: #f97316; }
body.trendora .td-cats-drop {
    position: absolute; top: 100%; left: 0; z-index: 130; background: #fff;
    border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    padding: 8px 0; min-width: 240px; max-height: 70vh; overflow: auto;
}
body.trendora .td-cats-drop a { display: block; padding: 7px 16px; font-size: 14px; color: #374151; text-decoration: none; }
body.trendora .td-cats-drop a:hover { color: #f97316; background: #fff7ed; }
body.trendora .td-post { text-decoration: none; white-space: nowrap; }
body.trendora .td-msg { text-decoration: none; }

/* Align the breadcrumb to the same 1280 container as the header / grid (was a narrower box). */
body.trendora .sp-crumb { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
body.trendora .td-hlinks a { color: #374151; font-size: 14px; text-decoration: none; }
body.trendora .td-hlinks a:hover { color: #f97316; }
body.trendora .td-bag { font-weight: 600; }
body.trendora .td-bag-count {
    display: inline-block; background: #f97316; color: #fff; border-radius: 999px; font-size: 11px;
    min-width: 18px; text-align: center; padding: 0 5px; margin-left: 2px;
}

/* category nav with hover mega dropdowns */
body.trendora .td-catnav { border-top: 1px solid #f1f3f5; }
body.trendora .td-catnav-row { display: flex; gap: 6px; flex-wrap: nowrap; padding: 4px 16px; }
/* items keep their natural width (no shrink) - JS moves the overflow into "More" */
body.trendora .td-catnav-row .td-cat-item { flex: 0 0 auto; }
body.trendora .td-cat-item { position: relative; }
body.trendora .td-cat-item > a {
    display: inline-block; padding: 10px 12px; font-size: 13.5px; font-weight: 600; color: #f97316; background: #f7f7f7; text-decoration: none; border-radius: 8px;
}
body.trendora .td-cat-item:hover > a { color: #f97316; background: #ededed; }
body.trendora .td-mega {
    position: absolute; left: 0; top: 100%; z-index: 950; display: none;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.14);
    padding: 14px 18px; min-width: 460px; max-width: 640px;
    grid-template-columns: repeat(3, 1fr); gap: 6px 18px;
}
body.trendora .td-cat-item.open .td-mega { display: grid; }
body.trendora .td-mega a { font-size: 13px; color: #4b5563; text-decoration: none; padding: 4px 0; white-space: nowrap; }
body.trendora .td-mega a:hover { color: #f97316; }

/* ---- Card: circular disc behind the icon + product name overlaid (Trendora look) ---- */
body.trendora .td-card-img { overflow: hidden; }
body.trendora .td-disc {
    position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%);
    width: 52%; aspect-ratio: 1 / 1; border-radius: 50%; background: rgba(255,255,255,.28);
}
body.trendora .td-card-img .td-ph { position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%); z-index: 1; }
body.trendora .td-img-name {
    position: absolute; left: 10px; right: 10px; bottom: 12px; z-index: 1; text-align: center;
    color: #fff; font-weight: 700; font-size: 14px; line-height: 1.25; text-shadow: 0 1px 4px rgba(0,0,0,.4);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- Search: category header + subcategory chips (replaces the plain results head) ---- */
body.trendora .sp-results-head { display: none; }
body.trendora .sp-wrap { max-width: 1280px; margin: 0 auto; }
body.trendora .td-cathead { max-width: 1280px; margin: 8px auto 6px; padding: 0 16px; }
body.trendora .td-cathead-row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
body.trendora .td-cathead-title { font-size: 24px; font-weight: 800; color: #111827; margin: 0; }
body.trendora .td-cathead-count { color: #6b7280; font-size: 14px; }
body.trendora .td-cathead-row .td-sort {
    margin-left: auto; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 34px 8px 12px; font-size: 14px; background: #fff; cursor: pointer;
}
body.trendora .td-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
body.trendora .td-chip {
    display: inline-flex; align-items: center; gap: 5px; border: 1px solid #e5e7eb; background: #fff;
    border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 500; color: #374151; text-decoration: none; white-space: nowrap;
}
body.trendora .td-chip:hover { border-color: #f97316; color: #f97316; }

/* On the search page the product grid sits inside the results column - drop its own
   max-width/margin/padding so the CARDS fill edge-to-edge and their right edge lines up
   with the header, sort and breadcrumb (was 16px short due to the grid's padding). */
body.trendora .sp-wrap .td-grid { max-width: none; margin: 0; padding: 0; }

/* ---- Modern line icons (replace old emoji) ---- */
/* category nav icon: inherits the link's colour (so it matches text + hover) */
body.trendora .td-cat-item .td-ic { width: 17px; height: 17px; vertical-align: -3px; margin-right: 5px; }
/* product-card placeholder icon on the gradient tile */
body.trendora .td-ph-ic { width: 60px; height: 60px; color: rgba(31,41,55,.72); filter: drop-shadow(0 4px 8px rgba(0,0,0,.12)); }

/* Icon-free card tile: centre the product name on the gradient (no icon/disc). */
body.trendora .td-img-name-center { top: 50%; bottom: auto; transform: translateY(-50%); font-size: 16px; }

/* ---- breadcrumb on the sort line (bigger, saves the separate row) ---- */
body.trendora .sp-crumb { display: none; }
body.trendora .td-crumb { font-size: 13px; font-weight: 400; color: #374151; }
body.trendora .td-crumb a { color: #6b7280; text-decoration: none; font-weight: 400; }
body.trendora .td-crumb a:hover { color: #f97316; }
body.trendora .td-crumb-sep { color: #9ca3af; margin: 0 5px; }
body.trendora .td-crumb-cur { color: #111827; }

/* sort dropdown: custom chevron arrow */
body.trendora .td-sort {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: right 10px center; padding-right: 34px;
}

/* mega dropdown: flip to right-align for right-edge nav items so it never gets cut off (JS adds .flip) */
body.trendora .td-cat-item.flip .td-mega { left: auto; right: 0; }

/* Fashion pages: never show the first (root) category dropdown - sub-category dropdowns stay. */
body.trendora .sp-cascade-level[data-level="0"] { display: none; }

/* ---- Watchlist heart on fashion cards (same control as normal search cards) ---- */
body.trendora .td-card { position: relative; }
body.trendora .td-card-link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
/* Featured tag moves left so it never sits under the heart */
body.trendora .td-featured { right: 46px; }


/* Top-band fashion typeahead dropdown */
.td-suggest { position: absolute; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10); z-index: 600; overflow-y: auto; max-height: 70vh; }
.td-suggest a { display: block; padding: 10px 14px; font-size: 14px; color: #111827; text-decoration: none; }
.td-suggest a:hover { background: #f3f4f6; }
.td-suggest .cs-sep { color: #9ca3af; padding: 0 7px; }


/* Nav pills (2.png): orange caret, click-to-open, open pill keeps the greyish look */
body.trendora .td-cat-caret { width: 8px; height: 8px; border-right: 2px solid #f97316; border-bottom: 2px solid #f97316; transform: rotate(45deg); display: inline-block; margin: 0 2px 3px 9px; transition: transform .15s ease; }
body.trendora .td-cat-item.open > a .td-cat-caret { transform: rotate(225deg); margin-bottom: -2px; }
body.trendora .td-cat-item.open > a { color: #f97316; background: #ededed; }
body.trendora .td-mega .td-mega-all { font-weight: 600; color: #f97316; }


/* More panel (2.png): mains expand their subcategories in place */
body.trendora .td-more-grp .td-more-toggle { display: flex; align-items: center; }
body.trendora .td-mega .td-more-grp { grid-column: 1 / -1; }
body.trendora .td-more-sub { display: none; padding: 2px 0 6px 14px; }
body.trendora .td-more-grp.open .td-more-sub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 14px; }
body.trendora .td-more-sub a { display: block; padding: 4px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.trendora .td-more-sub .td-mega-all { grid-column: 1 / -1; }
body.trendora .td-more-grp.open > .td-more-toggle { color: #f97316; background: #ededed; border-radius: 6px; }
body.trendora .td-more-grp.open > .td-more-toggle .td-cat-caret { transform: rotate(225deg); margin-bottom: -2px; }