/* =========================================
   INDEX2 – BASE (GLOBAL) + DESKTOP BREAKPOINTS
   Covers:
   - DESKTOP (TALL) 1701–2200px, aspect <= 2/1
   - DESKTOP (SHORT) 1701–2200px, aspect >= 2/1
   ========================================= */

/* ===== Small “NEW” label ===== */
.nav-new{
  
  font-weight:700;
  margin-left:4px;
  letter-spacing:0.03em;
  color: #D8D2C2;      /* warm light grey (readable, calm, premium) */
  font-style: italic;  /* subtle status cue */
}

/* ==========================================================
   GLOBAL RESET (Meyer)
   ========================================================== */
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{ display:block; }
html, body{ height:100%; }
body{ line-height:1; }
ol, ul{ list-style:none; }
blockquote, q{ quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after{ content:''; content:none; }
table{ border-collapse:collapse; border-spacing:0; }

/* Link hygiene */
a{ text-decoration:none; color:inherit; }
a:visited{ color:inherit; }

/* Prevent iPad / iOS text auto-resizing after app switch */
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}



  /* =========================
     HEADER GRID MAP (BASE)
     Make tweaks here first.
     ========================= */
  --hp-title-cols: 1 / 15;
  --hp-blurb-cols: 10 / 25; /* base is mostly overridden in desktop media anyway */
  --hp-greet-cols: 21 / 28;
  --hp-orders-cols: 30 / 35;
  --hp-acct-cols: 37 / 42;
  --hp-log-cols: 44 / 49;
  --hp-create-cols: 51 / 56;
  --hp-basket-cols: 58 / 63;
  --hp-search-cols: 66 / 98;

  /* Logo size lock (your current values) */
  --hp-logo-h: clamp(38px, 8vh, 92px);
}

/* ==========================================================
   ALBUM-VIBE GLOBAL AESTHETICS (SAFE)
   ========================================================== */
html.ios-repaint body { filter: blur(0); }

/* Page background + base font */
body{
  background-color:#ECEBE7;
  font-family:Georgia, "Times New Roman", serif;
}

/* Keep UI bits crisp */
ul,
.HP_header_logCreateBasket,
.HP_header_search,
.HP_header_greeting,
.HP_header_greeting_hidden,
.rotate-warning-box{
  font-family:Arial, Helvetica, sans-serif;
}

/* Category titles */
.HP_mainCol3_categoryNames{
  font-family:"Palatino Linotype", Palatino, Georgia, serif;
  letter-spacing:0.02em;
}

/* Global base */
p{
  display:flex;
  text-align:center;
  justify-content:center;
}
img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Global: never show Account Settings when logged out */
.HP_header_account_settings_hidden{ display:none !important; }

/* ==========================================================
   GLOBAL LAYOUT / COMPONENTS
   ========================================================== */
ul{
  font-weight:900;
  margin:1.2vw;
}

/* Main page grid */
.HP_wrapper{
  display:grid;
  grid-template-columns:repeat(100, 1fr);
  grid-gap:0.3vw;
  height:100vh;
  min-height:100vh !important;
  height:auto !important;
}

/* ==========================================================
   HEADER (BASE)
   ========================================================== */
.HP_header_wrapper{
  grid-column:1/101;
  display:grid;
  grid-template-columns:repeat(100, 1fr);
  background-color:#385F5F;
  align-items:center;
  padding-top: 0.6vh;
  padding-bottom: 0.6vh;

  /* Hard-lock header items to row 1 (prevents the “lower line” row) */
  grid-template-rows: 1fr;
  grid-auto-rows: 1fr;
}
.HP_header_wrapper > *{
  grid-row: 1 !important;
}

/* Header title/logo block */
.HP_header_title{
  grid-column: var(--hp-title-cols) !important;
  padding-left:1.2vw;
  width:auto;
  display:flex;
  align-items:center;
}

