/* =============================================================
   ArtisDev — Size Guide styles
   kourbela.com
   -------------------------------------------------------------
   Location : /wp-content/uploads/artisdev/size-guide.css
   Enqueued : handle "artis-size-guide", product pages only
   Safelist : add "size-guide.css" to WP Rocket -> Remove Unused CSS

   WHY THIS FILE EXISTS
   WP Rocket's "Remove Unused CSS" strips <style> blocks out of
   post content entirely. The size guide CSS therefore cannot
   live inside the WPBakery Raw HTML element — it has to be a
   real enqueued stylesheet. Markup stays in the block, styles
   live here.
   ============================================================= */


/* =============================================================
   1. PASTE ZONE
   -------------------------------------------------------------
   Open block 2322 in WPBakery, edit the Raw HTML element, and
   cut everything between <style> and </style> (including both
   tags). Paste the CSS below this line. Leave the markup in the
   block untouched.
   ============================================================= */

/* ---------- PASTE YOUR SIZE GUIDE CSS BELOW THIS LINE ---------- */

/* ---- Size Guide widget v2 — scoped to .dz-size-guide ---- */
.dz-size-guide{
  --dzsg-accent:#1c1a17;
  --dzsg-bg:#fbfaf8;
  --dzsg-ink:#1c1a17;
  --dzsg-muted:#8a847b;
  --dzsg-line:#e6e2da;
  --dzsg-row-alt:#f4f1ea;
  --dzsg-head-bg:#1c1a17;
  --dzsg-head-ink:#fbfaf8;

  width:700px;
  max-width:100%;          /* constant width across tabs; shrinks only if popup is narrower */
  margin:0 auto;
  background:var(--dzsg-bg);
  color:var(--dzsg-ink);
  font-family:inherit;
  font-size:15px;
  line-height:1.4;
  border:1px solid var(--dzsg-line);
  border-radius:4px;
  padding:22px 20px 16px;
  box-sizing:border-box;
  -webkit-font-smoothing:antialiased;
}
.dz-size-guide *{ box-sizing:border-box; }

.dz-size-guide .dzsg-state{
  position:absolute; width:1px; height:1px;
  opacity:0; pointer-events:none; margin:0;
}

/* ---- header ---- */
.dz-size-guide .dzsg-title{
  margin:0 0 16px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  text-align:center;
}

/* ---- tab strip ---- */
.dz-size-guide .dzsg-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:4px 22px;
  justify-content:center;
  border-bottom:1px solid var(--dzsg-line);
  margin-bottom:14px;
}
.dz-size-guide .dzsg-tabs label{
  position:relative;
  padding:0 2px 10px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dzsg-muted);
  cursor:pointer;
  user-select:none;
  transition:color .2s ease;
}
.dz-size-guide .dzsg-tabs label::after{
  content:"";
  position:absolute;
  left:0; bottom:-1px;
  height:2px; width:0;
  background:var(--dzsg-accent);
  transition:width .25s ease;
}
.dz-size-guide .dzsg-tabs label:hover{ color:var(--dzsg-ink); }

#dzsg-women:checked  ~ .dzsg-tabs label[for="dzsg-women"],
#dzsg-shoes:checked  ~ .dzsg-tabs label[for="dzsg-shoes"],
#dzsg-swim:checked   ~ .dzsg-tabs label[for="dzsg-swim"],
#dzsg-kids:checked   ~ .dzsg-tabs label[for="dzsg-kids"]{ color:var(--dzsg-ink); }
#dzsg-women:checked  ~ .dzsg-tabs label[for="dzsg-women"]::after,
#dzsg-shoes:checked  ~ .dzsg-tabs label[for="dzsg-shoes"]::after,
#dzsg-swim:checked   ~ .dzsg-tabs label[for="dzsg-swim"]::after,
#dzsg-kids:checked   ~ .dzsg-tabs label[for="dzsg-kids"]::after{ width:100%; }
#dzsg-women:focus-visible ~ .dzsg-tabs label[for="dzsg-women"],
#dzsg-shoes:focus-visible ~ .dzsg-tabs label[for="dzsg-shoes"],
#dzsg-swim:focus-visible  ~ .dzsg-tabs label[for="dzsg-swim"],
#dzsg-kids:focus-visible  ~ .dzsg-tabs label[for="dzsg-kids"]{
  outline:2px solid var(--dzsg-accent);
  outline-offset:3px;
  color:var(--dzsg-ink);
}

