@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;700;800;900&family=Karla:ital,wght@0,200..800;1,200..800&display=swap');

/*=======================*/
/* GLOBAL */
/*=======================*/
:root {
  --page-bg: #fff;
  --content-bg:#fff;
  --primary: #79b225;
  --accent: #1e90ff;
  --border-color:#f7f7f7;
  --font-primary: "Karla", sans-serif;
  --font-other:  "Kanit", sans-serif;
  --text-md:24px;
  --text-size:16px;
  --text-primary: black;
  --text-muted: grey;
  --max-width: 1200px;
  --header-padding:50px;
  --large-padding:32px;
  --med-padding:26px;
  --small-padding:10px;
  --header-icon:50px;
  --border-radius: 10px;
  --shadow-lg: 0px 0px 25px -6px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0px 0px 25px -6px rgba(0, 0, 0, 0.06);
}


/*=======================*/
/* CONTENT */
/*=======================*/
body {background: var(--page-bg);font-family:var(--font-primary);margin:0;font-size:var(--text-size);}
h1, .h1, h2, .h2, h3, .h3, .header .logo span {color: var(--text-primary);font-family:var(--font-other);font-weight:800;}
p {margin: 0px;}
#view .container:after, #view .container:before {display: none;}
#view .container{width:100%;max-width:calc(var(--max-width) - var(--large-padding) * 2);padding:0 var(--large-padding);}
#view {color: var(--text-muted);display: flex;flex-direction: column;min-height: 100vh;position: relative;}
.body .sidebar {display: none !important;}
.body .content {padding: 0px;flex: 1;}
.body:after,.body:before {display: none;}
.body {margin: 0px;display: flex;flex-direction:column;gap:25px;}
.panel.panel-default {background: var(--content-bg);border-radius: var(--border-radius);border:none !important;}
.panel .panel-heading {background: transparent !important;font-family: var(--font-other);font-weight:800;padding:calc(var(--large-padding) - 8px) var(--large-padding);font-size:var(--text-md);display: flex;align-items: center;border-bottom-width:2px;}
.panel .panel-body {padding: var(--large-padding);}


/*=======================*/
/* SALE BANNER           */
/*=======================*/
#sale {
    position:relative;
    background: var(--primary);
    text-align: center;
    padding: var(--large-padding);
    border-radius: var(--border-radius);
    margin-bottom: var(--large-padding);
    display: flex;
    align-items: center;
    box-shadow: var(--shadow-lg);
}
#sale h1, #sale p {margin: 0px;color: white;font-family:var(--font-other);}
#sale h1 {text-shadow: 2px 3px 0px #00000026;font-size: 32px;}
#sale #saleCountdownContainer {
    padding: 12px 20px;
    border-radius: 100px;
    margin-left: auto;
    min-width: 172px;
    font-weight: 700;
    border: 2px solid #ffffff40 !important;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    color: white;
}
#sale .alert-end {flex: 1;display: flex;}
#sale .alert-end .icon {width: 26px;display: flex;margin-right: 8px;}
#sale .alert-end #saleCountdown {text-transform: uppercase;font-size: 14px;letter-spacing: .5px;}
#sale .alert-image {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

/*=======================*/
/* MOBILE + DESKTOP      */
/*=======================*/
@media only screen and (max-width: 768px) {
    #view .container{padding:0 var(--med-padding);gap: var(--med-padding);}
    /* footer mobile handled in footer section */
    #sale {flex-direction: column;gap: 10px;overflow: hidden;}
}

/*=======================*/
/* HEADER                */
/*=======================*/
#head {padding: var(--header-padding) 0;}
#head .container {display: flex;align-items: center;justify-content: center;}
#head .container .left,#head .container .right {flex: 1;display: flex;align-items: center;}
#head .container .right {justify-content: flex-end;text-align: right;}
#head .container .right .icon {order: 5;}
#head .icon {line-height: 1;color: var(--primary);}
#head .icon svg path {fill:currentColor;}
#head .icon svg {width: var(--header-icon);}
#head .left .icon svg path {fill: transparent;stroke: currentColor;}
#head .player-wrap h2, #head .player-wrap p {margin: 0px;}
#head .player-wrap {color: inherit !important;text-decoration:none !important;cursor:pointer;display: flex;align-items: center;gap: 25px;}
#head .player-wrap p {font-size: 16px;font-weight: 600;}

