/* ============================================================
   Gaon Dry Fruits — Responsive Stylesheet
   All mobile/tablet responsive rules in one place.
   Breakpoints: 1080px, 860px, 760px, 640px, 420px, 360px
   ============================================================ */

/* ==================== UTILITY ==================== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
.table-wrap .table { min-width: 600px; }

/* modal size classes (replaces inline widths in HTML) */
.modal-qv  { width: min(860px, 100%); }
.modal-co  { width: min(920px, 100%); }
.modal-ok  { width: min(460px, 100%); }

/* shop page inline style replacements */
.shop-search-wrap  { flex: 1; min-width: 200px; position: relative; }
.shop-search-input { width: 100%; height: 44px; border: 1.5px solid var(--line); border-radius: 10px; padding: 0 14px; outline: none; font-size: .9rem; }
.shop-sort         { height: 44px; border: 1.5px solid var(--line); border-radius: 10px; padding: 0 12px; outline: none; background: #fff; font-size: .88rem; cursor: pointer; }

/* account page inline style replacements */
.acct-field label { display: block; font-size: .84rem; font-weight: 700; margin-bottom: 6px; }
.acct-field input { width: 100%; height: 46px; border: 1.5px solid var(--line); border-radius: 10px; padding: 0 14px; outline: none; font-size: .94rem; }
.acct-field input:focus { border-color: var(--green-500); box-shadow: 0 0 0 4px rgba(52,119,78,.12); }

/* ==================== 1080px — Tablet ==================== */
@media (max-width: 1080px) {
  .cats-grid     { grid-template-columns: repeat(3, 1fr); }
  .prod-grid     { grid-template-columns: repeat(3, 1fr); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid   { grid-template-columns: 1fr 1fr; }
  .about         { grid-template-columns: 1fr; gap: 40px; }
  .newsletter    { grid-template-columns: 1fr; }
  .deal          { grid-template-columns: 1fr; padding: 44px 30px; }
  .nav           { display: none; }
  .site-header .nav { display: none; }
  .hamburger     { display: grid; }
  .site-header .header-search { display: none !important; }
  #searchToggle { display: none !important; }
  /* logo leftmost on mobile only */
  .site-header .container.header-main {
    width: 100%; margin-inline: 0;
    padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px));
    justify-content: flex-start;
  }
  .header-main   { flex-wrap: nowrap; min-width: 0; justify-content: flex-start; }
  .logo         { min-width: 0; flex: 0 1 auto; margin-right: auto; justify-content: flex-start; margin-left: 0; }
  .logo .logo-mark { width: min(220px, 48vw); height: 72px; justify-content: flex-start; }
  .logo .logo-mark img { max-height: 72px; }
  .header-actions { flex: none; gap: 4px; margin-left: auto; }
  .hero-slider   { height: clamp(520px, 90vw, 640px); }
}

/* ==================== 860px — Small tablet ==================== */
@media (max-width: 860px) {
  .shop-layout     { grid-template-columns: 1fr; }

  /* side filters become a bottom-sheet drawer */
  .side-filters    {
    position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 220;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    max-height: 72vh; overflow-y: auto;
    transform: translateY(105%); transition: transform .38s cubic-bezier(.22,.9,.3,1);
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    box-shadow: var(--shadow-lg);
  }
  .side-filters.open { transform: none; }

  .cart-layout     { grid-template-columns: 1fr; }
  .summary-card    { position: static; }

  .checkout-layout { grid-template-columns: 1fr; }

  .account-layout  { grid-template-columns: 1fr; }
  .acct-nav        { position: static; display: flex; flex-wrap: wrap; gap: 6px; }
}

