/*
Theme Name: Grand Terminal Cigars
Template: storefront
Author: OMG LLC
Description: Grand Terminal Cigars child theme.
Version: 3.0
*/

:root{
  --gold:#e7c577; --gold-light:#f0d490; --gold-dark:#d4b05e;
  --tobacco-dark:#17171a; --tobacco-medium:#232327; --tobacco-light:#33333a;
  --cream:#f8f4e6; --deep-brown:#0e0e11;
  --serif:'Lora','Georgia','Times New Roman',serif;
  --body:'Aptos','Segoe UI',system-ui,-apple-system,sans-serif;
  --line:rgba(231,197,119,.28);
}

/* ---------- textured dark canvas ---------- */
body,.site{
  background:
    repeating-linear-gradient(45deg,transparent,transparent 60px,rgba(212,175,55,.02) 60px,rgba(212,175,55,.02) 62px),
    repeating-linear-gradient(-45deg,transparent,transparent 60px,rgba(255,255,255,.02) 60px,rgba(255,255,255,.02) 62px),
    radial-gradient(ellipse at 30% 20%,rgba(212,175,55,.1) 0%,transparent 50%),
    radial-gradient(ellipse at 80% 80%,rgba(231,197,119,.08) 0%,transparent 60%),
    linear-gradient(135deg,var(--tobacco-dark) 0%,var(--deep-brown) 50%,var(--tobacco-medium) 100%) !important;
  background-attachment:fixed !important;
  color:var(--cream); font-family:var(--body);
}
.site-content,.col-full,#content,#primary,.content-area{ background:transparent !important; }
a{ color:var(--gold); }
a:hover{ color:var(--cream); }
h1,h2,h3,h4,.entry-title{ font-family:var(--serif); font-weight:600; color:var(--gold); }

/* ---------- HEADER: compact, single tidy block ---------- */
.site-header{
  background:#0e0e11 !important; background-image:none !important;
  border-bottom:1px solid var(--line) !important; box-shadow:none !important;
  padding:1.2rem 2rem 0.6rem !important;
}
.site-header .col-full{ max-width:1500px; margin:0 auto; text-align:center; }

/* logo centered on top */
.site-header .site-branding{ text-align:center; margin:0 auto .4rem; }
.site-header .custom-logo{ max-height:120px; width:auto; }
.site-header .site-title,.site-header .site-description{ position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px); }

