/* ============================================================
   ASEMKATOYS — Public Frontend Stylesheet
   Class prefix: ask-
   ============================================================ */

:root {
   --size-max-width: 1200px;
   --size-navbar-height: 72px;
   --size-hero-strip-height: 36px;
   --size-section-padding: 40px;
   --size-section-padding-side: 60px;
   --footer-info-height-mobile: 530px;
   --max-width-content: 1366px;
   --size-border-radius: 16px;

   /* Brand palette */
   --ask-primary: #F5A623;
   --ask-primary-dark: #D4720A;
   --ask-secondary: #FFD166;
   --ask-accent: #C96810;
   --ask-accent-light: #F5C875;
   --ask-pink: #F4836A;
   --ask-blue: #5BA4CF;
   --ask-green: #7DC77A;
   --ask-bg: #FFF8EF;
   --ask-card-bg: #ffffff;
   --ask-text: #2A1200;
   --ask-text-muted: #9B7040;
   --ask-navbar-bg: #2A1200;
   --ask-shadow: 0 4px 20px rgba(245, 166, 35, 0.12);
   --ask-shadow-hover: 0 8px 32px rgba(245, 166, 35, 0.30);
   --ask-radius: 18px;
   --ask-radius-sm: 10px;
}

@font-face {
   font-family: ask-font;
   font-display: swap;
   src: url("../../gemstone_core/font/Montserrat-Regular.ttf");
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: ask-font, "Gill Sans", sans-serif;
   font-size: 12px;
   transition: all 0.3s ease;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   text-wrap: wrap;
   object-fit: contain;
}

body {
   background-color: var(--ask-bg);
   color: var(--ask-text);
}

a:link,
a:active,
a:hover,
a:visited {
   text-decoration: none;
}

ul {
   list-style: none;
}

.bold {
   font-weight: 800;
   color: var(--ask-accent);
}

/* ============================================================
   UTILITIES
   ============================================================ */

.ask-line-decorator {
   width: 50px;
   height: 3px;
   border: none;
   border-radius: 2px;
}

.ask-line-decorator.black {
   background-color: var(--ask-secondary);
}

.ask-line-decorator.side {
   margin-top: 10px;
}

.ask-icon {
   justify-self: center;
   color: var(--ask-secondary);
}

/* ============================================================
   CAROUSEL NAVIGATION BUTTONS
   ============================================================ */

.ask-btn-group {
   display: flex;
   gap: 12px;
}

.ask-btn-nav {
   display: flex;
   justify-content: center;
   align-items: center;
   align-self: center;
   padding: 5px;
   background: linear-gradient(135deg, var(--ask-primary), var(--ask-pink));
   width: 34px;
   height: 34px;
   border-radius: 50%;
   cursor: pointer;
   box-shadow: 0 2px 8px rgba(245, 166, 35, 0.35);
   transition: transform 0.2s, box-shadow 0.2s;
}

.ask-btn-nav:hover {
   transform: scale(1.12);
   box-shadow: 0 4px 14px rgba(245, 166, 35, 0.50);
}

.ask-btn {
   display: block;
   width: 15px;
   height: 15px;
   background-size: contain;
}

.ask-btn.prev {
   background-image: url("../image/prev.webp");
}

.ask-btn.next {
   background-image: url("../image/next.webp");
}

/* ============================================================
   BASE SECTION / WRAPPER
   ============================================================ */

.ask-section {
   display: grid;
   width: 100%;
}

.ask-wrapper {
   display: grid;
   margin: 0 auto;
   max-width: var(--size-max-width);
   width: 100%;
   padding: var(--size-section-padding) 30px;
   position: relative;
   overflow-x: hidden;
}

/* ============================================================
   NAVBAR
   ============================================================ */

