/* ===========================
   style2026.critical.css
   - Reset
   - Fonts
   - Body/wrap
   - Header + logo + search + cart + login + dropdown
   - Tabs row geometry
   - Gallery grid cards (.content-gallery / .boxgrid)
   - Header override block
   =========================== */

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, dl, dt, dd, ol, nav ul, nav li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, w3_footer_grid, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* Big LCP win on long grids: skip offscreen rendering */
.boxgrid{
  content-visibility: auto;
  contain-intrinsic-size: 395px 295px; /* matches your boxgrid height/width */
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* start editing from here */
a {
	text-decoration: none;
}
.txt-rt { text-align: right; }/* text align right */
.txt-lt { text-align: left; }/* text align left */
.txt-center { text-align: center; }/* text align center */
.float-rt { float: right; }/* float right */
.float-lt { float: left; }/* float left */
.clear { clear: both; }/* clear float */
.pos-relative { position: relative; }/* Position Relative */
.pos-absolute { position: absolute; }/* Position Absolute */
.vertical-base { vertical-align: baseline; }/* vertical align baseline */
.vertical-top { vertical-align: top; }/* vertical align top */
.underline {
	padding-bottom: 5px;
	border-bottom: 1px solid #eee;
	margin: 0 0 20px 0;
}
.content-pagenation li,
nav.horizontal ul li {
    display: inline-block;
}
.account_desc li,
.page-no li,
.page-no p,
.page-no ul,
.show p,
.sort p {
    display: inline;
}
.images_1_of_2 img,
.images_1_of_4 img,
.images_3_of_2 img,
img {
    max-width: 100%;
}
/* Add 5px bottom padding and a underline */
nav.vertical ul li { display: block; }/* vertical menu */
nav.horizontal ul li { display: inline-block; }/* horizontal menu */
img { max-width: 100%; }

/* Lock the tabs row height so font swap doesn't change geometry */
.tcs-tabs-row{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
  white-space:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  width:100%;
  min-height:38px; /* matches your inline height */
}

/* Lock each tab’s geometry */
.tcs-tabs-row .tcs-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:38px;
  padding:0 12px;
  flex:0 0 auto;
  box-sizing:border-box;
  line-height:1; /* prevents baseline wobble */
}

