/*
Theme Name: Tootels
Theme URI: https://tootels.co.za
Author: AMIR1
Author URI: https://amir1.co.za
Description: Tootels Exclusive and Tootels Everyday online store theme for WooCommerce.
Version: 1.0.0
Requires at least: 6.0
Text Domain: tootels
*/

/* Layout: dark storefront chrome like Amir Online. Two-row header (brand, search, account / brand menu with dropdowns),
   red hairline, edge-to-edge hero, bento category grid, Vialli product bands with front/back swap, brands, about + contact, footer. */
:root {
  --ink: #121119;
  --bar: #17161f;
  --bar2: #1c1b27;
  --panel: #1f1e2b;
  --line: #2f2e3d;
  --text: #f3f2f7;
  --muted: #aaa8ba;
  --red: #d71f26;
  --red-hot: #ff5b60;
  --paper: #f2f2f4;
  --paper-ink: #15141b;
  --f-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 15px/1.55 var(--f-body);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--red-hot); outline-offset: 2px; }
.wrap {
  max-width: 1320px;
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
svg.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- header ---------- */
.top { background: var(--bar); }
.top .wrap { display: flex; align-items: center; gap: 28px; padding-block: 14px; }
.logo { display: flex; flex: none; }
.logo img { height: 58px; width: auto; display: block; }
.search { flex: 1; display: flex; max-width: 540px; min-width: 0; }
.search input {
  flex: 1; min-width: 0; height: 40px; padding: 0 14px;
  background: #252432; color: var(--text);
  border: 1px solid var(--line); border-right: 0; border-radius: 8px 0 0 8px;
  font: inherit;
}
.search input::placeholder { color: #8d8ba0; }
.search button { width: 52px; height: 40px; display: grid; place-items: center; background: var(--red); color: #fff; border-radius: 0 8px 8px 0; }
.acts { margin-left: auto; display: flex; align-items: center; gap: 24px; font-weight: 500; }
.acts a { display: flex; align-items: center; gap: 8px; position: relative; }
.badge { position: absolute; top: -9px; right: -12px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.menu-toggle { display: none; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; font-weight: 600; }

.navrow { background: var(--bar2); border-top: 1px solid var(--line); border-bottom: 2px solid var(--red); }
.nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.nav > li { position: relative; }
.nav > li > a, .nav > li > button {
  display: flex; align-items: center; gap: 6px; padding: 14px 13px;
  font-weight: 600; font-size: 14px; color: #e6e5ee; white-space: nowrap;
}
.nav > li > a:hover, .nav > li > button:hover, .dd.open > button { color: #fff; background: rgba(255,255,255,.06); }
.nav .hot { color: var(--red-hot); }
.chev { width: 14px; height: 14px; stroke-width: 2.2; transition: transform .15s; }
.dd.open .chev { transform: rotate(180deg); }
.dd-menu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 30;
  min-width: 210px; padding: 8px; list-style: none; margin: 0;
  background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--red);
  border-radius: 0 0 8px 8px; box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.dd.open > .dd-menu { display: block; }
@media (hover: hover) and (min-width: 901px) { .dd:hover > .dd-menu { display: block; } .dd:hover > button { color: #fff; background: rgba(255,255,255,.06); } }
.dd-menu a { display: block; padding: 9px 12px; border-radius: 6px; font-weight: 500; color: #dddbe8; }
.dd-menu a:hover { background: rgba(255,255,255,.07); color: #fff; }

/* ---------- hero (edge to edge, directly under the header) ---------- */
.hero { background: #121119; line-height: 0; }
.hero img { display: block; width: 100%; height: auto; }

/* ---------- mid-page banners ---------- */
.banner { padding-block: 46px 6px; }
.banner .wrap { max-width: none; padding-inline: 0; }
.banner img { display: block; width: 100%; height: auto; }

/* ---------- sections ---------- */
.sec { padding-block: 46px 6px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
h2 { margin: 0; font: 800 clamp(22px, 2.6vw, 30px)/1.15 var(--f-display); letter-spacing: -.01em; text-wrap: balance; }
.more { color: var(--red-hot); font-weight: 600; white-space: nowrap; }
.more:hover { text-decoration: underline; }

/* bento categories */
.bento {
  display: grid; gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(230px, 24vw, 330px);
  grid-template-areas: "tees tees golf jeans" "tees tees snk boot";
}
.tile { position: relative; display: block; overflow: hidden; border-radius: 12px; background: var(--paper); min-width: 0; }
.tile.tees { grid-area: tees; } .tile.golf { grid-area: golf; } .tile.jeans { grid-area: jeans; } .tile.snk { grid-area: snk; } .tile.boot { grid-area: boot; }
.tile .pics { position: absolute; inset: 0 0 52px 0; display: flex; }
.tile .pics img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s; }
.tile:hover .pics img { transform: scale(1.04); }
.tile .lab {
  position: absolute; inset: auto 0 0 0; padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--ink); font: 700 17px/1 var(--f-display);
  border-top: 2px solid var(--red);
}
.tile .lab small { font: 500 13px/1 var(--f-body); color: var(--muted); }

/* product bands */
.row {
  display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px;
  scroll-snap-type: x proximity; scrollbar-color: #4a4960 transparent;
}
.card { flex: 0 0 clamp(190px, 21vw, 262px); scroll-snap-align: start; min-width: 0; }
.media { position: relative; aspect-ratio: 2 / 3; background: var(--paper); border-radius: 10px; overflow: hidden; }
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: opacity .25s; }
.media img.alt { opacity: 0; }
.card:hover .media img.alt, .card:focus-visible .media img.alt { opacity: 1; }
.card:hover .media img.main, .card:focus-visible .media img.main { opacity: 0; }
.card h3 { margin: 10px 2px 0; font: 600 15px/1.35 var(--f-body); }
.card p { margin: 2px 2px 0; color: var(--muted); font-size: 13px; }

/* brands */
.brands { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bgroup { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.bgroup h3 { margin: 0 0 12px; font: 700 18px/1.2 var(--f-display); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; background: var(--bar2); }
.chips a:hover { border-color: var(--red); background: rgba(215,31,38,.14); }

/* about */
.about { max-width: 70ch; }
.about p { margin: 0 0 12px; color: #d6d4e2; }
.tbc { color: #d9b36a; }

/* footer */
footer { margin-top: 54px; background: var(--bar); border-top: 2px solid var(--red); }
.fgrid { display: grid; gap: 30px; grid-template-columns: 1.3fr 1fr 1.3fr; padding-block: 38px 28px; }
.fcol { min-width: 0; }
.fcol h3 { margin: 0 0 14px; font: 700 17px/1.2 var(--f-display); }
.fcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.fcol a { color: #cfcde0; }
.fcol a:hover { color: #fff; text-decoration: underline; }
.fbrand p { margin: 14px 0 16px; color: var(--muted); max-width: 34ch; }
.fcol dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; }
.fcol dt { color: var(--muted); }
.fcol dd { margin: 0; color: #cfcde0; }
.social { display: flex; flex-wrap: wrap; gap: 8px; }
.social a { padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--bar2); font-weight: 600; font-size: 14px; color: var(--text); }
.social a:hover { border-color: var(--red); background: rgba(215,31,38,.14); text-decoration: none; }
.fbase { border-top: 2px solid var(--red); }
.fbase .wrap, footer .fbase { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; padding-block: 18px; color: var(--muted); font-size: 14px; }
.fbase a { color: #cfcde0; }
.fbase a:hover { color: #fff; text-decoration: underline; }
footer .logo img { height: 56px; }

/* ---------- phone / tablet ---------- */
@media (max-width: 900px) {
  .top .wrap { flex-wrap: wrap; gap: 14px; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .acts { gap: 16px; }
  .acts span.t { display: none; }
  .menu-toggle { display: flex; margin-left: auto; }
  .acts { margin-left: 0; }
  .navrow .wrap { padding-block: 0; }
  .nav { display: none; flex-direction: column; align-items: stretch; padding-block: 6px; }
  .navrow.open .nav { display: flex; }
  .nav > li > a, .nav > li > button { width: 100%; padding: 13px 4px; justify-content: space-between; }
  .dd-menu { position: static; box-shadow: none; border: 0; border-left: 2px solid var(--red); border-radius: 0; margin: 0 0 6px 6px; min-width: 0; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(220px, 56vw, 330px); grid-template-areas: "tees tees" "golf jeans" "snk boot"; }
  .brands { grid-template-columns: 1fr; }
  .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .logo img { height: 44px; }
  .card { flex-basis: 62vw; }
  .fgrid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- WordPress / WooCommerce additions ---------- */
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.admin-bar .top{}
.page-wrap{padding-block:40px 20px}
.page-wrap > .wrap > h1,.page-title{margin:0 0 22px;font:800 clamp(26px,3.2vw,38px)/1.1 var(--f-display)}
.entry{max-width:78ch}
.entry h2{margin:30px 0 10px;font-size:clamp(20px,2.2vw,26px)}
.entry h3{margin:22px 0 8px;font:700 18px/1.3 var(--f-display)}
.entry p,.entry li{color:#d6d4e2}
.entry a{color:var(--red-hot);text-decoration:underline}
.entry ul,.entry ol{padding-left:22px}
.entry table{border-collapse:collapse;width:100%}
.entry th,.entry td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.card .price,.summary .price{display:block;margin:2px 2px 0;color:#fff;font-weight:700}
.card .price del{color:var(--muted);font-weight:400}
.grid{display:grid;gap:18px 14px;grid-template-columns:repeat(4,minmax(0,1fr))}
.grid .card{flex:none}
.woo-wrap{padding-block:30px 10px}
.woocommerce-breadcrumb{color:var(--muted);font-size:13px;margin:0 0 18px}
.woocommerce-breadcrumb a:hover{color:#fff;text-decoration:underline}
.woocommerce-result-count{color:var(--muted);margin:0 0 14px}
.woocommerce-ordering{margin:0 0 18px}
.woocommerce-ordering select,select,input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=search],textarea{background:#252432;color:var(--text);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font:inherit;max-width:100%}
textarea{width:100%}
.woocommerce-pagination ul{display:flex;gap:8px;list-style:none;padding:0;margin:26px 0 0;flex-wrap:wrap}
.woocommerce-pagination a,.woocommerce-pagination span{display:block;padding:8px 13px;border:1px solid var(--line);border-radius:8px;background:var(--bar2)}
.woocommerce-pagination .current{background:var(--red);border-color:var(--red)}
.button,button.button,.single_add_to_cart_button,input[type=submit],.wc-block-components-button{display:inline-block;background:var(--red);color:#fff!important;border:0;border-radius:8px;padding:12px 22px;font:700 15px/1.2 var(--f-body);cursor:pointer;text-align:center}
.button:hover,.single_add_to_cart_button:hover,input[type=submit]:hover{background:#b9181e}
.button.alt,.button.disabled{opacity:1}
.single_add_to_cart_button.disabled{opacity:.5;cursor:not-allowed}
/* single product */
.single-product div.product{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:start}
.single-product div.product > .woocommerce-product-gallery{grid-column:1;grid-row:1 / span 3;background:var(--paper);border-radius:12px;overflow:hidden;position:relative;width:100%!important;float:none!important}
.single-product div.product > .summary{grid-column:2;float:none!important;width:100%!important}
.single-product div.product > .woocommerce-tabs,.single-product div.product > .related,.single-product div.product > .up-sells{grid-column:1 / -1}
.woocommerce-product-gallery__image img{width:100%;height:auto;display:block;mix-blend-mode:multiply}
.flex-control-thumbs{display:flex;gap:8px;list-style:none;margin:0;padding:10px;background:var(--paper)}
.flex-control-thumbs li{flex:0 0 72px}
.flex-control-thumbs img{cursor:pointer;opacity:.6;mix-blend-mode:multiply}
.flex-control-thumbs img.flex-active,.flex-control-thumbs img:hover{opacity:1}
.product_title{margin:0 0 6px;font:800 clamp(24px,2.8vw,34px)/1.15 var(--f-display)}
.summary .brand-line{color:var(--muted);margin:0 0 14px;font-weight:600}
.summary .woocommerce-product-details__short-description{color:#d6d4e2}
.variations{border:0;margin:14px 0}
.variations td,.variations th{display:block;padding:4px 0;text-align:left;border:0}
.variations label{font-weight:700}
.variations select{min-width:220px}
.reset_variations{color:var(--muted);margin-left:10px;font-size:13px}
.quantity input{width:72px}
.single_variation_wrap{margin-top:14px}
form.cart{margin:16px 0;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
form.cart.variations_form{display:block}
.woocommerce-variation-add-to-cart{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.product_meta{color:var(--muted);font-size:14px;margin-top:18px;display:grid;gap:4px}
.product_meta a{color:#cfcde0;text-decoration:underline}
.woocommerce-tabs ul.tabs{display:flex;gap:6px;list-style:none;padding:0;margin:30px 0 0;border-bottom:2px solid var(--red)}
.woocommerce-tabs ul.tabs a{display:block;padding:10px 16px;font-weight:600}
.woocommerce-tabs ul.tabs li.active a{background:var(--red)}
.woocommerce-tabs .panel{padding:20px 0}
.related.products > h2,.up-sells > h2{margin:40px 0 18px}
.related.products ul.products,ul.products{display:grid;gap:18px 14px;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:0;padding:0}
ul.products li.product{min-width:0}
ul.products li.product .card{display:block}
/* cart / checkout / account */
.woocommerce-cart-form table,.shop_table{width:100%;border-collapse:collapse;margin:0 0 20px}
.shop_table th,.shop_table td{padding:12px;border-bottom:1px solid var(--line);text-align:left}
.shop_table img{width:64px;height:auto;background:var(--paper);border-radius:6px}
.cart_totals,.woocommerce-checkout-review-order{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;margin-top:20px}
.woocommerce-info,.woocommerce-message,.woocommerce-error{list-style:none;margin:0 0 20px;padding:14px 16px;background:var(--panel);border-left:4px solid var(--red);border-radius:8px}
.woocommerce-message .button,.woocommerce-info .button{float:right;margin-left:12px}
.woocommerce form .form-row{margin:0 0 14px}
.woocommerce form .form-row label{display:block;margin:0 0 5px;font-weight:600}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row select{width:100%}
.woocommerce-MyAccount-navigation ul{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-wrap:wrap;gap:8px}
.woocommerce-MyAccount-navigation a{display:block;padding:9px 14px;border:1px solid var(--line);border-radius:8px;background:var(--bar2)}
.woocommerce-MyAccount-navigation .is-active a{background:var(--red);border-color:var(--red)}
.cart-badge{}
.empty-note{color:var(--muted)}
@media (max-width:900px){
  .grid,ul.products,.related.products ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .single-product div.product{grid-template-columns:1fr;gap:22px}
  .single-product div.product > .woocommerce-product-gallery,.single-product div.product > .summary{grid-column:1;grid-row:auto}
}

/* Keep WooCommerce body classes from switching the page to flex */
body,body.woocommerce,body.woocommerce-page{display:block!important}

.woocommerce-product-gallery__trigger{display:none!important}