/* nav row: centered */
.storefront-primary-navigation{ margin:0 !important; padding:0 !important; float:none !important; background:transparent !important; }
.main-navigation{ float:none !important; width:100% !important; }
.main-navigation ul.menu,.main-navigation ul.nav-menu{
  display:flex !important; justify-content:center !important; align-items:center;
  flex-wrap:wrap; gap:2rem; margin:0 !important; padding:0 !important;
}
.main-navigation ul li{ margin:0 !important; }
.main-navigation ul li a{
  font-family:var(--body); text-transform:uppercase; letter-spacing:.14em; font-size:.82rem;
  color:var(--cream) !important; text-decoration:none; padding:.4rem 0 .7rem !important;
  position:relative; display:block;
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item>a{ color:var(--gold) !important; }
/* gold dot indicator */
.main-navigation ul li>a::before{
  content:""; position:absolute; bottom:0; left:50%; transform:translateX(-50%) scale(0);
  width:5px; height:5px; border-radius:50%; background:var(--gold); transition:transform .22s ease;
}
.main-navigation ul li>a:hover::before,
.main-navigation ul li.current-menu-item>a::before{ transform:translateX(-50%) scale(1); }
/* dropdown */
.main-navigation ul.menu ul.sub-menu{
  background:rgba(14,14,17,.97) !important; border:1px solid var(--line); padding:.3rem 0; min-width:190px;
}
.main-navigation ul.menu ul.sub-menu li a{ padding:.6rem 1.1rem !important; font-size:.72rem; }
.main-navigation ul li.menu-item-has-children>a::after{ content:" \25BE"; font-size:.7em; opacity:.8; }

/* hide the header search box + cart clutter for now (clean like target) */
.site-header .site-search,
.site-header .widget_product_search{ display:none !important; }
.site-header-cart{
  float:none !important; position:absolute; top:1.4rem; right:2rem; margin:0 !important;
}
.site-header-cart .cart-contents{ color:var(--cream) !important; }
.site-header-cart .amount{ color:var(--gold) !important; }

/* ---------- STORE LAYOUT: white rail + grid ---------- */
.gtc-store__layout{ display:grid !important; grid-template-columns:260px 1fr !important; gap:0 !important; width:100%; align-items:stretch; }
.gtc-rail{ background:#fff !important; color:#141414 !important; border-right:2px solid #111 !important; padding:1.6rem 1.4rem !important; min-height:100%; }
.gtc-rail__sec{ margin-bottom:1.6rem; }
.gtc-rail h4{ font-family:var(--body); text-transform:uppercase; letter-spacing:.18em; font-size:.66rem; color:#b0902f !important; margin:0 0 .55rem; }
.gtc-rail__link{ display:block; font-family:var(--body); font-size:.96rem; color:#3a332d !important; padding:.3rem 0; text-decoration:none !important; transition:color .15s,padding .15s; }
.gtc-rail__link:hover,.gtc-rail__link.on{ color:#b0902f !important; padding-left:.3rem; }
.home .col-full,.home #content .col-full,.home #primary,.home .content-area{ max-width:100% !important; width:100% !important; padding:0 !important; margin:0 !important; }

/* store head */
.gtc-store__head{ padding:1.4rem 2.2rem 1.1rem; border-bottom:1px solid var(--line); }
.gtc-store__head h1{ font-family:var(--serif); font-weight:600; color:var(--gold); font-size:clamp(1.6rem,4vw,2.4rem); letter-spacing:.03em; margin:0; }

/* ---------- BRAND GRID ---------- */
.gtc-gridwrap{ padding:1.6rem 2.2rem; }
.gtc-grid{ display:flex; flex-wrap:wrap; justify-content:flex-start; gap:1.2rem; }
.gtc-card{ flex:0 0 200px; max-width:200px; display:flex; flex-direction:column; text-decoration:none !important; transition:.22s; }
.gtc-card:hover{ transform:translateY(-3px); }
.gtc-card.brandcard{ background:transparent; text-align:center; }
.gtc-ph{ aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; }
.gtc-ph.logo-tile{ background:transparent; border:none; }
.gtc-ph.logo-tile .brandlogo{ max-width:82%; max-height:78%; width:auto; height:auto; object-fit:contain; }
.brandcard__name{ font-family:var(--serif); font-weight:600; color:var(--cream); font-size:1rem; letter-spacing:.02em; margin:.55rem 0 0; text-shadow:1px 1px 3px rgba(0,0,0,.6); text-decoration:none !important; }

/* hide WP page title */
.entry-header,h1.entry-title,.page-title{ display:none !important; }

@media(max-width:820px){
  .gtc-store__layout{ grid-template-columns:1fr; }
  .gtc-rail{ border-right:none; border-bottom:2px solid #111; }
  .gtc-grid{ justify-content:center; }
  .site-header-cart{ position:static; text-align:center; margin-top:.6rem !important; }
}

/* ============ CUSTOM HEADER (own markup) ============ */
.gtc-header{ background:#0e0e11; border-bottom:1px solid var(--line); padding:1rem clamp(1.2rem,4vw,3rem); }
.gtc-header__inner{
  max-width:1600px; margin:0 auto;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1.5rem;
}
.gtc-header__logo{ justify-self:start; }
.gtc-logo-img{ max-height:96px; width:auto; display:block; }
.gtc-nav{ justify-self:center; }
.gtc-nav__menu{ display:flex; align-items:center; gap:2rem; list-style:none; margin:0; padding:0; }
.gtc-nav__menu li{ position:relative; }
.gtc-nav__menu a{
  font-family:var(--body); text-transform:uppercase; letter-spacing:.14em; font-size:.82rem;
  color:var(--cream); text-decoration:none; padding:.4rem 0 .7rem; display:block; position:relative; white-space:nowrap;
}
.gtc-nav__menu a:hover,.gtc-nav__menu .current-menu-item>a{ color:var(--gold); }
.gtc-nav__menu>li>a::before{
  content:""; position:absolute; bottom:0; left:50%; transform:translateX(-50%) scale(0);
  width:5px; height:5px; border-radius:50%; background:var(--gold); transition:transform .22s ease;
}
.gtc-nav__menu>li>a:hover::before,.gtc-nav__menu>li.current-menu-item>a::before{ transform:translateX(-50%) scale(1); }
.gtc-nav__menu li.menu-item-has-children>a::after{ content:" \25BE"; font-size:.7em; opacity:.8; }
/* dropdown */
.gtc-nav__menu ul.sub-menu{
  position:absolute; top:100%; left:0; min-width:190px; background:rgba(14,14,17,.97);
  border:1px solid var(--line); padding:.3rem 0; list-style:none; margin:0;
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:.2s; z-index:95;
}
.gtc-nav__menu li:hover>ul.sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.gtc-nav__menu ul.sub-menu a{ padding:.6rem 1.1rem; font-size:.72rem; }
/* tools */
.gtc-tools{ justify-self:end; display:flex; align-items:center; gap:1.1rem; }
.gtc-tool{ background:none; border:none; color:var(--cream); cursor:pointer; padding:0; display:flex; align-items:center; position:relative; }
.gtc-tool svg{ width:1.5rem; height:1.5rem; }
.gtc-tool:hover{ color:var(--gold); }
.gtc-cartcount{
  position:absolute; top:-8px; right:-10px; background:var(--gold); color:var(--tobacco-dark);
  font-size:.6rem; min-width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding:0 3px;
}
.gtc-searchbar{ display:none; grid-column:1/-1; padding:.8rem 0 0; }
.gtc-searchbar.open{ display:block; }
.gtc-searchbar input[type="search"]{ width:100%; max-width:420px; background:var(--tobacco-medium); color:var(--cream); border:1px solid var(--line); padding:.6rem .9rem; }
@media(max-width:820px){
  .gtc-header__inner{ grid-template-columns:1fr auto; }
  .gtc-nav{ display:none; }
}

/* ---- lock logo hard-left, consistent across all pages ---- */
.gtc-header__logo{ justify-self:start !important; margin-left:0 !important; }
.gtc-header__logo a{ display:inline-block; }
.gtc-logo-img{ display:block; margin:0 !important; }
/* fix grid so left column doesn't push logo inward: give logo a fixed-ish left zone */
.gtc-header__inner{ grid-template-columns:minmax(200px,1fr) auto minmax(200px,1fr) !important; }

/* ---- pin logo to top-left corner (match target), tighten header ---- */
.gtc-header{ padding:0.8rem clamp(1rem,2vw,1.6rem) !important; }
.gtc-header__inner{
  max-width:none !important;
  grid-template-columns:auto 1fr auto !important;
  gap:2rem !important;
}
.gtc-header__logo{ justify-self:start !important; margin:0 !important; padding:0 !important; }
.gtc-logo-img{ height:104px !important; max-height:104px !important; }
.gtc-nav{ justify-self:center !important; }
.gtc-tools{ justify-self:end !important; padding-right:.5rem; }

/* ---- rail: independent scroll ---- */
.gtc-rail{
  position:sticky; top:0; align-self:start;
  max-height:100vh; overflow-y:auto;
}

/* ---- footer (match test site) ---- */
.gtc-footer{
  position:relative; z-index:10; border-top:1px solid var(--line); margin-top:auto;
  padding:1.6rem clamp(1.2rem,4vw,2.5rem); background:var(--deep-brown);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.7rem 1.6rem;
}
.gtc-footer h4{ font-family:var(--body); text-transform:uppercase; letter-spacing:.2em; font-size:.7rem; color:var(--gold); margin-bottom:.4rem; }
.gtc-footer p,.gtc-footer a{ color:rgba(248,244,230,.7); font-size:.88rem; text-decoration:none; display:block; margin-bottom:.15rem; }
.gtc-footer a:hover{ color:var(--gold); }
.gtc-footer .gtc-age{ grid-column:1/-1; border-top:1px solid var(--line); margin-top:.5rem; padding-top:.75rem; color:rgba(248,244,230,.5); font-size:.78rem; }

/* ---- grid magnifier lens (flat, ported from testsite) ---- */
.gridlens{ position:absolute; border-radius:50%; overflow:hidden; pointer-events:none; opacity:0; transition:opacity .12s ease; box-shadow:0 14px 38px rgba(0,0,0,.6); z-index:5; }
.gridlens.on{ opacity:1; }
.gridlens__fx{ position:absolute; top:0; left:0; overflow:hidden; border-radius:50%;
  background:
    repeating-linear-gradient(45deg,transparent,transparent 60px,rgba(212,175,55,.02) 60px,rgba(212,175,55,.02) 62px),
    repeating-linear-gradient(-45deg,transparent,transparent 60px,rgba(255,255,255,.02) 60px,rgba(255,255,255,.02) 62px),
    radial-gradient(ellipse at 30% 20%,rgba(212,175,55,.1) 0%,transparent 50%),
    radial-gradient(ellipse at 80% 80%,rgba(231,197,119,.08) 0%,transparent 60%),
    linear-gradient(135deg,var(--tobacco-dark) 0%,var(--deep-brown) 50%,var(--tobacco-medium) 100%),
    #17171a;
  background-attachment:fixed,fixed,fixed,fixed,fixed,scroll; }
.gridlens__clone{ position:absolute; top:0; left:0; transform-origin:0 0; pointer-events:none; }
.gtc-gridwrap{ position:relative; }

/* ---- fisheye layering: lens tucks UNDER store head + rail (match test site) ---- */
.gtc-store__head{ position:relative; z-index:10; background:var(--deep-brown); }
.gtc-rail{ z-index:10; }
.gridlens{ z-index:5; }
/* store head opaque so lens disappears behind it near the line */
.gtc-store__head{ background:
  linear-gradient(135deg,var(--tobacco-dark) 0%,var(--deep-brown) 50%,var(--tobacco-medium) 100%) !important; }



/* ---- FIX: store head background = match textured bg (opaque, not black gradient) ---- */
.gtc-store__head{
  background:
    repeating-linear-gradient(45deg,transparent,transparent 60px,rgba(212,175,55,.02) 60px,rgba(212,175,55,.02) 62px),
    repeating-linear-gradient(-45deg,transparent,transparent 60px,rgba(255,255,255,.02) 60px,rgba(255,255,255,.02) 62px),
    radial-gradient(ellipse at 30% 20%,rgba(212,175,55,.1) 0%,transparent 50%),
    radial-gradient(ellipse at 80% 80%,rgba(231,197,119,.08) 0%,transparent 60%),
    linear-gradient(135deg,var(--tobacco-dark) 0%,var(--deep-brown) 50%,var(--tobacco-medium) 100%) !important;
  background-attachment:fixed !important;
  position:relative; z-index:10;
}

/* ---- rail scroll: clean, always-visible native scrollbar ---- */
.gtc-rail{ overflow-y:scroll; }

/* ---- kill Storefront footer remnants (white band) ---- */
.site-footer .footer-widgets,
.storefront-handheld-footer-bar,
.site-info,
.site-footer .col-full > *:not(.gtc-footer){ display:none !important; }
.site-footer{ background:transparent !important; padding:0 !important; margin:0 !important; border:none !important; }

/* ---- remove dead space above footer: content fills down ---- */
.site-content{ min-height:0 !important; }
.gtc-footer{ margin-top:0 !important; }

/* ---- rail stretches full height to meet footer ---- */
.gtc-store__layout{ align-items:stretch !important; }
.gtc-rail{
  position:relative !important;   /* not sticky, so it fills the column */
  align-self:stretch !important;
  max-height:none !important;
  min-height:100%;
  overflow-y:visible !important;   /* let page scroll; rail is full height */
}

/* ---- FORCE rail to stretch full column height to footer ---- */
.gtc-store__layout{ align-items:stretch !important; }
.gtc-rail{
  height:auto !important;
  min-height:100% !important;
  align-self:stretch !important;
  position:relative !important;
  overflow-y:visible !important;
}
/* ensure the layout row itself stretches */
.gtc-store, .gtc-store__layout, .gtc-store__main{ height:auto; }

/* ===== FINAL rail-gap override (last rule wins, no deletion) ===== */
.gtc-rail{ height:auto !important; align-self:stretch !important; overflow:visible !important; }

/* ===== FILL CHAIN so rail+grid reach footer (targets real nesting) ===== */
.home .gtc-rail{ height:auto !important; align-self:stretch !important; }

/* ========================================================
   DECOUPLED RAIL ARCHITECTURE (final structure)
   Rail = absolute, spans full height of .gtc-store (snaps to footer).
   Content = floats freely, grows with brand count. No coupling.
   ======================================================== */
.gtc-store{ position:relative !important; display:block !important; }
.gtc-store__layout{ display:block !important; position:static !important; }

.gtc-store .gtc-rail{
  position:absolute !important;
  left:0 !important; top:0 !important; bottom:0 !important;
  width:260px !important;
  background:#fff !important; color:#141414 !important;
  border-right:2px solid #111 !important;
  padding:1.6rem 1.4rem !important;
  overflow-y:auto !important;
  box-sizing:border-box !important;
  z-index:10 !important;
  height:auto !important; max-height:none !important; min-height:0 !important;
}

.gtc-store .gtc-store__main{
  margin-left:260px !important;
  min-height:0 !important; height:auto !important;
  box-sizing:border-box !important;
}

/* make .gtc-store reach the footer so the absolute rail stretches to it */
/* rail already absolute top:0 bottom:0 — now .gtc-store is taller, rail follows */

/* BULLETPROOF: white rail column painted as background on .gtc-store (always full height) */
.gtc-store{ background:linear-gradient(to right,#fff 0,#fff 258px,#111 258px,#111 260px,transparent 260px) !important; }
.gtc-store .gtc-rail{ background:transparent !important; border-right:none !important; }

/* THE GAP: #primary.content-area has ~109px bottom padding — kill it */
#primary.content-area,
#content #primary,
.content-area{ padding-bottom:0 !important; margin-bottom:0 !important; }

/* RESET wrapper chain — remove leftover flex experiments causing the gap */
#primary, #primary.content-area{ display:block !important; flex:none !important; min-height:0 !important; }
.entry-content{ display:block !important; flex:none !important; }
.site-main{ margin:0 !important; padding:0 !important; }
#content.site-content{ display:block !important; }
.site{ display:block !important; min-height:0 !important; }

/* GAP = 67px inside #primary below .site-main. Kill it. */
#primary::before, #primary::after,
#content::before, #content::after,
.site-main::before, .site-main::after,
.col-full::after{ display:none !important; content:none !important; }
#primary, #content.site-content{ min-height:0 !important; height:auto !important; padding-bottom:0 !important; }
.site-main{ min-height:0 !important; height:auto !important; padding-bottom:0 !important; margin-bottom:0 !important; }
.gtc-footer{ margin-top:-67px !important; position:relative; z-index:11; }

/* #primary is floated by Storefront (2-col layout) — unfloat it, full width */
#primary.content-area,
#primary{ float:none !important; width:100% !important; }

/* fisheye tucks UNDER rail (rail above lens) */
.gtc-rail{ position:relative !important; z-index:20 !important; background:#fff !important; }
.gtc-store__head{ position:relative !important; z-index:20 !important; }
.gridlens{ z-index:5 !important; }

/* coherent z-index stack: header(100) > rail(30) > store-head(30) > lens(5) > grid(1) */
.gtc-header{ position:relative !important; z-index:100 !important; background:#0e0e11 !important; }
.gtc-rail{ z-index:30 !important; background:#fff !important; }
.gtc-store__head{ z-index:30 !important; }
.gtc-gridwrap{ position:relative !important; z-index:1 !important; }
.gridlens{ z-index:5 !important; }
.gtc-store__main{ position:relative !important; z-index:1 !important; }

/* rail MUST cover lens: rail in its own high stacking context, main below */
.gtc-store{ position:relative !important; }
.gtc-store__main{ position:relative !important; z-index:1 !important; }
.gtc-rail{ position:absolute !important; z-index:50 !important; isolation:isolate !important; background:#fff !important; }
.gtc-store__main{ overflow:hidden !important; }

/* ---- focus rings: drop Storefront's purple outline (#7f54b3) ----
   Mouse/touch clicks get no ring; keyboard focus gets a subtle gold one. */
a:focus, button:focus, input:focus, textarea:focus, select:focus,
.gtc-card:focus, .brandcard:focus{ outline:none !important; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
.gtc-card:focus-visible, .brandcard:focus-visible{ outline:2px solid var(--gold) !important; outline-offset:3px; }

/* ========================================================
   RAIL BACK IN FLOW (2026-10-03)
   The absolute rail took its height from the brand grid, so with only a few brands it got
   squeezed and the footer rode up. As a grid column the rail sets its own height, the page
   is as tall as whichever column is longer, and the store fills at least one screen below
   the header (~131px: 104px logo + padding + border) so the footer stays at the bottom.
   ======================================================== */
.gtc-store .gtc-store__layout{
  display:grid !important; grid-template-columns:260px 1fr !important; align-items:stretch !important;
  min-height:calc(100vh - 131px);
}
.gtc-store .gtc-rail{
  position:relative !important; top:auto !important; bottom:auto !important; left:auto !important;
  width:auto !important; overflow:visible !important;
}
.gtc-store .gtc-store__main{ margin-left:0 !important; }

@media(max-width:820px){
  .gtc-store{ background:none !important; }
  .gtc-store .gtc-store__layout{ grid-template-columns:1fr !important; min-height:0; }
  .gtc-store .gtc-rail{ border-bottom:2px solid #111 !important; }
}