/* ---- CM / IN toggle ---- */
.dz-size-guide .dzsg-units{
  display:flex;              /* always occupies its row... */
  visibility:hidden;         /* ...but hidden unless the tab has measurements */
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin:0 0 12px;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dzsg-muted);
}
#dzsg-women:checked ~ .dzsg-units,
#dzsg-kids:checked  ~ .dzsg-units{ visibility:visible; }

.dz-size-guide .dzsg-switch{
  position:relative;
  display:inline-flex;
  align-items:center;
  border:1px solid var(--dzsg-line);
  border-radius:999px;
  padding:3px;
  cursor:pointer;
  background:#fff;
}
.dz-size-guide .dzsg-switch .dzsg-opt{
  position:relative; z-index:1;
  padding:4px 13px;
  font-size:11px; font-weight:700; letter-spacing:.1em;
  color:var(--dzsg-muted);
  transition:color .2s ease;
}
.dz-size-guide .dzsg-knob{
  position:absolute; z-index:0;
  top:3px; left:3px;
  width:calc(50% - 3px); height:calc(100% - 6px);
  background:var(--dzsg-accent);
  border-radius:999px;
  transition:transform .25s ease;
}
.dz-size-guide .dzsg-switch .dzsg-opt:first-child{ color:var(--dzsg-head-ink); }
#dzsg-units:checked ~ .dzsg-units .dzsg-knob{ transform:translateX(100%); }
#dzsg-units:checked ~ .dzsg-units .dzsg-opt:first-child{ color:var(--dzsg-muted); }
#dzsg-units:checked ~ .dzsg-units .dzsg-opt:last-child{ color:var(--dzsg-head-ink); }

.dz-size-guide .dzsg-in{ display:none; }
#dzsg-units:checked ~ .dzsg-scrollwrap .dzsg-cm{ display:none; }
#dzsg-units:checked ~ .dzsg-scrollwrap .dzsg-in{ display:inline; }

/* ============================================================
   SCROLL AREA — FIXED height (not max-height) so the popup is
   the SAME size on every tab. Desktop height is tall enough for
   the tallest tab (Women, two tables) to show without scrolling.
   Mobile height flexes to the viewport.
   ============================================================ */
.dz-size-guide .dzsg-scrollarea{
  height:548px;                    /* fits the tallest tab (Women, both sections stacked) with no scroll */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding-right:10px;
  scrollbar-width:thin;                          /* Firefox */
  scrollbar-color:var(--dzsg-accent) var(--dzsg-row-alt);
  scrollbar-gutter:stable;
}
/* WebKit (iOS Safari, Chrome, Android) — force a visible bar */
.dz-size-guide .dzsg-scrollarea::-webkit-scrollbar{
  width:6px;
  -webkit-appearance:none;                        /* iOS: opt out of auto-hiding overlay bar */
}
.dz-size-guide .dzsg-scrollarea::-webkit-scrollbar-track{
  background:var(--dzsg-row-alt);
  border-radius:999px;
}
.dz-size-guide .dzsg-scrollarea::-webkit-scrollbar-thumb{
  background:var(--dzsg-accent);
  border-radius:999px;
}

.dz-size-guide .dzsg-scrollwrap{ position:relative; }

/* ---- panels ---- */
.dz-size-guide .dzsg-panel{ display:none; animation:dzsg-fade .35s ease; padding-bottom:18px; }
#dzsg-women:checked ~ .dzsg-scrollwrap .dzsg-panel--women,
#dzsg-shoes:checked ~ .dzsg-scrollwrap .dzsg-panel--shoes,
#dzsg-swim:checked  ~ .dzsg-scrollwrap .dzsg-panel--swim,
#dzsg-kids:checked  ~ .dzsg-scrollwrap .dzsg-panel--kids{ display:block; }
/* Space ABOVE the second stacked section (e.g. Body Measurements) */
.dz-size-guide .dzsg-block + .dzsg-block{ margin-top:22px; }
@keyframes dzsg-fade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

/* ============================================================
   SECTION HEADERS — static, non-collapsible labels above each
   table.
   ============================================================ */
