/* Shop styles (from templatefile) - clean start
   This CSS is the canonical template styling adapted to work with
   header-shop.php (parent theme). */

:root{
  /* Executive Support Media palette */
  --primary: #4CAEB1;
  --primary-600: #3D9EA2;
  --primary-700: #2F7C7F;
  --accent: #D4AF37;
  --danger: #EF4444;
  --warn: #F59E0B;
  --bg: #F6F8FC;
  --panel: #FFFFFF;
  --ink: #0F172A;
  --muted: #475569;
  --line: #E5E7EB;
  --radius: 14px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.45;
}
.container{max-width:1400px; margin:0 auto; padding:24px}

/* Header (compact) */
.site-header{position:relative; z-index:50; background:#fff; color:var(--ink); border-bottom:1px solid var(--line);} 
.site-header .wrap{display:flex; align-items:center; gap:12px; padding:10px 24px; max-width:1400px; margin:0 auto}
.logo{display:flex; align-items:center}
.logo img{height:34px; display:block}

/* More specific logo selector to beat generic theme rules that may target .logo img */
.site-header .logo img{
  height:48px !important; /* larger fixed height for shop header */
  max-height:48px !important;
  width:auto !important; /* preserve aspect ratio */
  max-width:none !important; /* prevent width-based scaling */
  display:block;
}

/* Ensure logo doesn't shrink in flex layout */
.site-header .wrap .logo{ flex:0 0 auto }

/* Primary nav */
.site-nav{margin-left:0}
.justify-content-center{justify-content:center}
.site-nav .nav.navbar-nav{display:flex; gap:18px; align-items:center; list-style:none; padding:0; margin:0}
.site-nav .nav-link, .site-nav .dropdown-item{ text-decoration:none; color:var(--ink); font-weight:700; display:block; padding:.5rem .75rem }
.site-nav .nav-link:hover, .site-nav .dropdown-item:hover{ color:var(--primary) }
.site-nav .dropdown{ position:relative }
.site-nav .dropdown > .dropdown-toggle::after{ content:'' }
.site-nav .dropdown-menu{ position:absolute; top:100%; left:0; min-width:260px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:.35rem; box-shadow:0 10px 20px rgba(0,0,0,.08); display:none; z-index:60; list-style:none; margin:0 }
/* SHOW submenu when parent has .open (all breakpoints) */
.site-nav .dropdown.open > .dropdown-menu,
.site-nav .dropdown.show > .dropdown-menu{ display:block }
.site-nav .nav.navbar-nav > ul{ display:flex; gap:18px; align-items:center; list-style:none; padding:0; margin:0; flex-wrap:wrap }
.site-nav .nav.navbar-nav > ul > li{ position:relative }
.site-nav .nav.navbar-nav > ul > li > a,
.site-nav .nav.navbar-nav > ul > li > .dropdown-item{ text-decoration:none; color:var(--ink); font-weight:700; display:block; padding:.5rem .75rem; white-space:nowrap }

/* If menu is very wide, allow horizontal scrolling on the nav container */
.site-nav{margin-left:0}

/* Show caret for WP menu items that have children */
.site-nav .nav.navbar-nav li.page_item_has_children > a::after,
.site-nav .nav.navbar-nav .menu-item-has-children > a::after,
.site-nav .dropdown > .dropdown-toggle::after{
  /* CSS caret using borders for precise sizing/alignment */
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: .35rem;
  vertical-align: middle;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--muted);
  transform: translateY(-1px);
}

/* WP menu compatibility: nested <ul class="children"> used for submenus */
.site-nav .nav.navbar-nav ul.children{ display:none; list-style:none; margin:0; padding:0 }
.site-nav .nav.navbar-nav li.page_item_has_children:hover > ul.children,
.site-nav .nav.navbar-nav li.page_item_has_children:focus-within > ul.children{
  display:block;
}