/*=======================*/
/* FOOTER                */
/*=======================*/
#foot {
    margin-top: auto;
    background: linear-gradient(160deg, #fce4f0 0%, #fdeef6 50%, #fbd8ec 100%);
    color: #a85a7f;
    position: relative;
    overflow: hidden;
    border-top: 1px solid #f0c2da;
}
#foot::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top right, #ffbddc55 0%, transparent 60%),
                radial-gradient(ellipse at bottom left, #fccce844 0%, transparent 55%);
    pointer-events: none;
}
#foot .container {position: relative; z-index: 1;}

/* Main row: brand left, nav right */
#foot .foot-main {
    display: flex;
    gap: 60px;
    padding: 52px 0 36px;
    border-bottom: 1px solid #eeb8d4;
    align-items: flex-start;
}

/* Brand / logo block */
#foot .foot-brand {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 200px;
    max-width: 260px;
}
#foot .foot-logo {
    max-height: 80px;
    width: auto;
    object-fit: contain;
}
#foot .foot-tagline {
    font-size: 13px;
    line-height: 1.65;
    color: #b8728f;
    margin: 0;
}

/* Social icons */
#foot .foot-socials {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
#foot .foot-social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #ffffff66;
    border: 1px solid #e8a8cc;
    color: #a42e6d;
    font-size: 16px;
    text-decoration: none !important;
    transition: all .2s ease;
}
#foot .foot-social:hover {
    background: #fff;
    border-color: #d47aaf;
    color: #c4006a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px #f0a0cc44;
}

/* Nav columns */
#foot .foot-nav {
    display: flex;
    gap: 60px;
    margin-left: auto;
}
#foot .foot-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#foot .foot-col-title {
    font-family: var(--font-other);
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #a42e6d;
    margin-bottom: 4px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e8a8cc;
}
#foot .foot-col a {
    font-size: 14px;
    color: #b8728f;
    text-decoration: none !important;
    transition: color .15s ease;
}
#foot .foot-col a:hover {color: #a42e6d;}

/* Bottom bar */
#foot .foot-bottom {
    display: flex;
    align-items: center;
    padding: 20px 0 32px;
    font-size: 13px;
    color: #b8728f;
}
#foot .foot-bottom strong {color: #a42e6d;}
#foot .watermark {width: 44px; margin-left: auto; opacity: .18; transition: opacity .2s;}
#foot .watermark:hover {opacity: .4;}
#foot .watermark path {fill: #a42e6d;}

/* Mobile */
@media only screen and (max-width: 768px) {
    #foot .foot-main {flex-direction: column; gap: 32px; padding: 36px 0 28px;}
    #foot .foot-brand {max-width: 100%;}
    #foot .foot-nav {margin-left: 0; gap: 32px;}
    #foot .foot-bottom {flex-direction: column; align-items: flex-start; gap: 16px;}
    #foot .watermark {margin-left: 0;}
}