/* Logo size locks */
#logo,
.HP_header_title img{
  height: var(--hp-logo-h);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Header buttons base */
.HP_header_logCreateBasket{
  font-weight:600;
  border-style:solid;
  width:6vw;
  height:3.5vh;

  display:flex;
  flex-wrap:wrap;
  text-align:center;
  justify-content:center;
  align-items:center;

  border-width:0.2vw;
  border-radius:1.5vw;

  padding:1vh 0;
  background-color:#373636;

  transition:all linear 80ms;
  box-shadow:0.6vh 0.6vh 0.4vh rgba(0,0,0,0.2);
}
/* Vertically centre text in header buttons (global fix) */
.HP_header_logCreateBasket{
  display:flex;
  align-items:center;
  justify-content:center;
}
.HP_header_logCreateBasket:active{
  -webkit-transform:translateY(1px);
  transform:translate(1px, 1px);
}

/* Header items (positions shared) */
.HP_header_greeting{ grid-column: var(--hp-greet-cols); }
.HP_header_view_orders{ grid-column: var(--hp-orders-cols); }
.HP_header_account_settings{ grid-column: var(--hp-acct-cols); }

.HP_header_log_logged_in{ grid-column: var(--hp-log-cols); }
.HP_header_log_logged_out{ grid-column: var(--hp-log-cols); }

.HP_header_create{ grid-column: var(--hp-create-cols); }
.HP_header_basket{ grid-column: var(--hp-basket-cols); }

/* Individual header styling you already had */
.HP_header_log_logged_in{
  color:palegoldenrod;
  border-color:palegoldenrod;
}
.HP_header_log_logged_out{
  color:#385F5F;
  border-color:#385F5F;
  background-color:#385F5F;
}
.HP_header_create{
  color:skyblue;
  border-color:skyblue;
  text-align:center;
  line-height:1.8vh;
}
.HP_header_basket{
  color:white;
  border-color:white;
  margin-right:2vw;
  text-align:center;
  line-height:1.8vh;
}

/* Header greeting / account buttons */
.HP_header_greeting{
  font-weight:600;
  width:12vw;
  height:3.5vh;

  display:flex;
  flex-wrap:wrap;
  text-align:center;
  justify-content:center;
  align-items:center;

  border-style:solid;
  border-width:0.2vw;
  border-radius:1.5vw;

  padding:1vh 0;
  background-color:#373636;

  color:palegoldenrod;
  border-color:palegoldenrod;

  box-shadow:0 0 0 rgba(0,0,0,0);
  cursor:default;
}
.HP_header_greeting:active{
  -webkit-transform:translateY(0);
  transform:translate(0,0);
}

/* Logged-out greeting */
.HP_header_greeting_hidden{
  grid-column: var(--hp-greet-cols);
  font-weight:600;
  width:12vw;

  border-style:solid;
  border-width:0.2vw;
  border-radius:1.5vw;

  padding:0.8vh;
  background-color:#373636;

  color:white;
  border-color:white;

  cursor:pointer;
  text-align:center;
}

/* View orders hidden */
.HP_header_view_orders_hidden{
  grid-column: var(--hp-orders-cols);
  color:white;
  border-color:white;
  background-color:#373636;
  cursor:pointer;
}
.HP_header_view_orders_hidden:link,
.HP_header_view_orders_hidden:visited,
.HP_header_view_orders_hidden:hover,
.HP_header_view_orders_hidden:active{
  color:white;
}

/* Account settings (still defined for completeness; hidden globally above) */
.HP_header_account_settings{
  color:palegoldenrod;
  border-color:palegoldenrod;
  text-align:center;
  line-height:1.8vh;
}
.HP_header_account_settings_hidden{
  grid-column: var(--hp-acct-cols);
  color:#385F5F;
  border-color:#385F5F;
  background-color:#385F5F;
  cursor:default;
}
.HP_header_account_settings_hidden:hover{
  color:#385F5F;
  border-color:#385F5F;
  background-color:#385F5F;
}

/* Kill shadows on the hidden header buttons */
.HP_header_greeting_hidden,
.HP_header_view_orders_hidden,
.HP_header_account_settings_hidden{
  box-shadow:0 0 0 rgba(0,0,0,0);
}
.HP_header_greeting_hidden:hover,
.HP_header_view_orders_hidden:hover,
.HP_header_account_settings_hidden:hover{
  box-shadow:0 0 0 rgba(0,0,0,0);
}

/* Search */
.HP_header_search_box{
  grid-column: var(--hp-search-cols);
  display:flex;
  justify-content:flex-end;
}
.HP_header_search{
  width:14vw;
  height:2vh;
  font-weight:600;
  border:white 0.15vw solid;
  border-radius:0.5vw;
  padding:0.5vw;
  padding-left:1vw;
}
.HP_header_search_button{
  border:none;
  color:#385F5F;
  background-color:#385F5F;
}

/* ==========================================================
   LEFT MENUS + MAIN GRID
   ========================================================== */
.HP_mainCol1_menuWrapper{
  grid-column:1/13;
  font-weight:bold;
  background-color:#385F5F;
  color:white;
  border-color:#385F5F;
  border-width:0.6vw;
  border-top-right-radius:0.3vw;
  border-bottom-right-radius:0.3vw;
}
.HP_mainCol1_menuWrapper li a{ display:block; }

.HP_mainCol1_submenuWrapper{
  margin-right:0.5vw;
  background-color:white;
  border-width:0.1vw;
  border-radius:0.3vw;
  position:relative;
}
.HP_mainCol1_submenu{
  padding:0.8vh 0;
  line-height:2.5vh;
}

.HP_mainCol2_menuWrapper{
  grid-column:13/25;
  font-weight:900;
  border-style:solid;
  border-color:#385F5F;
  border-width:0.6vw;
  border-radius:0.3vw;
}

/* Main pictures grid */
.HP_mainCol3_categoryPicturesWrapper{
  display:grid;
  grid-column:25/101;
}
.HP_mainCol3_categoryPictures{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  padding:1vw;
  padding-top:0;
  padding-bottom:0;
  row-gap:0.5vw;
  column-gap:1vw;
  margin-right:0.3vw;
  align-items:stretch;
  margin-top:1vh;
  margin-bottom:1vh;
}
.HP_mainCol3_categoryPictureLink{
  border:slategray 0.15vw solid;
  border-radius:0.3vw;
  padding:0.2vw;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-evenly;
  color:black;
}

/* Common colour hovers */
.HP_main_RED{ color:brown; }
.HP_main_BLUE{ color:darkblue; }
.HP_main_GREEN{ color:green; }
.HP_main_LILAC{ color:purple; }

.HP_main_RED:hover,
.HP_main_BLUE:hover,
.HP_main_GREEN:hover,
.HP_main_LILAC:hover{
  color:darkgreen;
  text-decoration:underline;
}

/* li > a structure fix */
.HP_main_WHITE a{ color:white; }
.HP_main_WHITE:hover a{ color:lawngreen; text-decoration:underline; }

.HP_main_SUB1{ color:yellow; }
.HP_main_SUB1:hover{ color:lawngreen; text-decoration:underline; }

.HP_main_BLACK{ color:black; }
.HP_main_BLACK:hover{ color:darkgreen; text-decoration:underline; }

.HP_main_MULTI:hover{ color:darkgreen; text-decoration:underline; }

.HP_main_BLACK2{
  font-weight:900;
  text-decoration:underline;
  padding-bottom:1vh;
}

/* Misc */
.small_break_lhs{ height:0.8vh; }

.wmk a{
  color:#FFFF80 !important;
  font-size:1rem !important;
}
.wmk:hover a{
  color:lawngreen !important;
  text-decoration:underline;
}

/* Tooltip */
.tooltip{
  position:relative;
  display:inline-block;
  text-decoration:none;
}
.tooltiptext{
  visibility:hidden;
  display:inline-block;
  width:max-content;
  max-width:1200px;

  background-color:#333;
  color:#fff;
  text-align:left;
  font-size:14px;
  padding:6px 12px;
  border-radius:6px;

  position:absolute;
  top:50%;
  left:105%;
  transform:translateY(-50%);

  z-index:9999;

  opacity:0;
  transition:opacity 0.3s;

  white-space:nowrap;
}
.tooltip:hover .tooltiptext{
  visibility:visible;
  opacity:1;
}

/* Footer bits that might still appear in the left menu */
.HP_mainCol1_menuWrapper .HP_footer_copy{
  position:static;
  right:auto;
}
.HP_mainCol1_menuWrapper,
.HP_mainCol2_menuWrapper{
  margin-bottom:0.6vh;
}
.HP_footer{ font-size:1.3vw !important; }
.HP_footer_privacy,
.HP_footer_terms{ font-size:1vw !important; }
.HP_footer_copy{ font-size:0.8vw !important; }
.terms{ font-size:0.8vw !important; }

/* ==========================================================
   ALBUM THEME OVERRIDE (COLOUR-ONLY, SAFE)
   ========================================================== */
body{
  background-color:var(--paper-2) !important;
  color:var(--ink) !important;
}

.HP_header_wrapper{ background-color:var(--album-green) !important; }

.HP_mainCol1_menuWrapper{
  background-color:var(--album-green) !important;
  border-color:var(--album-green) !important;
}

.HP_mainCol1_submenuWrapper,
.HP_mainCol2_menuWrapper{
  background-color:var(--paper) !important;
  border-color:rgba(47,79,79,0.45) !important;
}

.HP_mainCol3_categoryPictureLink{
  background-color:var(--paper) !important;
  border-color:rgba(47,79,79,0.35) !important;
  color:var(--ink) !important;
}

/* Paper lift + micro-grain */
.HP_mainCol2_menuWrapper,
.HP_mainCol3_categoryPictureLink{
  background-color:#FBFAF7;
}
.HP_mainCol3_categoryPictureLink{ border-color:#9FA6A0; }
.HP_mainCol3_categoryPictureLink{
  background-image:linear-gradient(0deg, rgba(0,0,0,0.02), rgba(0,0,0,0.02));
}

.HP_mainCol3_categoryPictureLink:hover{
  border-color:var(--album-green-mid) !important;
  color:var(--album-green-mid) !important;
  text-decoration:none !important;
}
.HP_mainCol3_categoryPictureLink:hover .HP_mainCol3_categoryNames{
  text-decoration:underline;
  text-underline-offset:3px;
}

.HP_header_logCreateBasket{
  background-color:#2B3434 !important;
  border-color:rgba(213,192,138,0.65) !important;
  color:#F6F3E8 !important;
}

.HP_header_greeting{
  background-color:#2B3434 !important;
  color:var(--brass) !important;
  border-color:rgba(213,192,138,0.70) !important;
}

.HP_header_greeting_hidden,
.HP_header_view_orders_hidden{
  background-color:#2B3434 !important;
  border-color:rgba(213,192,138,0.55) !important;
  color:#F6F3E8 !important;
}

.HP_header_logCreateBasket:hover,
.HP_header_greeting:hover,
.HP_header_view_orders_hidden:hover{
  color:var(--mint) !important;
  border-color:var(--mint-2) !important;
}

/* Make LOG IN hover match other header buttons */
.HP_header_log_logged_out:hover{
  color: var(--mint) !important;
  border-color: var(--mint-2) !important;
}

/* Force logged-in Log Out colour */
.HP_header_log_logged_in,
.HP_header_log_logged_in:link,
.HP_header_log_logged_in:visited,
.HP_header_log_logged_in:hover,
.HP_header_log_logged_in:active{
  color:palegoldenrod !important;
  border-color:palegoldenrod !important;
}

.HP_main_RED{ color:#8E3B3B !important; }
.HP_main_BLUE{ color:#203E70 !important; }
.HP_main_GREEN{ color:#2B6A54 !important; }
.HP_main_LILAC{ color:#5C4D7A !important; }

.HP_main_RED:hover,
.HP_main_BLUE:hover,
.HP_main_GREEN:hover,
.HP_main_LILAC:hover,
.HP_main_BLACK:hover,
.HP_main_MULTI:hover{
  color:var(--album-green-mid) !important;
  text-decoration:underline;
}

.HP_main_WHITE a{ color:#F6F3E8 !important; }
.HP_main_WHITE:hover a{ color:var(--mint) !important; }

.wmk a{ color:#F1E7A2 !important; }
.wmk:hover a{ color:var(--mint) !important; }

/* Footer tone */
.HP_footer{ background-color:var(--album-green-deep) !important; }
.HP_footer a{ opacity:0.85; }
.HP_footer a:hover{ opacity:1; text-decoration:underline; color:var(--mint) !important; }

/* ==========================================================
   CATEGORY CAPTIONS (GLOBAL FIX)
   ========================================================== */
.HP_mainCol3_categoryNames{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.15em;
  min-height:calc(2 * 1.15em);
  font-family:"Palatino Linotype", Palatino, Georgia, serif !important;
  letter-spacing:0.03em;
}

/* ==========================================================
   STAMP IMAGE MOUNT (TOP/BOTTOM ONLY – SAFE)
   ========================================================== */
.HP_mainCol3_categoryPictureLink img{
  display:block;
  background-color:#2B2A26;
  padding-top:0.9vh;
  padding-bottom:0.9vh;
  padding-left:0;
  padding-right:0;
  box-sizing:border-box;
  object-fit:contain;

  background-image:linear-gradient(to bottom, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(255,255,255,0.08);

  border-radius:12px;
}
.HP_mainCol3_categoryPictureLink:hover img{
  background-color:#1A1A1A;
}

/* INDEX2 – shadow only (no spacing / wrapping changes) */
.HP_mainCol3_categoryPictureLink{
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.08),
    0 6px 18px rgba(0,0,0,0.12);
  transition: box-shadow 0.25s ease;
}
.HP_mainCol3_categoryPictureLink:hover{
  box-shadow:
    0 3px 6px rgba(0,0,0,0.12),
    0 12px 28px rgba(0,0,0,0.14);
}

/* ==========================================================
   FIX LIGHT PATCH NEXT TO SEARCH BOX
   ========================================================== */
.HP_header_search_button{
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  margin:0 !important;
}
.HP_header_search_box{
  background:#2F4F4F !important;
}

/* Logged OUT: make Log In match other header buttons */
.HP_header_log_logged_out,
.HP_header_log_logged_out:link,
.HP_header_log_logged_out:visited,
.HP_header_log_logged_out:hover,
.HP_header_log_logged_out:active{
  background-color: #2B3434 !important;
  color: #F6F3E8 !important;
  border-color: rgba(213,192,138,0.65) !important;
}

  .HP_footer_copy{
      font-weight: normal !important;
      font-size: 0.85vh !important;
  }

/* ==========================================================
   DESKTOP (TALL)  (MateView)
   1701–2200px, aspect <= 2/1
   ========================================================== */
@media (min-width:1701px) and (max-width:2200px) and (max-aspect-ratio:2/1){

  ul{ font-size:0.8vw; line-height:2.8vh; }
  .HP_header_logCreateBasket{ font-size:0.9vw; }
  .HP_header_search{ font-size:1vw; }

  /* Header grid map for this breakpoint */
  :root{
    --hp-blurb-cols: 15 / 30;
  }

  .HP_header_blurb{
    grid-column: var(--hp-blurb-cols) !important;
    margin-left: 0 !important;
    width: auto !important;
    max-width: 100% !important;

    font-size:1vw !important;
    line-height:2vh !important;
    text-align:left !important;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    color:white;
  }

  .menu_list2{ font-size:0.8vw; line-height:3.1vh; }

  .HP_mainCol3_categoryNames{
    font-size:1.05vw;
    font-weight:750;
    text-align:center;
    margin-left:1vw;
    margin-right:1vw;
    position:relative;
    padding-top:0.5vh;
  }

  .BIGGER{ font-size:0.85vw; }
  .BIGGER2{ font-size:1vw; }
  .BIGGER3{ font-size:1vw; }

  .HP_main_BLACK2{ font-size:1.0vw; }

  .HP_header_greeting_hidden{
    display:flex;
    align-items:center;
    justify-content:center;
    height:43px;
    line-height:1.75vh;
  }

  .HP_header_view_orders_hidden{ line-height:1.75vh; }
}

/* ==========================================================
   DESKTOP (SHORT)  (Dell widescreen)
   1701–2200px, aspect >= 2/1
   ========================================================== */
@media (min-width:1701px) and (max-width:2200px) and (min-aspect-ratio:2/1){

  ul{ font-size:0.8vw; line-height:2.8vh; }
  .HP_header_logCreateBasket{ font-size:0.9vw; }
  .HP_header_search{ font-size:1vw; }

  .HP_header_blurb{
    grid-column:7/18;
    width:22vw;
    font-size:0.8vw !important;
    line-height:1.9vh !important;
    text-align:left !important;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    display:block;
    justify-self:start;
    margin-left:-1.5vw;
    color:white;
  }

  .menu_list2{ font-size:0.8vw; line-height:3vh; }

  .HP_mainCol3_categoryNames{
    font-size:0.9vw;
    font-weight:750;
    text-align:center;
    margin-left:1vw;
    margin-right:1vw;
    position:relative;
    padding-top:0.5vh;
  }

  .BIGGER{ font-size:0.85vw; }
  .BIGGER2{ font-size:1vw; }
  .BIGGER3{ font-size:1vw; }

  .HP_main_BLACK2{ font-size:1.0vw; }

  .HP_header_greeting_hidden{
    display:block;
    height:auto;
    text-align:center;
    line-height:normal;
  }
  
  .HP_footer_copy{
      font-weight: normal !important;
      font-size: 1vh !important;
  }
  
}

/* Desktop short: stop blurb overlapping logo (your existing patch) */
@media (min-width:1701px) and (max-width:2200px) and (min-aspect-ratio:2/1){
  .HP_header_blurb{
    margin-left:0 !important;
    grid-column:8/18 !important;
  }
}

/* Kill any rotate overlay/message on desktop */
@media (min-width:1100px){
  .rotate-message,
  .rotate-overlay,
  .rotate-warning{ display:none !important; }
  body::before,
  body::after{ content:none !important; display:none !important; }
}

/* =========================
   PHONE / TABLET PORTRAIT LOCK
   ========================= */
.rotate-warning{ display: none; }

@media (orientation: portrait) and (pointer: coarse){

  .rotate-warning{
    position: fixed;
    inset: 0;
    background-color: #2F4F4F;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
  }

  .rotate-warning-box{
    color: #F6F3E8;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    padding: 2rem;
    border: 2px solid rgba(213,192,138,0.65);
    border-radius: 14px;
    background-color: #2B3434;
    box-shadow: 0 10px 25px rgba(0,0,0,0.35);
    max-width: 520px;
  }

  body > *:not(.rotate-warning){
    display: none !important;
  }
  

}

/* =========================
   LAPTOP + PHONE LANDSCAPE
   ========================= */
@media
  ((min-width: 1101px) and (max-width: 1700px)),
  ((orientation: landscape) and (pointer: coarse) and (min-width: 640px)) {

  .HP_header_blurb{
    grid-column:7/26 !important;
    color:#F6F3E8 !important;
    font-size:0.85vw !important;
    line-height:2.1vh !important;
    margin:0 !important;
  }

  .HP_header_greeting,
  .HP_header_greeting_hidden{ grid-column:36/43 !important; }

  .HP_header_view_orders,
  .HP_header_view_orders_hidden{ grid-column:44/49 !important; }

  .HP_header_account_settings,
  .HP_header_account_settings_hidden{ grid-column:50/55 !important; }

  .HP_header_log_logged_in,
  .HP_header_log_logged_out{ grid-column:56/61 !important; }

  .HP_header_create{ grid-column:62/67 !important; }
  .HP_header_basket{ grid-column:68/74 !important; }
  .HP_header_search_box{ grid-column:78/99 !important; }

  .HP_header_greeting,
  .HP_header_greeting_hidden,
  .HP_header_view_orders,
  .HP_header_view_orders_hidden,
  .HP_header_account_settings,
  .HP_header_account_settings_hidden,
  .HP_header_log_logged_in,
  .HP_header_log_logged_out,
  .HP_header_create,
  .HP_header_basket{
    margin-right:0.6vw !important;
  }
  .HP_header_basket{ margin-right:0 !important; }

  .HP_header_logCreateBasket,
  .HP_header_logCreateBasket *{
    font-size:0.82vw !important;
    line-height:1.15 !important;
  }

  .HP_header_greeting_hidden,
  .HP_header_view_orders_hidden{ line-height:1.05 !important; }

  .HP_header_account_settings,
  .HP_header_account_settings_hidden,
  .HP_header_create,
  .HP_header_basket{ line-height:1.05 !important; }

  .HP_mainCol1_menuWrapper li.HP_main_WHITE.total,
  .HP_mainCol1_menuWrapper li.HP_main_WHITE.total > *{
    font-size:0.72vw !important;
    line-height:1.25 !important;
  }

  .HP_mainCol1_menuWrapper li.HP_main_WHITE.BIGGER2:not(.wmk):not(.terms),
  .HP_mainCol1_menuWrapper li.HP_main_WHITE.BIGGER2:not(.wmk):not(.terms) > a{
    font-size:0.96vw !important;
    line-height:1.18 !important;
  }

  .HP_mainCol1_menuWrapper li.HP_main_WHITE.BIGGER2.wmk,
  .HP_mainCol1_menuWrapper li.HP_main_WHITE.BIGGER2.wmk > a{
    font-size:0.82vw !important;
    line-height:1.3 !important;
  }

  .HP_mainCol1_menuWrapper li.HP_main_WHITE.BIGGER2.terms,
  .HP_mainCol1_menuWrapper li.HP_main_WHITE.BIGGER2.terms > a{
    font-size:0.82vw !important;
    line-height:1.15 !important;
  }

  .HP_mainCol1_menuWrapper li.HP_main_WHITE.BIGGER3,
  .HP_mainCol1_menuWrapper li.HP_main_WHITE.BIGGER3 > a{
    font-size:0.82vw !important;
    line-height:1.22 !important;
  }

  .HP_mainCol1_menuWrapper a[href*="cat=king_george_5"],
  .HP_mainCol1_menuWrapper a[href*="cat=Australia"],
  .HP_mainCol1_menuWrapper a[href*="cat=other"]{
    display:inline-block !important;
    margin-top:1.2vh !important;
  }

  .HP_mainCol1_menuWrapper a[href*="cat=other"],
  .HP_mainCol1_menuWrapper a[href*="reviews.php"],
  .HP_mainCol1_menuWrapper a[href*="contact.php"],
  .HP_mainCol1_menuWrapper a[href*="links.php"]{
    display:inline-block !important;
    margin-bottom:1.6vh !important;
  }

  .HP_mainCol2_menuWrapper .menu_list2{
    font-size:0.78vw !important;
    line-height:1.8 !important;
  }

  .HP_mainCol3_categoryNames{
    padding:0 0.6em !important;
    box-sizing:border-box !important;
  }
}

/* =========================
   TABLET LANDSCAPE (<=1100px, coarse pointer)
   Generic tablet layout (Android + iPad)
   Uses normal vh (portable).
   ========================= */
@media (max-width:1100px) and (orientation:landscape) and (pointer:coarse){

  ul{
    margin:1.6vw !important;
    font-size:1.25vw !important;
    line-height:2.4vh !important; /* was var(--vvh) */
  }

  .HP_header_title{
    grid-column:1/10 !important;
    width:auto !important;
    display:flex !important;
    align-items:center !important;
  }

  #logo,
  .HP_header_title img{
    height:7vh !important; /* was var(--vvh) */
    width:auto !important;
    max-width:100% !important;
    object-fit:contain !important;
  }

  .HP_header_blurb{
    grid-column:10/30 !important;
    font-size:1.35vw !important;
    line-height:2.1vh !important; /* was var(--vvh) */
    margin:0 !important;
    text-align:left !important;
    color:#F6F3E8 !important;
  }

  .HP_header_greeting,
  .HP_header_greeting_hidden{ grid-column:33/43 !important; }

  .HP_header_view_orders,
  .HP_header_view_orders_hidden{ grid-column:44/51 !important; }

  .HP_header_account_settings,
  .HP_header_account_settings_hidden{ grid-column:52/59 !important; }

  .HP_header_log_logged_in,
  .HP_header_log_logged_out{ grid-column:60/67 !important; }

  .HP_header_create{ grid-column:68/75 !important; }
  .HP_header_basket{ grid-column:76/83 !important; }
  .HP_header_search_box{ grid-column:94/100 !important; }

  .HP_header_search{
    width:12vw !important;
    height:2.6vh !important;     /* was var(--vvh) */
    font-size:1.35vw !important;
  }

  .HP_header_logCreateBasket,
  .HP_header_logCreateBasket *{
    font-size:1.05vw !important;
    line-height:1.15 !important;
  }

  .HP_header_greeting_hidden,
  .HP_header_view_orders_hidden{ line-height:1.05 !important; }

  .HP_header_logCreateBasket{
    height:3.8vh !important;     /* was var(--vvh) */
    padding:1.2vh 0 !important;  /* was var(--vvh) */
  }

  .HP_mainCol1_menuWrapper{ grid-column:1/19 !important; }
  .HP_mainCol2_menuWrapper{ grid-column:19/35 !important; }
  .HP_mainCol3_categoryPicturesWrapper{ grid-column:35/101 !important; }

  .HP_mainCol2_menuWrapper .menu_list2{
    font-size:1.2vw !important;
    line-height:1.7 !important;
  }

  .HP_mainCol3_categoryPictures{
    grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
    align-items:stretch !important;
    column-gap:1.4vw !important;
    row-gap:1.1vw !important;
    padding:1.2vw !important;
  }

  .HP_mainCol3_categoryPictureLink p{ display:block !important; }

  .HP_mainCol3_categoryPictureLink{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
  }

  .HP_mainCol3_categoryPictureLink p:first-child{
    height:13.5vh !important; /* was var(--vvh) */
    width:100% !important;
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .HP_mainCol3_categoryPictureLink p:last-child{
    flex:1 1 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .HP_mainCol3_categoryPictureLink img{
    height:100% !important;
    width:100% !important;
    object-fit:contain !important;
  }

  .HP_mainCol3_categoryNames{
    width:100% !important;
    margin:0 !important;
    padding:0 0.4em !important;
    text-align:center !important;
    font-size:1.25vw !important;
    line-height:1.15 !important;
    letter-spacing:0.02em !important;

    padding-left:0.3em !important;
    padding-right:0.3em !important;
    box-sizing:border-box;
    transform:translateY(0.15em);
  }

  .HP_mainCol1_menuWrapper li.HP_main_WHITE.BIGGER2:not(.wmk):not(.terms),
  .HP_mainCol1_menuWrapper li.HP_main_WHITE.BIGGER2:not(.wmk):not(.terms) > a{
    font-size:1.5vw !important;
    line-height:0.9 !important;
  }

  .HP_mainCol1_menuWrapper li.HP_main_WHITE.BIGGER2.wmk,
  .HP_mainCol1_menuWrapper li.HP_main_WHITE.BIGGER2.wmk > a{
    font-size:1.25vw !important;
    line-height:1.3 !important;
  }

  /* terms only */
  .HP_mainCol1_menuWrapper li.HP_main_WHITE.BIGGER2.terms,
  .HP_mainCol1_menuWrapper li.HP_main_WHITE.BIGGER2.terms > a{
    font-size:1.25vw !important;
    line-height:1.25 !important;
  }

  /* footer separately */
  .HP_mainCol1_menuWrapper .HP_footer_copy{
    font-weight: normal !important;
    font-size: 0.75vw !important;
    line-height: 1.25 !important;
  }

  li.HP_main_WHITE.total{
    font-size:1.45vw !important;
    line-height:1.25 !important;
  }

  .HP_mainCol1_menuWrapper li.HP_main_WHITE.BIGGER3,
  .HP_mainCol1_menuWrapper li.HP_main_WHITE.BIGGER3 > a{
    font-size:1.25vw !important;
    line-height:1.3 !important;
  }

  .HP_mainCol1_menuWrapper ul > li.HP_main_WHITE.total{
    font-size: 1.2vw !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
  }
}


/* ==========================================================
   iOS/iPad fallback (IMPORTANT)
   ONLY applies when you add class "ios" to <html>.
   This swaps the fragile vh-based bits to --vvh.
   ========================================================== */
@media (max-width:1100px) and (orientation:landscape){

  html.ios, html.ios body{
    height: calc(var(--vvh, 1vh) * 100) !important;
    min-height: calc(var(--vvh, 1vh) * 100) !important;
  }

  html.ios .HP_wrapper{
    height: auto !important;
    min-height: calc(var(--vvh, 1vh) * 100) !important;
  }

  html.ios .HP_header_logCreateBasket{
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2) !important;
  }

  /* swap any height-ish bits that were vh in the generic tablet block */
  html.ios ul{
    line-height: calc(var(--vvh, 1vh) * 2.4) !important;
  }

  html.ios #logo,
  html.ios .HP_header_title img{
    height: clamp(34px, calc(var(--vvh, 1vh) * 7), 80px) !important;
  }

  html.ios .HP_header_blurb{
    line-height: calc(var(--vvh, 1vh) * 2.1) !important;
  }

  html.ios .HP_header_search{
    height: calc(var(--vvh, 1vh) * 2.6) !important;
  }

  html.ios .HP_header_logCreateBasket{
    height: calc(var(--vvh, 1vh) * 3.8) !important;
    padding: calc(var(--vvh, 1vh) * 1.2) 0 !important;
  }

  html.ios .HP_mainCol3_categoryPictureLink p:first-child{
    height: calc(var(--vvh, 1vh) * 13.5) !important;
  }

  html.ios .small_break_lhs{
    height: calc(var(--vvh, 1vh) * 0.8) !important;
  }

  html.ios .HP_mainCol3_categoryPictures{
    margin-top: calc(var(--vvh, 1vh) * 1) !important;
    margin-bottom: calc(var(--vvh, 1vh) * 1) !important;
  }

  html.ios .HP_mainCol1_submenu{
    padding: calc(var(--vvh, 1vh) * 0.8) 0 !important;
    line-height: calc(var(--vvh, 1vh) * 2.5) !important;
  }

  html.ios .HP_main_BLACK2{
    padding-bottom: calc(var(--vvh, 1vh) * 1) !important;
  }

  html.ios .HP_header_logCreateBasket,
  html.ios .HP_mainCol3_categoryPictureLink{
    transition: none !important;
  }

  /* Your grid tweaks (keep iOS-only if that’s what you intended) */
  html.ios .HP_header_title{ grid-column: 1 / 16 !important; }

  html.ios .HP_header_blurb{
    grid-column: 16 / 34 !important;
    font-size: 0.95vw !important;
    font-weight: bold !important;
  }
}






/* =========================================
   HEADER COLLISION FIX (logo / blurb / buttons)
   Paste at VERY END of file
   ========================================= */

/* 0) Make blurb obey the grid (no “mystery” width/margins fighting layout) */
.HP_header_blurb{
  width:auto !important;
  max-width:100% !important;
  margin-left:0 !important;
}

/* =========================================
   A) DELL WIDESCREEN (DESKTOP SHORT)
   - Buttons already correct here
   - So: keep buttons as-is, just stop blurb overlapping logo
   - Rule: blurb starts after logo and ends BEFORE greeting starts
   ========================================= */
@media (min-width:1701px) and (max-width:2200px) and (min-aspect-ratio:2/1){

  /* Give the new logo a predictable block */
  .HP_header_title{ grid-column: 1 / 13 !important; }

  /* Blurb sits beside logo, but MUST end before greeting at 21 */
  .HP_header_blurb{
    grid-column: 14 / 34 !important;   /* key line */
    font-size: 2vh !important;
    line-height: 2.2vh !important;
    font-weight: normal !important;
  }
  
  /* Shift the cluster right so it never fights the blurb */
  .HP_header_greeting,
  .HP_header_greeting_hidden{ grid-column:41/48 !important; }

  .HP_header_view_orders,
  .HP_header_view_orders_hidden{ grid-column:49/54 !important; }

  .HP_header_account_settings,
  .HP_header_account_settings_hidden{ grid-column:55/60 !important; }

  .HP_header_log_logged_in,
  .HP_header_log_logged_out{ grid-column:61/66 !important; }

  .HP_header_create{ grid-column:67/72 !important; }
  .HP_header_basket{ grid-column:73/79 !important; }

  /* Keep search where you already like it on laptop-style layouts */
  .HP_header_search_box{ grid-column:78/99 !important; }
}

/* =========================================
   B) MATEVIEW (DESKTOP TALL)
   - Blurb beside logo is correct
   - But buttons drift because they’re still using “old” columns
   - So: keep blurb wide, shift button cluster right (like laptop layout)
   ========================================= */
@media (min-width:1701px) and (max-width:2200px) and (max-aspect-ratio:2/1){

  .HP_header_title{ grid-column: 1 / 14 !important; }

  /* Wider blurb lane on MateView */
  .HP_header_blurb{
    grid-column: 15 / 34 !important;
  }

  /* Shift the cluster right so it never fights the blurb */
  .HP_header_greeting,
  .HP_header_greeting_hidden{ grid-column:40/47 !important; }

  .HP_header_view_orders,
  .HP_header_view_orders_hidden{ grid-column:48/53 !important; }

  .HP_header_account_settings,
  .HP_header_account_settings_hidden{ grid-column:54/59 !important; }

  .HP_header_log_logged_in,
  .HP_header_log_logged_out{ grid-column:60/65 !important; }

  .HP_header_create{ grid-column:66/71 !important; }
  .HP_header_basket{ grid-column:72/77 !important; }

  /* Keep search where you already like it on laptop-style layouts */
  .HP_header_search_box{ grid-column:78/99 !important; }
}

/* =========================================
   C) LAPTOP (1101–1700)
   - Buttons already correct here
   - Blurb overlaps logo: same cure as Dell
   - End blurb before greeting starts (36 in your laptop layout)
   ========================================= */
@media (min-width:1101px) and (max-width:1700px){

  .HP_header_title{ grid-column: 1 / 13 !important; }

  /* Blurb starts after logo, ends before button cluster at 36 */
  .HP_header_blurb{
    grid-column: 14 / 36 !important;  /* key line */
  }
  
  /* Shift the cluster right so it never fights the blurb */
  .HP_header_greeting,
  .HP_header_greeting_hidden{ grid-column:38/45 !important; }

  .HP_header_view_orders,
  .HP_header_view_orders_hidden{ grid-column:46/51 !important; }

  .HP_header_account_settings,
  .HP_header_account_settings_hidden{ grid-column:52/57 !important; }

  .HP_header_log_logged_in,
  .HP_header_log_logged_out{ grid-column:58/63 !important; }

  .HP_header_create{ grid-column:64/69 !important; }
  .HP_header_basket{ grid-column:70/76 !important; }

  /* Keep search where you already like it on laptop-style layouts */
  .HP_header_search_box{ grid-column:78/99 !important; }
  
    .HP_footer_copy{
      font-weight: normal !important;
      font-size: 1.05vh !important;
  }
  
}

/* =========================
   ALBUM GRAIN ON GREEN PANELS (INDEX2)
   ========================= */
.HP_header_wrapper,
.HP_mainCol1_menuWrapper,
.HP_footer{
  background-color: var(--album-green) !important;
  background-image: var(--album-green-grain) !important;
  background-size: var(--album-green-grain-size) !important;
  background-position: var(--album-green-grain-pos) !important;
}

/* darker footer variant if you prefer */
.HP_footer{
  background-color: var(--album-green-deep) !important;
}


/* ==========================================================
   Remove hover effect on greeting when logged in
   (greeting only exists in logged-in state)
   ========================================================== */
.HP_header_greeting:hover{
  color: var(--brass, #D5C08A) !important;
  border-color: rgba(213,192,138,0.70) !important;
  cursor: default !important;
}




/* ==========================================================
   LOG IN / LOG OUT — behave exactly like other header buttons
   Base: brass border + whitish text
   Hover: all turquoise
   Paste at VERY END of searchResults2.css
   ========================================================== */

/* Base state (both logged in + logged out) */
a.HP_header_logCreateBasket.HP_header_log_logged_in,
a.HP_header_logCreateBasket.HP_header_log_logged_out{
  background-color:#2B3434 !important;                 /* dark enamel */
  color:#F6F3E8 !important;                            /* whitish text */
  border-color:rgba(213,192,138,0.65) !important;      /* brass border */
}

/* Hover state (both logged in + logged out) */
a.HP_header_logCreateBasket.HP_header_log_logged_in:hover,
a.HP_header_logCreateBasket.HP_header_log_logged_out:hover{
  background-color:var(--mint-2) !important;           /* turquoise fill */
  border-color:var(--mint-2) !important;               /* turquoise border */
  color:#F6F3E8 !important;                            /* keep whitish text */
}

/* (optional) stop any generic link hover rules interfering */
a.HP_header_logCreateBasket.HP_header_log_logged_in:visited,
a.HP_header_logCreateBasket.HP_header_log_logged_out:visited{
  color:#F6F3E8 !important;
}

/* ==========================================================
   LOG IN / LOG OUT — match ORIGINAL header button behaviour
   (border + text change only, NO background change)
   ========================================================== */

/* Base state — same as other buttons */
a.HP_header_logCreateBasket.HP_header_log_logged_in,
a.HP_header_logCreateBasket.HP_header_log_logged_out{
  background-color:#2B3434 !important;            /* enamel */
  color:#F6F3E8 !important;                       /* whitish text */
  border-color:rgba(213,192,138,0.65) !important; /* brass border */
}

/* Hover — EXACT same behaviour as other header buttons */
a.HP_header_logCreateBasket.HP_header_log_logged_in:hover,
a.HP_header_logCreateBasket.HP_header_log_logged_out:hover{
  background-color:#2B3434 !important;   /* stays enamel */
  color:var(--mint) !important;          /* mint text */
  border-color:var(--mint-2) !important; /* turquoise border */
}

/* Force blurb font everywhere (wins over earlier media-query rules) */
.HP_header_blurb{
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: normal !important;
}