.dz-size-guide .dzsg-block{
  margin:0 0 20px;
  border:1px solid var(--dzsg-line);
  border-radius:4px;
  background:#fff;
}
.dz-size-guide .dzsg-block-head{
  padding:12px 14px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dzsg-ink);
  border-bottom:1px solid var(--dzsg-line);
  margin:0;
}
.dz-size-guide .dzsg-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ---- tables ---- */
.dz-size-guide table{
  width:100%;
  table-layout:fixed;      /* columns stay put regardless of cell text (CM vs IN) */
  border-collapse:collapse;
  font-size:14px;
}
.dz-size-guide thead th{
  background:var(--dzsg-head-bg);
  color:var(--dzsg-head-ink);
  font-weight:600;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:10px 10px;
  text-align:center;
  white-space:nowrap;
}
.dz-size-guide thead th:first-child{ text-align:left; width:26%; }
.dz-size-guide tbody td,
.dz-size-guide tbody th{
  padding:8px 10px;
  text-align:center;
  border-bottom:1px solid var(--dzsg-line);
  white-space:nowrap;
}
.dz-size-guide tbody th{
  text-align:left;
  font-weight:700;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:var(--dzsg-row-alt);
  color:var(--dzsg-ink);
}
.dz-size-guide tbody tr:last-child td,
.dz-size-guide tbody tr:last-child th{ border-bottom:0; }
.dz-size-guide tbody tr:hover td{ background:var(--dzsg-row-alt); }

/* ---- print: open everything ---- */
@media print{
  .dz-size-guide .dzsg-tabs,
  .dz-size-guide .dzsg-units{ display:none !important; }
  .dz-size-guide .dzsg-panel{ display:block !important; }
  .dz-size-guide .dzsg-scrollarea{ height:auto; max-height:none; overflow:visible; }
  
  .dz-size-guide .dzsg-in{ display:none !important; }
  .dz-size-guide .dzsg-cm{ display:inline !important; }
}

/* ---- small screens ---- */
@media (max-width:120px){
  .dz-size-guide{
    width:auto;
    border-left:0; border-right:0; border-radius:0;   /* full-bleed edges */
    padding:16px 10px 12px;
  }
  .dz-size-guide .dzsg-tabs{ gap:4px 14px; }
  /* Flex to the screen: fill the viewport minus the fixed header
     block (title + tabs + toggle ≈ 150px) and the popup chrome. */
  .dz-size-guide .dzsg-scrollarea{
    height:calc(100dvh - 210px);
    min-height:240px;
    padding-right:8px;
  }
  .dz-size-guide table{ font-size:12px; }
  .dz-size-guide thead th,
  .dz-size-guide tbody td,
  .dz-size-guide tbody th{ padding:8px 7px; }

  /* ---- Make the XStore size-guide POPUP itself fill the screen ----
     Scoped with :has() to the size-guide popup only, so other popups
     (login, quick-view) are untouched. */
  .mfp-container:has(.dz-size-guide){
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .mfp-content:has(.dz-size-guide),
  .et-popup-content:has(.dz-size-guide){
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    border-radius:0 !important;
  }
}

/* ---------- PASTE YOUR SIZE GUIDE CSS ABOVE THIS LINE ---------- */


/* =============================================================
   2. Modal container helpers
   -------------------------------------------------------------
   Generic safety rules scoped to the modal so the size guide
   can't overflow its panel. These do NOT position the modal —
   that is handled by inline styles in the PHP snippet, which
   Remove Unused CSS cannot strip.
   ============================================================= */

.artis-modal__content {
	line-height: 1.5;
}

.artis-modal__content img {
	max-width: 100%;
	height: auto;
}

/* Long tables scroll horizontally rather than blowing out the panel. */
.artis-modal__content table {
	max-width: 100%;
}

/* Kill stray top margin on the first element inside the panel,
   which would otherwise fight the panel's own padding. */
.artis-modal__content > *:first-child {
	margin-top: 0;
}

.artis-modal__content > *:last-child {
	margin-bottom: 0;
}


/* =============================================================
   3. Mobile adjustments
   ============================================================= */

@media (max-width: 600px) {

	.artis-modal__inner {
		padding: 2.5rem 1rem 1rem !important;
		max-height: 92vh !important;
	}
}