/* =============================================================================
   Mobile Responsive v2 — 2026-08-27 — MOBILE ONLY
   Every rule in this file lives inside a max-width media query, so the desktop
   layout cannot be affected. Deleting this file reverts all of it.
   Builds on the existing "Mobile Responsive v1..v1n" rules in stylesheet.css.
   ============================================================================= */

@media (max-width:960px){

/* ---------- 1. OVERALL COMPACTNESS ---------- */
body{font-size:14px;}
.centerColumn{padding-left:8px !important;padding-right:8px !important;}
#contentMainWrapper h1,#contentMainWrapper h2{font-size:18px !important;line-height:1.25 !important;margin:.45em 0 !important;}
#contentMainWrapper h3{font-size:15px !important;margin:.3em 0 !important;}

/* ---------- 2. HOMEPAGE ---------- */
/* the 36px Times New Roman section headings (inline-styled in tpl_index_home.php) */
#indexCategories center p font,#newArrivalsSection center p font{font-size:19px !important;letter-spacing:.5px !important;}
#indexCategories center p,#newArrivalsSection center p{margin:.7em .5em .4em !important;}
/* the 5em-tall divider rules between homepage sections */
#indexCategories div[style*="border-top:3px solid"]{margin:1.4em auto .6em !important;}
/* section padding blocks */
#newArrivalsSection{padding:.6em 0 1em !important;}
#indexCategories > div[style*="background-color"]{padding:.7em 6px !important;margin:0 6px !important;}
/* tiles 2-up instead of the full-width stack v1 forced — this is the single
   biggest length saving on the homepage */
.categoryListBoxContents{width:48.5% !important;margin:.4em .75% !important;float:left !important;display:block !important;}
.categoryListBoxContents p{font-size:12px !important;letter-spacing:.5px !important;margin:.35em 0 .25em !important;line-height:1.3 !important;}
.categoryListBoxContents p span{font-size:10px !important;}
/* New Arrivals carousel */
.new-arrivals-wrap{padding:0 8px !important;}
.new-arrivals-track{padding:6px 0 10px !important;}

/* ---------- 3. FOOTER ---------- */
/* hide the duplicated "products" category column — those same categories are
   already in the mobile menu. Customer services / Contact / Stay in touch /
   Terms / Privacy / copyright all stay. */
#siteinfoLegal table td:nth-child(2){display:none !important;}
#siteinfoLegal tr{height:auto !important;}
#siteinfoLegal td{padding:8px 14px !important;}
#siteinfoLegal .footer_bar{font-size:13px !important;}
#siteinfoLegal .footer_line,#siteinfoLegal .footer_text{font-size:12px !important;line-height:1.55 !important;}
#new_footer{font-size:11px !important;line-height:1.8 !important;padding-bottom:4px !important;}
#new_footer br{display:none !important;}

/* ---------- 4. MENU ---------- */
.menu-toggle-btn{padding:9px !important;font-size:15px !important;}
ul.sfmenu > li > a{padding:9px 12px !important;font-size:14px !important;line-height:1.3 !important;}
ul.sfmenu li ul li{width:100% !important;border-bottom:1px solid #f2f2f2 !important;}
ul.sfmenu li ul li a{display:block !important;padding:8px 12px 8px 26px !important;font-size:13px !important;line-height:1.3 !important;}

/* ---------- 5. LISTING CONTROLS (Sort by / Items per page) ---------- */
/* ids come from tpl_modules_product_listing.php — presentation only, the
   onchange navigation that carries sort + itemsperpage is untouched */
#jl-sort,#jl-perpage{font-size:12px !important;padding:4px 6px !important;height:auto !important;
  line-height:1.3 !important;max-width:44vw !important;border-radius:4px !important;
  -webkit-appearance:none !important;appearance:none !important;background-color:#fff !important;}

/* ---------- 6. PAGINATION ---------- */
#productsListingTopNumber,#productsListingBottomNumber,.navSplitPagesResult{font-size:10px !important;line-height:1.4 !important;}
#productsListingListingTopLinks,#productsListingListingBottomLinks,.navSplitPagesLinks{font-size:11px !important;line-height:1.7 !important;}
#productsListingListingTopLinks a,#productsListingListingBottomLinks a,.navSplitPagesLinks a{
  display:inline-block !important;min-width:26px !important;padding:5px 6px !important;
  margin:1px !important;text-align:center !important;}

/* ---------- 7. PRODUCT LISTING ---------- */
.tabTable tbody tr td{padding:4px 3px !important;vertical-align:top !important;}
h3.itemTitle{font-size:11px !important;margin:3px 0 1px !important;}
.listingDescription{font-size:10px !important;margin:1px 0 !important;}
.productBasePrice,.productSpecialPrice,.normalprice,.productPriceDiscount{font-size:11px !important;margin:1px 0 !important;}

}