/*end reset*/
/* === Fonts (place once, high in the file) === */
@font-face{
  font-family:"Monda";
  src:url("https://www.thecollectionshop.com/Fonts/Monda-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Monda";
  src:url("https://www.thecollectionshop.com/Fonts/Monda-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
body {
    font-family: Monda, Arial, Helvetica, sans-serif;
    background-color: #ffffff; /* Ensures a high-contrast background */
    color: #222222; /* Dark text for readability */
    line-height: 1.5;

    /* ✅ Fix Layout Shifts */
    min-height: 100vh; /* Prevents body from collapsing */
    overflow-x: hidden; /* Prevents horizontal shift */
    text-rendering: optimizeSpeed; /* Faster font rendering */
}
.wrap {
    width: 100%; /* was 100vw */
    max-width: 100%;
    background: #FFF;
    margin: 0 auto;
    padding: 0 0;
    box-sizing: border-box; /* ensure padding never pushes past 100% in media queries */
}
/* Header: keep your background/padding, just add a stable height */
.header { min-height: 64px; background:#fff; }
.header_top { padding: 2px 0; }

/* Main: harmless baseline in case you’re using <div class="main"> or <main> */
.main, main { display: block; }

/* Container */
.logo{ float:left; width:33%; display:flex; align-items:center; justify-content:flex-start; margin-top:15px; }
.logo img{ display:block; width:358px; height:auto; aspect-ratio:358/59; max-width:100%; }

}
@media (max-width: 640px){
  .wrap{ width:100%; }

  .logo{
    float:none;
    width:100%;
    margin-top:10px;
    display:flex;
    align-items:center;
    justify-content:center;   /* center the logo */
    text-align:initial;       /* flex handles centering */
  }

  .logo img{
    display:block;
    height:auto;
    aspect-ratio:358/59;
    width:100%;               /* scale to container */
    max-width:320px;          /* don’t exceed this on small screens */
  }
}

/* Very small phones (<=480px) — optional tweak */
@media (max-width: 480px){
  .logo img{
    max-width:220px;          /* a bit smaller for tiny screens */
  }
}

/**** Header Top Right ****/
.header_top_right {
	float: left;
	width: 67%;
	margin-top: 15px;
}
.search_box {
	float: left;
	border: 1px solid #DBDBDB;
	position: relative;
	width: 47%;
}
.search_box form input[type="text"] {
	width: 74%;
	padding: 10px 8px;
	outline: none;
	border: none;
	background: none;
	font-size: 14px;
	color: ##333333;
	font-family: Arial;
	outline: none;
	margin: 0;
}
.search_box form input[type="submit"] {
	border: none;
	cursor: pointer;
	color: #FFF;
	font-size: 12px;
	padding: 10px 15px;
	height: 36px;
	margin: 0;
	background: -webkit-gradient(linear, left top, left bottom, from(#70389C), to(#602D8D));
	background: -moz-linear-gradient(top, #70389C, #602D8D);
	background: -o-linear-gradient(top, #70389C, #602D8D);
	background: -ms-linear-gradient(top, #70389C, #602D8D);
	-webkit-transition: all .9s;
	-moz-transition: all .9s;
	-o-transition: all .9s;
	-ms-transition: all .9s;
	transition: all .9s;
	position: absolute;
	right: 0;
	top: 0;
}
.search_box form input[type="submit"]:hover {
	background: #444;
}
/* ✅ Improve placeholder contrast */
.search_box form input[type="text"]::placeholder {
    color: #666666; /* Slightly darker for better readability */
    opacity: 1; /* Ensures visibility */
}
.shopping_cart {
	float: left;
	width: 80px;
	position: relative;
	margin-left: 15px;
	margin-top: 10px;/* bumps down button */
	padding: 0 0 0 46px;
	background: url(https://www.thecollectionshop.com/images/header_cart.png) 0 0 no-repeat;
	z-index: 99;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	cursor: pointer;
}
.cart {
	height: 38px;
	padding: 0 0 0 10px;
	background: #EDEDED;
	border: 1px solid #CECECE;
	border-left: none;
	line-height: 36px;
	-webkit-border-radius: 0 2px 2px 0;
	border-radius: 0 2px 2px 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.shopping_cart .cart .opencart {
	width: 7px;
	height: 5px;
	display: block;
	background: url(https://www.thecollectionshop.com/images/header_arrow.png) 0 0 no-repeat;
	position: absolute;
	right: 11px;
	top: 16px;
}
.shopping_cart span.cart_title {
	font-size: 13px;
	font-weight: bold;
	color: #4F4F4F;
}
.shopping_cart span.no_product {
	font-size: 13px;
	font-weight: bold;
	color: #DD0F0E;
}
.login {
	float: left;
	margin-left: 10px;
	margin-top: 10px;
	width: 75px;
	height: 38px;
	display: block;
	border: 1px solid #CECECE;
	text-align: center;
	font-family: Monda, Arial, Helvetica, sans-serif;
    background-color: #ffffff; /* Ensures a high-contrast background */
    color: #222222; /* Dark text for readability */
    line-height: 1.5;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background: url(https://disneyclassics.net/images/gradient_light-1.png) 0 0 repeat-x;
}
.login span a img {
	padding-top: 8px;
}
.wrapper-dropdown {
	/* Size & position */
	float: left;
	width: 61px;
	height: 38px;
	position: relative;
	margin-left: 10px;
	padding: 0 0 0 12px;
	/* Styles */
	background: url(https://www.thecollectionshop.com/images/gradient_light-1.png) 0 0 repeat-x;
	font: bold 13px/36px "Arial";
	color: #4F4F4F;
	border: 1px solid #CECECE;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	cursor: pointer;
	outline: none;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.wrapper-dropdown .opencart {
	width: 7px;
	height: 5px;
	display: block;
	background: url(https://www.thecollectionshop.com/images/header_arrow.png) 0 0 no-repeat;
	position: absolute;
	right: 11px;
	top: 16px;
}
.wrapper-dropdown .dropdown {
	/* Size & position */
	position: absolute;
	top: 38px;
	left: 0;
	right: 0;
	/* Styles */
	border-radius: 0 0 5px 5px;
	border: 1px solid rgba(0,0,0,0.2);
	border-top: none;
	border-bottom: none;
	list-style: none;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	/* Hiding */
	max-height: 0;
	overflow: hidden;
}
.wrapper-dropdown .dropdown li a {
	font-size: 13px;
	color: #FFF;
	font-weight: bold;
	padding: 10px 23px;
	border-bottom: 1px solid #7D60AA;
	text-align: center;
}
.wrapper-dropdown .dropdown li a span.lang {
	font-size: 13px;
	color: #FFF;
	font-weight: bold;
	padding: 0px 0px;
}
.wrapper-dropdown .dropdown li a span.lang:hover {
	color: #DD0F0E;
}
.wrapper-dropdown .dropdown li a span img {
	padding-right: 5px;
	margin-bottom: -8px;
}
.wrapper-dropdown .dropdown li a span {
	padding-right: 5px;
}
.wrapper-dropdown .dropdown li:last-of-type a {
	border: none;
}
.wrapper-dropdown .dropdown li i {
	margin-right: 5px;
	color: inherit;
	vertical-align: middle;
}
/* Hover state */
.wrapper-dropdown .dropdown li:hover a {
	color: #DD0F0E;
}
/* Active state */
.wrapper-dropdown.active {
	border-radius: 5px 5px 0 0;
	box-shadow: none;
	border-bottom: none;
}
.wrapper-dropdown.active .dropdown {
	border-bottom: 1px solid rgba(0,0,0,0.2);
	max-height: 400px;
	width: 95px;
	z-index: 1;
	background: #70389C;
}
.wrapper-dropdown.active .languges {
	border-bottom: 1px solid rgba(0,0,0,0.2);
	max-height: 400px;
	width: 135px;
	z-index: 11;
	background: #70389C;
}

/* Content wrapper baseline (prevents flash for first grid) */
.content {
    width: 100%;
    padding: 20px 10px 10px 10px;
    box-sizing: border-box;
    background: #FFF;
}

/*---content-galery----*/
.content-gallery {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping for multiple rows */
    justify-content: center; /* Centers items horizontally */
    align-items: center; /* Centers items vertically (if needed) */
    text-align: center; /* Ensures text alignment */
}
.content-gallery a{ color: #000000; }
.content-gallery h3 {
    margin: 10px 10px 0;
    color: #fff;
    font-family: Monda, sans-serif;
    font-size: 15px;
    letter-spacing: -1px;
    font-weight: 700;
}
.boxgrid {
    width: 295px;
    height: 395px;
    margin: 9px;
    float: left;
    background: #fff;
    border: 0.1px ridge #fff;
    overflow: hidden;
    position: relative;
    border-radius: 0.3em;
    box-shadow: 1px 1px 1px silver;
}
.boxcaption,
.boxcaption2 {
    float: left;
    position: absolute;
    background: #fff;
    width: 100%;
    opacity: 0.7;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.cover boxcaption { top: 70px; }
.boxgrid img {
    display: block;
    margin: 0 auto;
}
.boxgrid p {
    padding: 0 6px;
    color: #000;
    font-weight: 600;
    letter-spacing: 0.4px;
    font-size: 10px;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.boxgrid p2 {
    padding: 0 6px;
    color: #000;
    font-weight: 800;
    letter-spacing: 0.5px;
    font-size: 10px;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.boxgrid h1,
.boxgrid h2 {
    padding: 0 10px;
    color: #000;
    letter-spacing: 0.5px;
    font-size: 10px;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.boxgrid h1 { font-weight: 700; }
.boxgrid h2 { font-weight: lighter; }
.boxgrid h3,
.boxgrid pprice {
    padding: 0 10px;
    font-weight: 700;
    font-family: Monda, sans-serif;
    text-transform: none;
}
.boxgrid pprice {
    font-size: 0.6em;
    color: #950b0b;
    letter-spacing: 0.15px;
}
.boxgrid h3 {
    font-size: 0.8em;
    color: #343232;
    letter-spacing: 1px;
}
.boxgrid h3 a:hover { color: #950b0b; }
.boxcaption { height: 120px; }
.caption .boxcaption,
.captionfull .boxcaption {
    top: 320px;
    left: 0;
}
.boxcaption2 { height: 75px; }
.caption .boxcaption2,
.captionfull .boxcaption2 {
    top: 120px;
    left: 0;
}
/*---end-content-gallery---*/

/* =========================================================
   TCS HEADER OVERRIDE (wins-last)
   Desktop: 3 columns (Logo | Search | Tabs)
   Mobile: stack (Logo, Search, Tabs)
   Goal: stable geometry (reduce CLS)
   ========================================================= */

    /* Keep your existing layout but force right side stacked */
    .header_top_right{
      display:flex;
      flex-direction:column !important;
      justify-content:center;
      gap:6px;
      min-width:0;
    }

    /* Search width control (prevents pushing everything right) */
    .header_top_right .search_box{
      width:100%;
      max-width:520px;
      margin:0 !important;
    }

    /* Tabs directly under search, same width */
    .header_top_right .tcs-top-tabs{
      width:100%;
      max-width:520px;
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap:4px;                 /* tighter spacing */
      flex-wrap:nowrap;
      white-space:nowrap;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;

      /* Lock geometry to avoid micro-CLS */
      min-height:38px;
      padding:0;
    }
    .header_top_right .tcs-top-tabs a{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      height:38px;
      line-height:38px;        /* prevents baseline wiggle */
      padding:0 10px;          /* tighter */
      box-sizing:border-box;
      flex:0 0 auto;
      border:0;
      font-family:"Monda", Arial, Helvetica, sans-serif;
      font-weight:700;
      font-size:12px;
    }

    /* Logo: do not allow the column to squeeze it */
    .header_top .logo{
      flex:0 0 auto;
      min-width:320px;
      flex-shrink:0;
    }
    .header_top .logo img{
      width:auto !important;
      max-width:100% !important;
      height:auto !important;
      display:block;
    }

    /* Mobile behavior: center everything + make logo larger */
    @media (max-width:1024px){
      .header_top{
        flex-wrap:wrap;
      }
      .header_top .logo{
        min-width:0;
        width:100%;
        display:flex;
        justify-content:center;
        margin:8px 0;
      }
      .header_top .logo img{
        width:min(420px, 92vw) !important;
        max-width:92vw !important;
        height:auto !important;
      }

      .header_top_right{
        width:100%;
        align-items:center;
      }
      .header_top_right .search_box,
      .header_top_right .tcs-top-tabs{
        max-width:600px;
      }
      .header_top_right .tcs-top-tabs{
        justify-content:center;
      }
    }