/* */
.wrapper--art:before {
    content: '';
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    background-color: inherit;
    mask-repeat: repeat-x;
    -webkit-mask-repeat: repeat-x;
    mask-position: bottom;
    -webkit-mask-position: bottom;
}
.blocky:before {
    -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="38.22" height="5.23" viewBox="0 0 38.22 5.23"><rect width="38.22" height="5.23" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="38.22" height="5.23" viewBox="0 0 38.22 5.23"><rect width="38.22" height="5.23" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 110px 8px;
    mask-size: 110px 8px;
    height: 8px;
    top: -8px;
}
.pointedSm:before {
    -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="110.128" height="8.291" viewBox="0 0 110.128 8.291"><polygon points="55.064 .658 0 8.291 55.064 8.291 110.128 8.291 55.064 .658" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="110.128" height="8.291" viewBox="0 0 110.128 8.291"><polygon points="55.064 .658 0 8.291 55.064 8.291 110.128 8.291 55.064 .658" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 110px 8px;
    mask-size: 110px 8px;
    height: 8px;
    top: -8px;
}
.pointed:before {
    -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="181.383" height="12.911" viewBox="0 0 181.383 12.911"><polygon points="90.691 0 0 12.911 90.691 12.911 181.383 12.911 90.691 0" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="181.383" height="12.911" viewBox="0 0 181.383 12.911"><polygon points="90.691 0 0 12.911 90.691 12.911 181.383 12.911 90.691 0" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 181px 12px;
    mask-size: 181px 12px;
    height: 12px;
    top: -12px;
}
.curveSm:before {
  -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="76" height="7.009" viewBox="0 0 76 7.009"><path d="m63.752,5.662c-6.966-1.487-10.52-3.518-18.55-4.82-3.048-.494-5.565-.692-7.202-.783-1.638.09-4.155.289-7.202.783-8.03,1.302-11.584,3.333-18.55,4.82C9.392,6.271,5.215,6.949,0,7.009h76c-5.215-.06-9.392-.738-12.248-1.348Z" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="76" height="7.009" viewBox="0 0 76 7.009"><path d="m63.752,5.662c-6.966-1.487-10.52-3.518-18.55-4.82-3.048-.494-5.565-.692-7.202-.783-1.638.09-4.155.289-7.202.783-8.03,1.302-11.584,3.333-18.55,4.82C9.392,6.271,5.215,6.949,0,7.009h76c-5.215-.06-9.392-.738-12.248-1.348Z" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 76px 7px;
    mask-size: 76px 7px;
    height: 7px;
    top: -7px;
}
.curve:before {
  -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="140.957" height="15.743" viewBox="0 0 140.957 15.743"><path d="m118.242,12.69c-12.92-3.368-19.511-7.969-34.405-10.917-5.652-1.119-10.321-1.568-13.358-1.773-3.038.205-7.706.654-13.358,1.773-14.894,2.948-21.485,7.549-34.405,10.917-5.296,1.381-13.044,2.916-22.715,3.053h140.957c-9.672-.137-17.42-1.672-22.716-3.053Z" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="140.957" height="15.743" viewBox="0 0 140.957 15.743"><path d="m118.242,12.69c-12.92-3.368-19.511-7.969-34.405-10.917-5.652-1.119-10.321-1.568-13.358-1.773-3.038.205-7.706.654-13.358,1.773-14.894,2.948-21.485,7.549-34.405,10.917-5.296,1.381-13.044,2.916-22.715,3.053h140.957c-9.672-.137-17.42-1.672-22.716-3.053Z" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 140px 15px;
    mask-size: 140px 15px;
    height: 15px;
    top: -15px;
}
.curveLg:before {
  -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="181.383" height="20.257" viewBox="0 0 181.383 20.257"><path d="m152.153,16.329c-16.626-4.334-25.107-10.254-44.272-14.048-7.273-1.44-13.28-2.018-17.189-2.281-3.909.264-9.916.842-17.189,2.281-19.165,3.794-27.647,9.714-44.272,14.048-6.815,1.777-16.785,3.752-29.23,3.928h181.383c-12.446-.176-22.415-2.151-29.23-3.928Z" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="181.383" height="20.257" viewBox="0 0 181.383 20.257"><path d="m152.153,16.329c-16.626-4.334-25.107-10.254-44.272-14.048-7.273-1.44-13.28-2.018-17.189-2.281-3.909.264-9.916.842-17.189,2.281-19.165,3.794-27.647,9.714-44.272,14.048-6.815,1.777-16.785,3.752-29.23,3.928h181.383c-12.446-.176-22.415-2.151-29.23-3.928Z" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 181px 20px;
    mask-size: 181px 20px;
    height: 20px;
    top: -20px;
}
.waveXs:before {
    -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="38.22" height="7.2" viewBox="0 0 38.22 7.2"><path d="m19.11,7.17C4.85,6.86,0,0,0,0v7.2h38.22V0s-4.85,6.86-19.11,7.17Z" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="38.22" height="7.2" viewBox="0 0 38.22 7.2"><path d="m19.11,7.17C4.85,6.86,0,0,0,0v7.2h38.22V0s-4.85,6.86-19.11,7.17Z" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 37px 7px;
    mask-size: 37px 7px;
    height: 7px;
    top: -7px;
}
.waveSm:before {
    -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="76" height="8.733" viewBox="0 0 76 8.733"><path d="m38,0h0s0,0,0,0h0C25.644,8.733,0,8.703,0,8.703v.029h76v-.029S50.356,8.733,38,0Z" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="76" height="8.733" viewBox="0 0 76 8.733"><path d="m38,0h0s0,0,0,0h0C25.644,8.733,0,8.703,0,8.703v.029h76v-.029S50.356,8.733,38,0Z" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 76px 8px;
    mask-size: 76px 8px;
    height: 8px;
    top: -8px;
}
.wave:before {
    -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="76" height="11.584" viewBox="0 0 76 11.584"><path d="m38.034.029v-.029c-.005.005-.011.01-.017.015-.005-.005-.011-.01-.017-.015v.029C25.631,11.583.034,11.56.034,11.56v.024h75.966v-.024s-25.598.023-37.966-11.531Z" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="76" height="11.584" viewBox="0 0 76 11.584"><path d="m38.034.029v-.029c-.005.005-.011.01-.017.015-.005-.005-.011-.01-.017-.015v.029C25.631,11.583.034,11.56.034,11.56v.024h75.966v-.024s-25.598.023-37.966-11.531Z" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 76px 11px;
    mask-size: 76px 11px;
    height: 11px;
    top: -11px;
}
.waveLg:before {
    -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="144" height="21.958" viewBox="0 0 144 21.958"><path d="m72.032.056v-.056c-.01.01-.022.018-.032.028-.01-.01-.021-.018-.032-.028v.056C62.241,21.316,0,21.913,0,21.913v.045h144v-.045S81.759,21.316,72.032.056Z" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="144" height="21.958" viewBox="0 0 144 21.958"><path d="m72.032.056v-.056c-.01.01-.022.018-.032.028-.01-.01-.021-.018-.032-.028v.056C62.241,21.316,0,21.913,0,21.913v.045h144v-.045S81.759,21.316,72.032.056Z" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 144px 21px;
    mask-size: 144px 21px;
    height: 21px;
    top: -21px;
}
.curveLg:before {
  -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="181.383" height="20.257" viewBox="0 0 181.383 20.257"><path d="m152.153,16.329c-16.626-4.334-25.107-10.254-44.272-14.048-7.273-1.44-13.28-2.018-17.189-2.281-3.909.264-9.916.842-17.189,2.281-19.165,3.794-27.647,9.714-44.272,14.048-6.815,1.777-16.785,3.752-29.23,3.928h181.383c-12.446-.176-22.415-2.151-29.23-3.928Z" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="181.383" height="20.257" viewBox="0 0 181.383 20.257"><path d="m152.153,16.329c-16.626-4.334-25.107-10.254-44.272-14.048-7.273-1.44-13.28-2.018-17.189-2.281-3.909.264-9.916.842-17.189,2.281-19.165,3.794-27.647,9.714-44.272,14.048-6.815,1.777-16.785,3.752-29.23,3.928h181.383c-12.446-.176-22.415-2.151-29.23-3.928Z" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 181px 20px;
    mask-size: 181px 20px;
    height: 20px;
    top: -20px;
}

/*=======================*/
/* RANK BADGES           */
/*=======================*/
.package {
    position: relative;
}

.rank-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
    white-space: nowrap;
    z-index: 10;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    color: #fff;
    font-family: var(--font-other);
}

.badge--most-popular {
    background: linear-gradient(135deg, #ab47bc, #6a1b9a);
}

.badge--best-value {
    background: linear-gradient(135deg, #f6d365, #f09819);
    color: #7a4500;
}

.btn-most-popular {
    background-color: #6a1b9a !important;
    border-color: #6a1b9a !important;
}

.btn-most-popular:hover {
    background-color: #4a148c !important;
    border-color: #4a148c !important;
}
.btn-most-bought:hover {
    background-color: #4a148c !important;
    border-color: #4a148c !important;
}