/* Style nested children as an absolute dropdown on desktop */
.site-nav .nav.navbar-nav ul.children{
  position:absolute; top:100%; left:0; min-width:220px; background:#fff; border:1px solid var(--line); border-radius:12px; z-index:65; box-shadow:0 10px 20px rgba(0,0,0,.08); padding:.35rem;
}
.site-nav .dropdown-menu > li{ list-style:none }
.site-nav .justify-content-center{justify-content:flex-start !important}

/* Header right cluster (menu + cart) */
.header-right{margin-left:auto; display:flex; align-items:center; gap:12px}
.header-actions{display:flex; align-items:center; gap:12px}
.header-actions .cart-link{position:relative; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border:2px solid var(--line); border-radius:12px; text-decoration:none; color:var(--ink); background:#fff}
.header-actions .cart-link:hover{border-color:var(--primary)}
.cart-icon-nav{ position:relative }
.bi.bi-cart3::before{ content:'🛒' }
.cart-count-badge{ position:absolute; top:-6px; right:-8px; background:var(--primary); color:#fff; border-radius:999px; font-size:.7rem; line-height:1; padding:.25rem .4rem; border:2px solid #fff }

.nav-toggle{margin-left:12px; display:none; appearance:none; border:1px solid var(--line); background:#fff; padding:.4rem .6rem; border-radius:10px; font-weight:800}
/* Hide Close button by default (desktop) */
.nav-close{display:none} 
@media (min-width:901px){
  /* also open on hover for desktop */
  .site-nav .dropdown:hover > .dropdown-menu{ display:block }
}

/* Stronger desktop rules to override theme/global styles that may force vertical layout
   These target the header-shop structure specifically and apply only on desktop. */
@media (min-width:901px){
  .site-header .wrap .header-right .site-nav > ul.nav.navbar-nav,
  .site-header .wrap .header-right .site-nav .nav.navbar-nav{
    display:flex !important;
    flex-direction:row !important;
    gap:18px !important;
    align-items:center !important;
    padding:0 !important;
    margin:0 !important;
    white-space:nowrap !important;
    /* Prevent the menu from wrapping onto multiple lines on desktop */
    flex-wrap:nowrap !important;
  }

  /* ensure li positioning so absolute submenus align correctly */
  .site-header .wrap .header-right .site-nav .nav.navbar-nav > li{ position:relative !important }

  /* Slightly tighter padding for desktop anchors to help avoid wrapping when space is tight */
  .site-header .wrap .header-right .site-nav .nav.navbar-nav > li > a{ padding:.45rem .6rem !important }

  /* Show WP nested children or dropdown-menu on hover */
  .site-header .wrap .header-right .site-nav .nav.navbar-nav > li:hover > ul.children,
  .site-header .wrap .header-right .site-nav .nav.navbar-nav > li:hover > .dropdown-menu,
  .site-header .wrap .header-right .site-nav .nav.navbar-nav > li:focus-within > ul.children,
  .site-header .wrap .header-right .site-nav .nav.navbar-nav > li:focus-within > .dropdown-menu{
    display:block !important;
  }

  /* Allow JS to force-open a submenu so we can measure and align it correctly */
  .site-header .wrap .header-right .site-nav .nav.navbar-nav li.force-open > ul.children,
  .site-header .wrap .header-right .site-nav .nav.navbar-nav li.force-open > .dropdown-menu{ display:block !important }

  /* When a submenu needs to be aligned to the right to avoid viewport overflow */
  .site-header .wrap .header-right .site-nav .nav.navbar-nav li > ul.children.align-right,
  .site-header .wrap .header-right .site-nav .nav.navbar-nav li > .dropdown-menu.align-right{ left:auto !important; right:0 !important }

  /* Position nested children as dropdowns on desktop */
  .site-header .wrap .header-right .site-nav .nav.navbar-nav ul.children{
    position:absolute !important; top:100% !important; left:0 !important; min-width:220px !important;
    background:#fff !important; border:1px solid var(--line) !important; border-radius:12px !important;
    z-index:80 !important; box-shadow:0 10px 20px rgba(0,0,0,.08) !important; padding:.35rem !important;
  }
  /* ensure the nav container doesn't create scrollbars for desktop dropdowns */
  .site-header .wrap .header-right .site-nav{ overflow: visible !important }
  .site-header .wrap .header-right .site-nav .nav.navbar-nav ul.children{ overflow: visible !important }
}
@media (max-width:900px){
  .nav-toggle{display:inline-block}
  /* Full-screen, scrollable mobile menu overlay */
  .site-nav{position:fixed; top:0; left:0; right:0; bottom:0; background:#fff; transform:translateY(-120%); transition:transform .2s ease; z-index:70; overflow-y:auto; overflow-x:auto; -webkit-overflow-scrolling:touch; border-bottom:0}
  .site-nav.open{transform:translateY(0)}
  .site-nav .nav.navbar-nav{flex-direction:column; align-items:flex-start; padding:16px 20px; gap:12px}
  .site-nav .nav.navbar-nav > ul{ flex-direction:column; align-items:flex-start; padding:0; gap:12px }
  .site-nav .nav.navbar-nav ul.children{ position:static; border:0; box-shadow:none; padding:0 0 8px 12px; display:none }
  .site-nav .nav.navbar-nav li.page_item_has_children.open > ul.children,
  .site-nav .nav.navbar-nav li.page_item_has_children.show > ul.children{ display:block }
  /* mobile submenu inline */
  .site-nav .dropdown-menu{ position:static; border:0; box-shadow:none; padding:0 0 8px 12px; border-radius:0; list-style:none; margin:0 }
  /* touch targets */
  .site-nav .dropdown-item, .site-nav .nav-link{ padding:.75rem .75rem }
  /* close button inside overlay */
  .site-nav.open .nav-close{display:block; margin:12px 16px; align-self:flex-end; appearance:none; border:1px solid var(--line); background:#fff; border-radius:10px; padding:.45rem .7rem; font-weight:800}
}

/* Breadcrumb + titles */
.breadcrumb{color:var(--muted); font-size:.9rem; margin-top:10px}
.breadcrumb a{color:inherit; text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline}
h1{font-size:clamp(1.4rem, 2vw + 1rem, 2.2rem); margin:.4rem 0 .2rem}
.lede{color:var(--muted); margin:0 0 8px}
.skip-link{margin:.25rem 0 1rem}
.skip-link a{display:inline-block; font-weight:700; text-decoration:none; border:2px dashed var(--primary); color:var(--primary); padding:.4rem .65rem; border-radius:10px}
.skip-link a:hover{background:var(--primary); color:#fff}

/* ----------- Filters / sort ----------- */
.filters{position:static; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; box-shadow:0 6px 18px rgba(27,42,78,.08); margin-top:8px;}
.filters label{font-size:.85rem; color:var(--muted); margin-right:4px}
.chip{appearance:none; border:2px solid var(--primary); background:#fff; color:var(--primary); padding:.5rem .75rem; border-radius:999px; cursor:pointer; font-weight:700; transition:all .15s ease}
.chip:hover{background:var(--primary); color:#fff}
.chip:focus{outline:3px solid rgba(212,175,55,.35); outline-offset:2px}
.chip::after{content:"▾"; margin-left:.5rem; opacity:.7}

/* Chip dropdown: make dropdowns overlay and prevent chips shifting when label changes */
.chip-dropdown{position:relative; display:inline-block}
.chip-dropdown .chip{display:inline-flex; align-items:center; gap:.45rem; min-width:120px; max-width:280px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chip-dropdown .chip .chip-label{display:inline-block; max-width:180px; overflow:hidden; text-overflow:ellipsis; vertical-align:middle}
.chip-options{position:absolute; left:0; top:calc(100% + 8px); min-width:200px; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 10px 30px rgba(2,6,23,.12); list-style:none !important; margin:0; padding:6px 0; z-index:9999}

/* If dropdown would overflow to the right, align it to the right edge of the parent */
.chip-dropdown.align-right .chip-options{ left:auto; right:0; }
.chip-options li.chip-option{display:block; padding:.45rem .8rem; cursor:pointer; margin:0}
.chip-options li.chip-option:hover, .chip-options li.chip-option:focus{background:var(--primary); color:#fff}
.chip-dropdown .chip-options[hidden]{display:none}
.chip-dropdown.open .chip-options{display:block}

/* Mobile filters toggle & sheet */
.filters-toggle{display:none; margin:.25rem 0; font-weight:800; border:2px solid var(--primary); background:#fff; color:var(--primary); border-radius:999px; padding:.5rem .85rem}
.filters-toggle:focus{outline:3px solid rgba(76,174,177,.35); outline-offset:2px}
.filters-head{display:none}
@media (max-width:900px){
  .filters-toggle{display:inline-flex; align-items:center; gap:.4rem}
  .filters{position:fixed; left:0; right:0; bottom:0; background:#fff; transform:translateY(110%); transition:transform .25s ease; max-height:70vh; overflow-y:auto; border-top-left-radius:14px; border-top-right-radius:14px; padding:14px 16px; z-index:90}
  .filters.open{transform:translateY(0)}
  .filters-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
  .filters-close{appearance:none; border:1px solid var(--line); background:#fff; border-radius:10px; padding:.4rem .6rem; font-weight:800}
  .filters-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; z-index:80}

  /* Chip dropdown styling */
  .chip-dropdown{position:relative}
  .chip-dropdown .chip{display:inline-flex; align-items:center; gap:.45rem}
  .chip-options{position:absolute; left:0; top:calc(100% + 8px); min-width:180px; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 10px 30px rgba(2,6,23,.12); list-style:none; margin:0; padding:6px 0; z-index:9999}
  .chip-options li.chip-option{padding:.45rem .8rem; cursor:pointer}
  .chip-options li.chip-option:hover, .chip-options li.chip-option:focus{background:var(--primary); color:#fff}
  .chip-dropdown .chip-options[hidden]{display:none}
  .chip-dropdown.open .chip-options{display:block}
  .filters-backdrop.show{display:block}
}

.sort{margin-left:auto}
@media (max-width:720px){ .sort{margin-left:0; width:100%}}

/* Product grid */
#catalog{position:relative}
.grid{display:grid; gap:16px; margin:16px 0 24px; grid-template-columns: repeat(2, 1fr);} 
@media (min-width: 640px){ .grid{grid-template-columns: repeat(3, 1fr);} }
@media (min-width: 1024px){ .grid{grid-template-columns: repeat(4, 1fr);} }
@media (min-width: 1440px){ .grid{grid-template-columns: repeat(5, 1fr);} }
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; position:relative}
.thumb{position:relative; aspect-ratio:1/1; background:linear-gradient(135deg, rgba(76,174,177,.15), rgba(76,174,177,.05)); border-bottom:1px solid var(--line)}
.thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} 
.banner{position:absolute; top:0; left:0; right:0; padding:10px 12px; font-weight:900; text-transform:uppercase; text-align:center; font-size:.85rem; letter-spacing:.04em; z-index:2; box-shadow:0 2px 0 rgba(0,0,0,.06); border-bottom-left-radius:8px; border-bottom-right-radius:8px}
.banner.sold{background:var(--danger); color:#fff}
.banner.early{background:var(--accent); color:#111}
.banner.low{background:var(--warn); color:#111}
.banner.last{background:#C2410C;color:#fff;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(194,65,12,.45);}70%{box-shadow:0 0 0 12px rgba(194,65,12,0);}100%{box-shadow:0 0 0 0 rgba(194,65,12,0);} }
.card.sold .thumb::after{content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(239,68,68,.2), rgba(0,0,0,0) 60%);} 
.card-body{padding:14px}
.meta{font-size:.9rem; color:var(--muted);}
.meta strong{color:var(--ink)}
.price{margin:.5rem 0; font-weight:800; color:var(--primary)}
.status{display:inline-block;margin-top:.25rem;font-weight:800;font-size:.75rem;padding:.25rem .5rem;border-radius:999px;background:rgba(245,158,11,.12);color:#92400E;border:1px solid rgba(245,158,11,.35);} 
.btn{display:inline-block; text-decoration:none; background:var(--primary); color:#fff; padding:.6rem .9rem; border-radius:10px; font-weight:800; letter-spacing:.2px; box-shadow:0 2px 0 var(--primary-700)}
.btn:hover{background:var(--primary-600)}
.btn:focus{outline:3px solid rgba(76,174,177,.45); outline-offset:2px}
.btn.outline{background:#fff;color:var(--primary);border:2px solid var(--primary);box-shadow:none}
.btn.outline:hover{background:var(--primary);color:#fff}
.btn.disabled{background:#CBD5E1;color:#fff;cursor:not-allowed;box-shadow:none;pointer-events:none}

/* Load more */
.load-more{display:flex; justify-content:center; padding:8px 0 24px}
.load-more button{appearance:none; border:1px solid var(--line); background:var(--panel); border-radius:12px; padding:.65rem 1rem; font-weight:700; cursor:pointer}

/* Full description (below grid) */
details.description{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px;}
details.description > summary{list-style:none; cursor:pointer; font-weight:800}
details.description > summary::marker{display:none}
details.description[open] > summary{margin-bottom:.5rem}
.desc-body{color:#374151}

/* Subscriber hint under price */
.sub-hint{display:block; margin-top:6px; color:var(--muted); font-size:.85rem}
.sub-hint a{color:var(--primary); font-weight:700}
.sub-hint a:hover{color:var(--primary-600); text-decoration:underline}
.save a{color:var(--primary); font-weight:700}
.save a:hover{color:var(--primary-600); text-decoration:underline}
.save, .sub-hint { display:inline; }

/* Price sizing and labels */
.price { margin-top: .4rem; }
.price .price-label { font-size: .85rem; color:var(--muted); margin-bottom:4px }
.price .amount { font-size:1.2rem; font-weight:900; color:var(--primary); }

/* Prominent non-subscriber price: center and enlarge the amount */
.price--non-subscriber { text-align: center; }
.price--non-subscriber .price-label { display:block; font-size: .95rem; color:var(--muted); margin-bottom:6px }
.price--non-subscriber .amount { font-size:2.25rem; line-height:1; font-weight:900; color:var(--primary); }
@media (max-width:560px) {
  .price--non-subscriber .amount { font-size:1.6rem; }
}

/* Savings hint */
.save{margin-top:6px; color:var(--primary); font-weight:800}
.save a{color:var(--primary); font-weight:700}

/* Make the summary show a clear "click to read more" affordance */
details.description > summary{display:flex; align-items:center; justify-content:space-between; gap:12px}
details.description > summary .summary-title{font-weight:800}
details.description > summary .summary-hint{color:var(--muted); font-weight:700; font-size:0.95rem}
details.description > summary .summary-hint::after{content:'▾'; display:inline-block; margin-left:.4rem; transition:transform .18s ease}
details.description[open] > summary .summary-hint::after{transform:rotate(180deg)}

/* FAQ */
.faq{margin-top:18px}
.faq h3{margin:0 0 .25rem}
.qa{border:1px dashed var(--primary); border-radius:12px; padding:10px 12px; margin:8px 0; background:#fff}
.qa summary{font-weight:700; cursor:pointer}
.qa p{margin:.4rem 0 0}

.to-top{display:block; text-align:center; margin:18px auto 0; color:var(--muted)}

/* Accessibility: open dropdowns on keyboard focus (adds to desktop hover rule) */
.site-nav .dropdown:focus-within > .dropdown-menu{ display:block }

/* End of shop.css */