/* ==================== 760px — Mobile landscape ==================== */
@media (max-width: 760px) {
  .offer-modal { grid-template-columns: 1fr; width: min(94vw, 440px); }
  .offer-art { min-height: 145px; }
  .offer-art img { min-height: 145px; max-height: 190px; object-position: center 58%; }
  .offer-copy { padding: 28px 22px 24px; }
  .offer-copy h2 { font-size: 1.9rem; }

  /* hero — hide slider arrows on mobile, keep on desktop */
  .hero-slider     { height: 420px; }
  .hero-nav        { display: none !important; }
  .testi-arrow     { display: none !important; }
  .slide .content  { padding: 20px 0; max-width: 100%; }
  .slide .content h1 { font-size: clamp(1.6rem, 6vw, 2.4rem); }
  .slide .content p  { font-size: .95rem; }
  .hero-scroll     { display: none; }

  /* grids */
  .prod-grid       { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .cats-grid       { grid-template-columns: repeat(2, 1fr); }
  .stats-row       { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .features-grid   { grid-template-columns: 1fr; }
  .footer-grid     { grid-template-columns: 1fr; gap: 30px; }

  /* sections */
  .section         { padding: 52px 0; }
  .section-head    { margin-bottom: 32px; }

  /* about */
  .about           { gap: 28px; }
  .about .media .float-card.f1 { left: 8px; top: 14px; }
  .about .media .float-card.f2 { right: 8px; bottom: 14px; }
  .about .media .float-card    { padding: 10px 14px; gap: 8px; }
  .about .media .float-card .fico { width: 36px; height: 36px; }
  .about .media .float-card .fico svg { width: 18px; height: 18px; }
  .about .ticks    { grid-template-columns: 1fr; }

  /* deal */
  .deal            { padding: 32px 20px; border-radius: 18px; margin: 24px 0; }
  .deal .deal-img  { transform: none; }
  .deal .deal-img:hover { transform: scale(1.02); }
  .countdown       { gap: 8px; }
  .countdown .unit { min-width: 62px; padding: 8px 10px; }
  .countdown .unit b { font-size: 1.25rem; }

  /* modals */
  .checkout-grid   { grid-template-columns: 1fr; }
  .qv-grid         { grid-template-columns: 1fr; }
  .modal-qv        { width: min(95vw, 100%); }
  .modal-co        { width: min(95vw, 100%); }
  .modal-ok        { width: min(95vw, 100%); }

  /* header - logo leftmost */
  .site-header .container.header-main {
    width: 100%; margin-inline: 0;
    padding-inline: max(10px, env(safe-area-inset-left, 0px)) max(10px, env(safe-area-inset-right, 0px));
  }
  .header-main { justify-content: flex-start; }
  .logo { margin-right: auto; margin-left: 0; justify-content: flex-start; }
  .logo .logo-mark { justify-content: flex-start; }
  .user-chip .name { display: none; }
  .shop-right      { margin-left: 0; width: 100%; }
  .search-box      { flex: 1; min-width: 0; }
  .shop-toolbar    { gap: 10px; }

  /* newsletter */
  .newsletter      { padding: 32px 24px; gap: 24px; }
  .newsletter form { flex-direction: column; }
  .newsletter input { height: 48px; }
  .newsletter .btn { width: 100%; }

  /* footer */
  .footer-bottom   { justify-content: center; text-align: center; }
  .footer-bottom .pay { justify-content: center; flex-wrap: wrap; }

  /* product detail */
  .pd-grid         { grid-template-columns: 1fr; gap: 24px; }

  /* tables */
  .table-wrap      { border: 1px solid var(--line); border-radius: var(--radius-sm); }

  /* toast */
  .toast           { font-size: .82rem; padding: 11px 18px; }

  /* stats */
  .stat b          { font-size: 1.5rem; }
  .stat            { padding: 18px 10px; }
}

/* ==================== 640px — Mobile portrait ==================== */
@media (max-width: 640px) {
  .grid-2col        { grid-template-columns: 1fr; }
  .cart-line        { grid-template-columns: 70px 1fr; }
  .cart-line .rm    { grid-column: 1 / -1; }
  .panel            { padding: 18px; }

  .hero-slider      { height: 380px; }
  .slide .content h1 { font-size: clamp(1.4rem, 5.5vw, 2rem); }
  .slide .content p  { font-size: .88rem; }
  .slide .tag       { font-size: .7rem; padding: 5px 12px; margin-bottom: 12px; }

  .prod-info        { padding: 12px; }
  .prod-info h3     { font-size: .88rem; min-height: 3.4em; }
  .prod-card .add-btn { padding: 8px; font-size: .8rem; }
  .prod-card .qa-btn  { width: 34px; height: 34px; }
  .prod-card .qa-btn svg { width: 16px; height: 16px; }

  .cat-card .cap h4 { font-size: .88rem; }
  .cat-card .cap small { font-size: .7rem; }
  .cat-card .cap .arrow { display: none; }

  .about .media .float-card { display: none; }
  .about .copy h2 { font-size: clamp(1.4rem, 5vw, 1.8rem); }

  .deal h2         { font-size: clamp(1.3rem, 5vw, 1.8rem); }
  .deal .price-line .now { font-size: 1.5rem; }

  .newsletter h2   { font-size: clamp(1.2rem, 4.5vw, 1.6rem); }

  .testi-card .inner { padding: 24px 20px; border-radius: 16px; }
  .testi-card p     { font-size: .92rem; }

  .section-head h2  { font-size: clamp(1.4rem, 5vw, 2rem); }

  .modal            { border-radius: 18px; }
  .modal .modal-head { padding: 16px 18px 0; }
  .modal .modal-body { padding: 16px 18px 22px; }

  .drawer           { width: min(360px, 92%); }

  .auth-card        { padding: 24px; }
  .auth-card h1     { font-size: 1.3rem; }

  .pd-info h1       { font-size: clamp(1.3rem, 4vw, 1.7rem); }
  .pd-meta          { gap: 10px; }
  .pd-actions       { gap: 8px; }
  .pd-actions .btn  { flex: 1; }

  .page-hero        { padding: 32px 0; }
  .page-hero h1     { font-size: clamp(1.3rem, 4vw, 1.8rem); }
  .wrap             { padding: 28px 0 50px; }

  .topbar           { font-size: .75rem; padding: 6px 12px; }

  .checkout-layout .panel { padding: 18px; }
  .pay-opt          { padding: 11px 12px; }
}

/* ==================== 420px — Small mobile ==================== */
@media (max-width: 420px) {
  .prod-grid        { grid-template-columns: 1fr 1fr; gap: 10px; }
  .prod-info        { padding: 10px; }
  .prod-info h3     { font-size: .82rem; min-height: 3em; }
  .prod-info .weight { font-size: .72rem; }
  .price-row .now   { font-size: 1rem; }
  .price-row .was   { font-size: .78rem; }
  .prod-card .add-btn { font-size: .76rem; padding: 7px 6px; gap: 4px; }
  .prod-card .add-btn svg { width: 14px; height: 14px; }

  .cats-grid        { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  .countdown .unit  { min-width: 56px; padding: 6px 8px; border-radius: 10px; }
  .countdown .unit b { font-size: 1.1rem; }
  .countdown .unit span { font-size: .6rem; }
  .countdown        { gap: 6px; }

  .deal .price-line .now { font-size: 1.3rem; }
  .deal .price-line .was { font-size: .9rem; }

  .hero-slider      { height: 340px; }
  .hero-dots        { bottom: 16px; }

  .features-grid    { gap: 12px; }
  .feature          { padding: 18px 16px; gap: 12px; }
  .feature .ico     { width: 44px; height: 44px; border-radius: 12px; }
  .feature .ico svg { width: 22px; height: 22px; }
  .feature h4       { font-size: .9rem; }
  .feature p        { font-size: .78rem; }

  .stats-row        { gap: 8px; }
  .stat             { padding: 14px 8px; border-radius: 12px; }
  .stat b           { font-size: 1.25rem; }
  .stat span        { font-size: .72rem; }

  .footer-grid      { gap: 24px; padding: 40px 0 28px; }
  .footer-grid h4   { font-size: .92rem; }

  .newsletter       { padding: 28px 18px; border-radius: 16px; }

  .testi-card .inner { padding: 20px 16px; }
  .testi-card .quote-mark { font-size: 2.4rem; }
  .testi-card .who .ava { width: 38px; height: 38px; font-size: .85rem; }

  .drawer           { width: min(320px, 92%); }
  .drawer-head      { padding: 16px 18px; }
  .drawer-body      { padding: 14px 18px; }
  .drawer-foot      { padding: 14px 18px 16px; }
  .cart-item img    { width: 60px; height: 60px; border-radius: 10px; }
  .cart-item .meta h4 { font-size: .84rem; }

  .mobile-menu .sheet { width: min(280px, 86%); padding: 18px; }

  .to-top           { width: 42px; height: 42px; right: 16px; bottom: 16px; border-radius: 12px; }

  .modal-head h3    { font-size: 1.1rem; }

  .auth-card        { padding: 20px; border-radius: 14px; }

  .shop-toolbar     { flex-direction: column; align-items: stretch; }
  .tabs             { justify-content: center; }
  .tab              { padding: 8px 16px; font-size: .82rem; }
}

/* ==================== 360px — Very small mobile ==================== */
@media (max-width: 360px) {
  .container        { width: 94%; }
  .site-header .container.header-main {
    width: 100%; margin-inline: 0;
    padding-inline: max(8px, env(safe-area-inset-left, 0px)) max(8px, env(safe-area-inset-right, 0px));
  }
  .prod-grid        { grid-template-columns: 1fr; gap: 14px; }
  .cats-grid        { grid-template-columns: 1fr; }
  .stats-row        { grid-template-columns: 1fr; }

  .hero-slider      { height: 300px; }
  .slide .content h1 { font-size: 1.3rem; }
  .slide .content p  { font-size: .82rem; }
  .slide .cta .btn  { padding: 10px 18px; font-size: .85rem; }

  .prod-card .qa-btn { opacity: 1; transform: none; }

  .about .copy h2   { font-size: 1.3rem; }

  .deal             { padding: 24px 16px; }
  .deal h2          { font-size: 1.2rem; }
  .deal p           { font-size: .85rem; }

  .section          { padding: 40px 0; }
  .section-head     { margin-bottom: 24px; }

  .auth-card        { width: 100%; padding: 18px; }

  .shop-layout      { gap: 16px; }
  .side-filters     { gap: 6px; }
  .side-filters .cat-btn { padding: 7px 10px; font-size: .82rem; }

   .header-inner     { gap: 12px; }
   .header-main      { gap: 6px; padding: 8px 0; justify-content: flex-start; }
   .logo             { min-width: 0; max-width: calc(100% - 126px); flex: 0 1 auto; font-size: 1.1rem; justify-content: flex-start; margin-left: 0; margin-right: auto; }
   .logo .logo-mark  { width: clamp(130px, 40vw, 180px); height: 62px; justify-content: flex-start; }
   .logo .logo-mark img { width: auto; height: 100%; max-height: 62px; object-fit: contain; }
  .header-actions   { gap: 2px; margin-left: auto; }
  .header-actions .icon-btn,
  .header-actions .hamburger { width: 40px; height: 40px; min-width: 40px; }
  .site-footer .logo .logo-mark { width: 38px; height: 38px; }
  .logo .logo-mark svg { width: 20px; height: 20px; }
  .logo small       { font-size: .55rem; }

  .marquee span     { font-size: .78rem; gap: 28px; }

  .g-thumb          { width: 56px; height: 56px; }
}

/* ==================== TOUCH TARGETS ==================== */
@media (max-width: 760px) {
  .icon-btn         { min-height: 44px; min-width: 44px; }
  .tab              { min-height: 44px; }
  .btn              { min-height: 44px; }
  .btn-sm           { min-height: 44px; padding: 10px 16px; }
  .cart-item .rm    { min-height: 44px; min-width: 44px; }
  .hero-dots button { min-height: 44px; padding: 8px 0; }
  .hamburger        { min-height: 44px; min-width: 44px; }
  .side-filters .cat-btn { min-height: 44px; }
  .qty-ctl button   { min-width: 44px; min-height: 44px; }
  input, select, textarea { font-size: 16px !important; }
}

/* ==================== RESPONSIVE IMAGES ==================== */
img { max-width: 100%; height: auto; }

/* ==================== LANDSCAPE PHONE ==================== */
@media (max-width: 760px) and (orientation: landscape) {
  .hero-slider      { height: 280px; }
  .hero-scroll      { display: none; }
  .slide .content   { padding: 10px 0; }
  .slide .content h1 { font-size: 1.5rem; }
  .slide .content p  { display: none; }
}

/* ==================== HIGH-DPI / RETINA ==================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .prod-card .img-wrap img { image-rendering: -webkit-optimize-contrast; }
}