@media (max-width:600px){
body{font-size:13.5px;}
#indexCategories center p font,#newArrivalsSection center p font{font-size:17px !important;}
#siteinfoLegal td{padding:7px 12px !important;}
}
/* ===== end Mobile Responsive v2 ===== */

/* =============================================================================
   Mobile Responsive v2b — 2026-08-27 — menu overlap + top-category shopping
   Still MOBILE ONLY. Fixes Esti's two reports:
   (1) the sticky duplicate menu (#topmenu) was overlaying page content
   (2) subcategory tiles are shown again on category pages (compact) now that
       tapping a top category goes straight to its products
   ============================================================================= */
@media (max-width:960px){

/* (1) #topmenu is a SECOND copy of the whole menu (sticky bar, duplicate
   id="listrow1"). On a phone it expands over the banner/content. The hamburger
   #mainmenu already provides full navigation, so hide the sticky copy. */
#topmenu{display:none !important;}

/* keep the real menu in normal flow — it can never sit on top of content */
#mainmenu{position:static !important;z-index:auto !important;height:auto !important;overflow:visible !important;}
#mainmenu .new_menu_bg{position:static !important;height:auto !important;background:#ffffff !important;}
ul.sfmenu{position:static !important;}
ul.sfmenu > li{position:relative !important;float:none !important;width:100% !important;display:block !important;}
ul.sfmenu ul{position:static !important;left:auto !important;top:auto !important;width:100% !important;
  box-shadow:none !important;background:#fafafa !important;margin:0 !important;}

/* room for the +/- control so long category names never run under it */
ul.sfmenu > li > a{padding-right:50px !important;}

/* (2) the +/- control that opens subcategories, so the category name itself
   stays a normal link straight to that category's products */
.mobile-subtoggle{position:absolute !important;right:0 !important;top:0 !important;
  width:46px !important;height:100% !important;min-height:38px !important;
  border:0 !important;background:transparent !important;color:#16355a !important;
  font-size:20px !important;line-height:1 !important;padding:0 !important;cursor:pointer !important;}

/* subcategory tiles back on the category page (v1h had hidden them), compact */
.subcats{display:block !important;margin:2px 0 6px !important;}
.subcats table{width:100% !important;}
.subcats table tbody tr{display:flex !important;flex-wrap:wrap !important;width:100% !important;height:auto !important;}
.subcats table tbody tr td{display:block !important;width:33.33% !important;height:auto !important;
  box-sizing:border-box !important;padding:4px !important;text-align:center !important;font-size:10px !important;line-height:1.25 !important;}
.subcats table tbody tr td img{width:auto !important;max-width:100% !important;height:auto !important;}
}
/* ===== end Mobile Responsive v2b ===== */

/* =============================================================================
   Mobile Responsive v2c — 2026-08-27 — MOBILE ONLY
   Open mobile menu must be fully opaque and painted above the page content.
   Cause: the menu's ancestors constrain their height, so the expanded menu
   spilled out of them and the category page content painted over/through it.
   ============================================================================= */
@media (max-width:960px){

/* 1. ancestors must not clip or cap the height of the expanded menu */
.nav-wrapper,#headerWrapper{height:auto !important;min-height:0 !important;overflow:visible !important;}

/* 2. the menu paints above everything else, on a solid background */
#mainmenu{position:relative !important;z-index:10000 !important;background:#ffffff !important;}
#mainmenu.mobile-nav-open{box-shadow:0 8px 20px rgba(0,0,0,.20) !important;}
#mainmenu.mobile-nav-open .new_menu_bg{
  background:#ffffff !important;
  max-height:72vh !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch !important;
  border-bottom:2px solid #16355a !important;}

/* 3. every layer of the menu is opaque so nothing shows through */
ul.sfmenu,ul.sfmenu > li,ul.sfmenu > li > a{background:#ffffff !important;}
ul.sfmenu > li{border-bottom:1px solid #e3e6ea !important;}
ul.sfmenu > li > a{color:#16355a !important;}

/* 4. subcategories tinted so the two levels read as separate */
ul.sfmenu ul,ul.sfmenu ul li,ul.sfmenu ul li a{background:#f4f7fa !important;}
ul.sfmenu ul li{border-bottom:1px solid #e8edf2 !important;}
ul.sfmenu ul li:last-child{border-bottom:0 !important;}

/* 5. the + / - control stays pinned right, above the row, never overlapped */
.mobile-subtoggle{z-index:3 !important;background:transparent !important;}
}
/* ===== end Mobile Responsive v2c ===== */

/* =============================================================================
   Mobile Responsive v2d — 2026-08-27 — MOBILE ONLY
   Compact header so shoppers reach the banner/products without scrolling past
   a tall header. Targets the inline-styled markup in common/tpl_header.php.
   ============================================================================= */
@media (max-width:960px){

/* --- kill the big gaps: the inner header table uses cellspacing="15" --- */
#topheader,#topheader .new_h3 > table{border-spacing:0 !important;border-collapse:separate !important;}
#headerWrapper{padding:0 !important;}
#topheader td{padding:1px 4px !important;}

/* --- logo about 30% smaller, tight above and below --- */
#topheader img{max-width:170px !important;width:170px !important;height:auto !important;margin:3px auto !important;}

/* --- search box smaller and cleaner --- */
#navMainSearch{margin:0 !important;}
#navMainSearch input[type="text"]{width:170px !important;height:24px !important;font-size:12px !important;
  padding-left:26px !important;background-size:auto 16px !important;}

/* --- Log In / My Account / About Jayelle + phone: one small line --- */
#topheader .new_h3 > table > tbody > tr > td{padding:1px 4px !important;font-size:11px !important;line-height:1.35 !important;}
#topheader .new_h3 > table > tbody > tr:nth-child(2) > td{display:inline-block !important;width:auto !important;
  vertical-align:middle !important;text-align:center !important;}
#topheader .new_h3 > table > tbody > tr:nth-child(2) a{font-size:11px !important;}
#topheader .new_h3 > table > tbody > tr:nth-child(2) font{font-size:11px !important;}

/* --- hide "WHOLESALE JEWELLERY / For Retail Jewellery Stores" (the banner says it) --- */
#topheader span[style*="font-size:14pt"]{display:none !important;}
#topheader .new_h3 > table > tbody > tr:has(span[style*="font-size:14pt"]){display:none !important;}

/* --- Shopping Cart button smaller, and close to the MENU button --- */
#topheader a[href*="shopping_cart"]{padding:4px 12px !important;font-size:11px !important;border-radius:3px !important;}
#topheader .new_h3 > table > tbody > tr:last-child > td{padding-top:2px !important;padding-bottom:2px !important;}

/* --- MENU button shorter but still an easy tap target --- */
.menu-toggle-btn{padding:7px !important;font-size:14px !important;margin:0 !important;line-height:1.2 !important;}
.nav-wrapper{margin-bottom:0 !important;}
}
/* ===== end Mobile Responsive v2d ===== */

/* =============================================================================
   Mobile Responsive v2e — 2026-08-27 — MOBILE ONLY
   (a) subcategory tiles become ONE horizontal scrolling row so products start
       almost immediately (Sort by / Items per page stay directly beneath it)
   (b) belt-and-braces on the open menu: the page content is pinned to a lower
       stacking layer so it can never paint over the menu on a category page
   ============================================================================= */
@media (max-width:960px){

/* (b) content always below the menu's layer */
#contentMainWrapper{position:relative !important;z-index:1 !important;}

/* (a) one compact sideways-scrolling subcategory strip */
.subcats{display:block !important;margin:2px 0 4px !important;padding:0 !important;}
.subcats table,.subcats table tbody{display:block !important;width:100% !important;}
.subcats table tbody tr{
  display:flex !important;flex-wrap:nowrap !important;width:100% !important;height:auto !important;
  overflow-x:auto !important;overflow-y:hidden !important;-webkit-overflow-scrolling:touch !important;
  scrollbar-width:none !important;-ms-overflow-style:none !important;
  gap:2px !important;padding:0 0 2px !important;}
.subcats table tbody tr::-webkit-scrollbar{display:none !important;}
.subcats table tbody tr td{
  display:block !important;flex:0 0 auto !important;
  width:auto !important;min-width:62px !important;max-width:82px !important;height:auto !important;
  box-sizing:border-box !important;padding:2px 3px !important;text-align:center !important;
  font-size:9px !important;line-height:1.15 !important;white-space:normal !important;}
.subcats table tbody tr td img{
  max-width:100% !important;max-height:36px !important;width:auto !important;height:auto !important;display:block !important;margin:0 auto !important;}
.subcats table tbody tr td a{font-size:9px !important;text-decoration:none !important;}
}
/* ===== end Mobile Responsive v2e ===== */

/* =============================================================================
   Mobile Responsive v2f — 2026-08-27 — MOBILE ONLY
   (a) homepage tile groups (Shop by Stone etc.) as a true 2-column grid
   (b) close the gap between the subcategory strip and Sort by / Items per page
   ============================================================================= */
@media (max-width:960px){

/* (a) floats snag on uneven tile heights, which is why a row could end up with
   one box. Make the tile wrapper a flex grid so it is always exactly 2 across. */
#indexCategories div:has(> .categoryListBoxContents){
  display:flex !important;flex-wrap:wrap !important;align-items:stretch !important;
  justify-content:flex-start !important;}
#indexCategories div:has(> .categoryListBoxContents) > br{display:none !important;}
.categoryListBoxContents{
  flex:0 0 48% !important;width:48% !important;max-width:48% !important;
  margin:.4em 1% !important;box-sizing:border-box !important;
  float:left !important;   /* fallback if :has() is unsupported */
  display:block !important;vertical-align:top !important;}

/* (b) strip out the dead vertical space above Sort by / Items per page */
.subcats{margin:2px 0 2px !important;padding:0 !important;}
br.clearBoth.product-category-listing{display:none !important;}
#navBreadCrumb{margin:2px 0 !important;padding:2px 0 !important;font-size:10px !important;line-height:1.3 !important;}
#indexProductList,#productListing{margin-top:0 !important;padding-top:0 !important;}
div:has(> #jl-sort),div:has(#jl-sort){margin:0 !important;padding:1px 0 !important;line-height:1.25 !important;}
#productsListingTopNumber{margin:1px 0 !important;padding:0 !important;}
#indexProductList > br,.centerColumn > br.clearBoth:first-of-type{display:none !important;}
}
/* ===== end Mobile Responsive v2f ===== */
/* =============================================================================
   Mobile Responsive v2g — 2026-08-27 — MOBILE ONLY
   Kill the dead vertical space between the subcategory strip and Sort by.
   Root cause: the .subcats box has an INLINE height:170px (and its inner
   <tr height="130px"> / cellspacing="5" / cellpadding="10"), so it reserved
   170px no matter how small the icons are. Let it size to its content.
   Icon sizes are NOT changed here.
   ============================================================================= */
@media (max-width:960px){

.subcats{
  height:auto !important;max-height:none !important;min-height:0 !important;
  overflow:visible !important;
  margin:0 auto 6px !important;padding:0 !important;}
.subcats table{
  height:auto !important;border-spacing:0 !important;margin:0 !important;padding:0 !important;}
.subcats tbody{height:auto !important;}
.subcats tr{height:auto !important;min-height:0 !important;}
.subcats td{padding:2px 3px !important;height:auto !important;vertical-align:bottom !important;}

/* the float-clearing <br> that sits directly after the subcats box */
.subcats + br.clearBoth{display:none !important;}

/* the layout cell that holds the strip must not add its own bottom gap */
#indexCategories > table > tbody > tr > td{padding-bottom:0 !important;}
#indexCategoriesHeading{margin-bottom:4px !important;}

/* and the listing block starts immediately below */
#productListing{margin-top:0 !important;padding-top:0 !important;}
}
/* ===== end Mobile Responsive v2g ===== */
/* =============================================================================
   Mobile Responsive v2h — 2026-08-27 — DESKTOP PROTECTION
   The + / - subcategory toggle is created by JS at every viewport width, so
   without a default it renders as a plain button in the DESKTOP menu too.
   This mirrors the site's own pattern for its hamburger, which is declared
   .menu-toggle-btn{display:none} in stylesheet.css line 1354 and switched on
   inside the mobile media query.
   This is the ONLY declaration outside a media query in this file, and it
   applies to a class that exists solely because of our own JS — no pre-existing
   desktop element can be affected by it.
   ============================================================================= */
.mobile-subtoggle{display:none;}

@media (max-width:960px){
.mobile-subtoggle{display:block !important;}
}
/* ===== end Mobile Responsive v2h ===== */