.ask-section.navbar {
   position: fixed;
   background: linear-gradient(90deg, var(--ask-navbar-bg) 0%, #5C2A00 100%);
   height: var(--size-navbar-height);
   color: var(--ask-bg);
   z-index: 1000;
   box-shadow: 0 2px 16px rgba(42, 18, 0, 0.30);
}

.ask-wrapper.navbar {
   padding: 0 28px;
}

.ask-navbar-container {
   display: grid;
   align-items: center;
   height: var(--size-navbar-height);
   grid-template-columns: auto 1fr;
   gap: 28px;
}

.ask-navbar-logo-wrap {
   justify-self: left;
   padding: 8px;
   width: var(--size-navbar-height);
   height: var(--size-navbar-height);
}

.ask-navbar-logo {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.ask-navbar-trigger {
   display: none;
}

.ask-navbar-menu {
   display: flex;
   align-items: center;
   gap: 40px;
   width: fit-content;
}

.ask-navbar-menu-link {
   color: var(--ask-bg);
   font-size: 1.4rem;
}

/* ============================================================
   HERO STRIP (scrolling announcement below navbar)
   ============================================================ */

.ask-hero-strip {
   position: fixed;
   top: var(--size-navbar-height);
   left: 0;
   width: 100%;
   z-index: 990;
   background: linear-gradient(90deg, var(--ask-primary) 0%, var(--ask-pink) 50%, var(--ask-secondary) 100%);
   overflow: hidden;
}

.ask-hero-strip-inner {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 18px;
   padding: 7px 20px;
   white-space: nowrap;
   animation: askScrollBanner 18s linear infinite;
}

.ask-hero-tagline {
   font-size: 1.3rem;
   font-weight: 700;
   color: #fff;
   letter-spacing: 0.5px;
}

.ask-hero-badge {
   font-size: 1.6rem;
   line-height: 1;
}

@keyframes askScrollBanner {
   0% {
      transform: translateX(0%);
   }

   100% {
      transform: translateX(-10%);
   }
}

/* ============================================================
   SEARCH BAR
   ============================================================ */

.ask-search-bar {
   display: flex;
   align-items: center;
   box-shadow: 0 0 0 2px var(--ask-accent-light);
   border-radius: 30px;
   width: 100%;
   font-size: 1.2rem;
   color: var(--ask-text-muted);
   background-color: #ffffff;
   overflow: hidden;
}

.ask-search-input {
   padding: 10px 18px;
   background: none;
   border: none;
   width: 100%;
   outline: none;
   line-height: 1rem;
   font-size: 1rem;
   color: var(--ask-text);
}

.ask-search-input::placeholder {
   color: var(--ask-text-muted);
   font-weight: 600;
   font-size: 1rem;
}

.ask-search-icon {
   width: 20px;
   height: 20px;
   margin: 0 16px;
   cursor: pointer;
}

/* ============================================================
   PRODUCT CATALOG — Home Page
   ============================================================ */

.ask-wrapper.product {
   padding: 0 28px 48px;
   background-color: var(--ask-bg);
   margin-top: calc(var(--size-navbar-height) + var(--size-hero-strip-height)) !important;
}

/* Page intro header */
.ask-page-intro {
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: linear-gradient(130deg, #FFF8EF 0%, #FFF3DC 60%, #FFF0D0 100%);
   border-radius: 20px;
   padding: 28px 36px;
   border: 2px solid #FFD9A0;
   gap: 20px;
}

.ask-page-intro-text {
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.ask-page-intro-title {
   font-size: 2.8rem;
   font-weight: 800;
   color: var(--ask-accent);
   letter-spacing: 1px;
}

.ask-page-intro-subtitle {
   font-size: 1.4rem;
   color: var(--ask-text-muted);
}

/* Catalog grid */
.ask-catalog-grid {
   display: grid;
   gap: 32px;
   overflow: hidden;
   min-width: 0;
   min-height: 0;
}

/* Category block */
.ask-catalog-category {
   display: flex;
   gap: 14px;
   min-height: 0;
   min-width: 0;
   flex-direction: column;
   background: #fff;
   border-radius: 20px;
   padding: 24px 20px 28px;
   box-shadow: 0 2px 12px rgba(201, 104, 16, 0.08);
   border: 1.5px solid #FFE5B4;
   overflow: visible;
}

.ask-category-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 20px;
}

.ask-category-title {
   font-size: 2.4rem;
   font-weight: 800;
   width: fit-content;
   letter-spacing: 1px;
   color: var(--ask-text);
   position: relative;
   padding-bottom: 6px;
}

.ask-category-title::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   width: 50px;
   height: 4px;
   background: linear-gradient(90deg, var(--ask-primary), var(--ask-secondary));
   border-radius: 4px;
}

/* Product card */
.ask-product-card {
   position: relative;
   border: none;
   padding: 0;
   width: 220px;
   min-height: 320px;
   margin: 0 auto;
   border-radius: var(--ask-radius);
   background: var(--ask-card-bg);
   box-shadow: var(--ask-shadow);
   overflow: hidden;
   cursor: pointer;
   transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ask-product-card:hover {
   background-color: var(--ask-card-bg);
   transform: translateY(-8px);
   box-shadow: var(--ask-shadow-hover);
}

.ask-product-card-img {
   display: block;
   width: calc(100% - 20px);
   height: 185px;
   margin: 10px 10px 0;
   border-radius: var(--ask-radius-sm);
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
   background-color: var(--ask-bg);
}

.ask-product-card-body {
   display: flex;
   flex-direction: column;
   gap: 8px;
   padding: 14px 14px 16px;
}

.ask-product-card-name {
   font-size: 1.3rem;
   font-weight: 700;
   color: var(--ask-text);
   margin-top: 0;
   line-height: 1.4;
}

.ask-product-card-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: fit-content;
   height: 30px;
   padding: 0 16px;
   font-size: 1.1rem;
   font-weight: 700;
   color: #fff;
   background: linear-gradient(90deg, var(--ask-primary), var(--ask-pink));
   border-radius: 20px;
   margin-top: 6px;
   cursor: pointer;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   transition: opacity 0.2s;
}

.ask-product-card-btn:hover {
   opacity: 0.88;
}

/* Owl carousel overrides */
.owl-dots {
   position: absolute;
   z-index: 200;
   bottom: 10px;
   left: 0;
   right: 0;
}

.ask-product-carousel {
   padding-bottom: 12px;
   overflow: visible !important;
}

.ask-product-carousel .owl-stage-outer {
   overflow: visible !important;
   padding-bottom: 12px;
}

/* Empty state */
.ask-empty-msg {
   font-size: 1.6rem;
   text-align: center;
   color: var(--ask-text-muted);
   padding: 30px 0;
}

/* ============================================================
   PRODUCT DETAIL PAGE
   ============================================================ */

.ask-page-wrapper {
   background-color: var(--ask-bg);
   min-height: calc(100vh - var(--footer-info-height-mobile));
   padding-top: calc(var(--size-navbar-height) + var(--size-hero-strip-height));
}

.ask-page-container {
   margin: 0 auto;
   max-width: var(--max-width-content);
   width: 100%;
   display: grid;
   padding: var(--size-section-padding) var(--size-section-padding-side);
   gap: var(--size-section-padding);
   position: relative;
   overflow-x: hidden;
}

.ask-detail-section {
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 36px;
   align-items: stretch;
   letter-spacing: 1px;
   max-width: calc(var(--max-width-content) - (var(--size-section-padding-side) * 2));
   overflow: hidden;
   padding: 8px;
}

/* Breadcrumb */
.ask-breadcrumb {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 4px 0 8px;
}

.ask-breadcrumb-link {
   font-size: 1.2rem;
   color: var(--ask-accent);
   font-weight: 700;
   text-decoration: none;
}

.ask-breadcrumb-link:hover {
   text-decoration: underline;
}

.ask-breadcrumb-sep {
   font-size: 1.4rem;
   color: var(--ask-text-muted);
}

.ask-breadcrumb-current {
   font-size: 1.2rem;
   color: var(--ask-text-muted);
}

/* Detail card */
.ask-detail-card {
   display: grid;
   grid-template: 1fr / 2fr 3fr;
   gap: 40px;
   background: #fff;
   border-radius: 24px;
   box-shadow: var(--ask-shadow);
   overflow: hidden;
   padding: 0;
}

.ask-detail-img-wrap {
   display: flex;
   flex-direction: column;
   gap: 0;
   overflow: hidden;
   background: linear-gradient(135deg, #FFF8EF 0%, #FFF3DC 100%);
   align-items: center;
   justify-content: center;
   min-height: 380px;
   padding: 24px;
}

.ask-detail-img {
   width: 100%;
   max-width: 380px;
   height: 380px;
   object-fit: contain;
   border-radius: 16px;
   margin: 0;
   filter: drop-shadow(0 8px 24px rgba(245, 166, 35, 0.22));
}

.ask-detail-content {
   display: flex;
   flex-direction: column;
   gap: 20px;
   padding: 36px 36px 36px 8px;
   justify-content: center;
}

/* Badges */
.ask-product-badges {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
}

.ask-badge {
   display: inline-flex;
   align-items: center;
   height: 26px;
   padding: 0 14px;
   border-radius: 30px;
   font-size: 1.1rem;
   font-weight: 700;
   letter-spacing: 0.3px;
}

.ask-badge.category {
   background: linear-gradient(90deg, var(--ask-accent), var(--ask-blue));
   color: #fff;
}

.ask-badge.wholesale {
   background: linear-gradient(90deg, var(--ask-primary), var(--ask-secondary));
   color: #fff;
}

/* Product name */
.ask-detail-name {
   font-size: 2.4rem;
   font-weight: 800;
   color: var(--ask-text);
   line-height: 1.25;
}

/* Spec table */
.ask-detail-specs {
   display: flex;
   flex-direction: column;
   gap: 14px;
   background: #FFF8EC;
   border-radius: var(--ask-radius-sm);
   padding: 18px;
}

.ask-detail-section-label {
   font-size: 1.1rem;
   color: var(--ask-text-muted);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
}

.ask-detail-specs-grid {
   display: grid;
   grid-template: auto / 1fr 1fr;
   gap: 10px 24px;
}

.ask-detail-spec-row {
   display: grid;
   grid-template: 1fr / 1fr 1fr;
   align-items: center;
   gap: 4px;
}

.ask-detail-spec-label {
   font-size: 1.2rem;
   color: var(--ask-text);
}

/* Price */
.ask-detail-footer {
   display: flex;
   align-items: center;
   gap: 20px;
   margin-top: 4px;
}

.ask-price-box {
   display: flex;
   flex-direction: column;
   gap: 4px;
   background: linear-gradient(90deg, #FFF8EF, #FFF3DC);
   border-radius: var(--ask-radius-sm);
   padding: 14px 22px;
   flex: 1;
}

.ask-price-amount {
   font-size: 2.4rem;
   font-weight: 800;
   background: linear-gradient(90deg, var(--ask-primary), var(--ask-pink));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.ask-price-unit {
   font-size: 1.4rem;
   font-weight: 400;
   color: var(--ask-text-muted);
   -webkit-text-fill-color: var(--ask-text-muted);
}

/* Info note */
.ask-info-note {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   background: #FFF3DC;
   border-left: 4px solid var(--ask-secondary);
   border-radius: 8px;
   padding: 12px 16px;
   font-size: 1.2rem;
   color: #6B4500;
   margin-top: 6px;
}

.ask-info-note i {
   color: var(--ask-primary);
   font-size: 1.4rem;
   margin-top: 1px;
}

/* ============================================================
   FOOTER
   ============================================================ */

.ask-section.footer {
   background: linear-gradient(135deg, var(--ask-navbar-bg) 0%, #5C2A00 100%);
   color: #fff;
}

.ask-wrapper.footer {
   padding: var(--size-section-padding) 30px 60px;
}

.ask-footer-heading {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 40px 48px;
}

.ask-footer-title {
   font-size: 2.8rem;
   font-weight: 800;
   color: #fff;
   letter-spacing: 2px;
   text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.ask-footer-caption-wrap {
   display: flex;
   gap: 16px;
   width: 45%;
}

.ask-footer-caption {
   font-size: 1.3rem;
   width: 100%;
   color: rgba(255, 255, 255, 0.8);
   line-height: 1.6;
}

.ask-footer-grid {
   display: grid;
   grid-template: 1fr / 3fr 4fr 3fr;
   gap: 20px;
}

.ask-footer-logo-wrap {
   justify-self: center;
   display: flex;
   align-items: center;
}

.ask-footer-logo {
   height: 120px;
   width: fit-content;
}

.ask-footer-address {
   display: flex;
   flex-direction: column;
   gap: 16px;
   padding: 0 20px;
}

.ask-footer-address-row {
   display: grid;
   grid-template: 1fr / 1fr 9fr;
   gap: 20px;
   align-items: start;
}

.ask-footer-address-name {
   font-size: 1.8rem;
   font-weight: 800;
   color: var(--ask-secondary);
}

.ask-footer-address-text {
   font-size: 1.2rem;
   color: rgba(255, 255, 255, 0.8);
   line-height: 1.6;
}

.ask-footer-social {
   display: flex;
   flex-direction: column;
   gap: 16px;
   padding: 0 20px;
}

.ask-footer-social-title {
   font-size: 1.5rem;
   font-weight: 800;
   color: #fff;
   letter-spacing: 1px;
}

.ask-footer-social-links {
   display: flex;
   justify-content: flex-start;
   gap: 16px;
   flex-wrap: wrap;
}

.ask-footer-social-icon {
   width: 36px;
   height: 36px;
   filter: brightness(0) invert(1);
   opacity: 0.85;
   transition: opacity 0.2s, transform 0.2s;
}

.ask-footer-social-icon:hover {
   opacity: 1;
   transform: scale(1.15);
}

.ask-footer-copyright {
   margin-top: 36px;
   padding-top: 20px;
   border-top: 1px solid rgba(255, 255, 255, 0.15);
   text-align: center;
}

.ask-footer-copyright p {
   font-size: 1.2rem;
   color: rgba(255, 255, 255, 0.55);
}

/* ============================================================
   RESPONSIVE — max-width: 855px
   ============================================================ */

@media screen and (max-width: 855px) {
   .ask-line-decorator {
      display: none;
   }

   .ask-wrapper.product {
      padding: 0 40px 30px;
   }

   .ask-navbar-container {
      grid-template: 1fr / 20% 80%;
      gap: 10px;
   }

   .ask-navbar-trigger {
      background-image: url("../image/arc_asset/menu-icon.webp");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      display: block;
      width: 30px;
      height: 30px;
   }

   .ask-navbar-menu {
      position: fixed;
      display: flex;
      flex-direction: column;
      background-color: var(--ask-navbar-bg);
      width: 30%;
      left: 0;
      top: var(--size-navbar-height);
      height: 100vh;
      gap: 40px;
      margin: 0;
      padding: 40px;
      align-items: flex-start;
      transform: translate3d(-100%, 0, 0);
   }

   .ask-navbar-menu.expanded {
      transform: translate3d(0, 0, 0);
   }

   .ask-hero-tagline {
      font-size: 1.1rem;
   }

   .ask-page-intro {
      padding: 20px;
      border-radius: 14px;
   }

   .ask-page-intro-title {
      font-size: 2rem;
   }

   .ask-page-intro-subtitle {
      font-size: 1.2rem;
   }

   .ask-category-title {
      font-size: 1.8rem;
   }

   .ask-detail-card {
      grid-template: auto / 1fr;
   }

   .ask-detail-img-wrap {
      min-height: 280px;
      padding: 20px;
   }

   .ask-detail-content {
      padding: 20px;
   }

   .ask-detail-name {
      font-size: 1.8rem;
   }

   .ask-price-amount {
      font-size: 1.8rem;
   }

   .ask-footer-grid {
      grid-template: auto / 1fr 1fr;
      gap: 24px;
   }

   .ask-footer-logo-wrap {
      grid-column: 1 / -1;
      justify-self: center;
   }

   .ask-footer-social-title {
      display: none;
   }
}

/* ============================================================
   RESPONSIVE — max-width: 540px
   ============================================================ */

@media screen and (max-width: 540px) {
   .ask-navbar-menu {
      width: 50%;
   }

   .ask-hero-strip-inner {
      justify-content: flex-start;
      animation: askScrollBanner 10s linear infinite;
   }

   .ask-hero-tagline {
      font-size: 1rem;
   }

   .ask-page-intro {
      padding: 16px;
      border-radius: 12px;
      gap: 10px;
   }

   .ask-page-intro-title {
      font-size: 1.6rem;
   }

   .ask-product-badges {
      gap: 6px;
   }

   .ask-product-card {
      width: 180px;
      min-height: 280px;
   }

   .ask-product-card-img {
      height: 155px;
   }

   .ask-detail-img {
      height: 260px;
   }

   .ask-detail-specs-grid {
      grid-template: auto / 1fr;
   }

   .ask-price-amount {
      font-size: 1.6rem;
   }

   .ask-footer-grid {
      grid-template: auto / 1fr;
   }

   .ask-footer-logo-wrap {
      grid-column: auto;
   }

   .ask-footer-heading {
      flex-direction: column;
      gap: 16px;
      padding: 0 0 20px;
      text-align: center;
   }

   .ask-footer-caption-wrap {
      width: 100%;
   }

   .ask-footer-address-name {
      text-align: center;
   }

   .ask-footer-social-title {
      display: block;
      text-align: center;
   }

   .ask-wrapper.product {
      padding: 0 16px 28px;
   }
}

/* ============================================================
   RESPONSIVE — max-width: 430px
   ============================================================ */

@media screen and (max-width: 430px) {
   :root {
      --size-section-padding: 30px;
   }

   .ask-page-intro-title {
      font-size: 1.4rem;
   }

   .ask-page-intro-subtitle {
      font-size: 1.1rem;
   }

   .ask-product-card {
      width: 160px;
      min-height: 260px;
   }

   .ask-product-card-img {
      height: 135px;
   }

   .ask-product-card-name {
      font-size: 1.1rem;
   }

   .ask-category-title {
      font-size: 1.5rem;
   }

   .ask-detail-img {
      height: 220px;
   }

   .ask-detail-name {
      font-size: 1.5rem;
   }

   .ask-breadcrumb {
      flex-wrap: wrap;
   }

   .ask-info-note {
      font-size: 1.1rem;
   }
}

/* ============================================================
   RESPONSIVE — max-width: 390px
   ============================================================ */

@media screen and (max-width: 390px) {
   .ask-category-header {
      flex-direction: column;
      align-items: center;
   }

   .ask-category-title {
      text-align: center;
   }
}