/* ==========================================================
   CATALOG — categories + products, in the hero's style
   ========================================================== */
:root{
  --line:var(--border);
  --shop-max:1400px;
}

.shop{padding:0;}

/* ---------- section headings ---------- */
.shop-title{
  margin:18px 0 0;font-weight:600;letter-spacing:-.035em;line-height:1.06;
  font-size:clamp(30px,3.9vw,56px);
}
.shop-title .l1,.shop-title .l2{display:block;}

/* ---------- sky panel (categories) ---------- */
/* no overflow:hidden here — the window a tile opens has to be able to
   leave the panel; the sky layers clip themselves and inherit the corner */
.cat-panel{
  position:relative;margin:0 10px 10px;border-radius:var(--radius);
  padding:66px 30px 62px;isolation:isolate;
}
.cat-panel > .sky{border-radius:inherit;}
.sky--panel{position:absolute;inset:0;z-index:0;}
.sky-grad--panel{
  position:absolute;inset:0;
  background:
    radial-gradient(62% 46% at 22% 26%, rgba(28,74,190,.36) 0%, rgba(28,74,190,0) 70%),
    radial-gradient(54% 44% at 80% 84%, rgba(220,152,69,.13) 0%, rgba(220,152,69,0) 70%),
    linear-gradient(160deg,#02071a 0%,#04102f 30%,#061a4d 58%,#030f2c 84%,#010613 100%);
  transition:background .4s ease;
}
/* dark site, light panel — the same inversion the hero performs */
:root[data-theme="dark"] .sky-grad--panel{
  background:
    radial-gradient(62% 46% at 22% 26%, rgba(47,94,180,.16) 0%, rgba(47,94,180,0) 70%),
    radial-gradient(54% 44% at 80% 84%, rgba(220,152,69,.14) 0%, rgba(220,152,69,0) 70%),
    linear-gradient(160deg,#f5f7fc 0%,#eef1fa 30%,#e6ebf7 58%,#eef1fa 82%,#f5f7fc 100%);
}
.cat-panel > .panel-head,
.cat-panel > .cat-grid{position:relative;z-index:2;}

.panel-head{text-align:center;margin-bottom:46px;}
.panel-head .shop-title{
  margin-top:0;font-weight:800;letter-spacing:-.045em;
  font-family:"Noto Sans Georgian","Plus Jakarta Sans",sans-serif;
}
.panel-head .shop-title .l1{color:var(--panel-ink);}
/* the panel is permanently dark, so one amber works in both themes */
.panel-head .shop-title .l2{font-weight:800;color:var(--panel-accent);}

/* ---------- category tiles ---------- */
.cat-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(12,1fr);gap:16px;
  width:100%;margin:0 auto;
}
/* the slot is the grid item now: the tile and the window under it are
   siblings, because a link may not sit inside a link */
.cat-slot{grid-column:span 3;position:relative;display:flex;}
.cat-slot.has-sub{z-index:1;}
.cat-slot:hover,.cat-slot:focus-within{z-index:5;}
.cat-card{
  flex:1;min-width:0;position:relative;overflow:hidden;
  background:var(--panel-fill);border:1px solid var(--panel-line);border-radius:16px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;align-items:center;gap:14px;padding:16px;
  box-shadow:0 22px 40px var(--panel-shadow);
  transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease,
             background .25s ease, border-color .25s ease;
}
.cat-card::before{
  content:"";position:absolute;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(140% 100% at 50% 120%, rgba(220,152,69,.16) 0%, rgba(220,152,69,0) 62%);
  transition:opacity .3s ease;
}
.cat-card:hover{
  transform:translateY(-4px);
  background:var(--panel-fill-hi);border-color:rgba(220,152,69,.4);
  box-shadow:0 30px 54px var(--panel-shadow-hi), 0 0 0 1px rgba(220,152,69,.12);
}
.cat-card:hover::before{opacity:1;}

.cat-img{
  position:relative;z-index:1;flex:0 0 auto;
  width:68px;height:68px;border-radius:12px;
  background:var(--panel-fill);
  display:grid;place-items:center;overflow:hidden;
}
.cat-img img{
  max-width:74%;max-height:74%;object-fit:contain;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
  filter:drop-shadow(0 6px 12px rgba(1,8,31,.5));
}
.cat-card:hover .cat-img img{transform:scale(1.08);}

.cat-body{position:relative;z-index:1;flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.cat-name{
  position:relative;display:inline-block;align-self:flex-start;
  font-size:13.5px;font-weight:800;letter-spacing:-.02em;color:var(--panel-ink);
  font-family:"Noto Sans Georgian","Plus Jakarta Sans",sans-serif;
  line-height:1.28;padding-bottom:6px;
  /* Georgian category names are long single words; without this they run
     out of the flex item and paint over the arrow on a narrow tile */
  max-width:100%;overflow-wrap:anywhere;
}
.cat-name::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:18px;border-radius:2px;
  background:var(--amber-light);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.cat-card:hover .cat-name::after{transform:scaleX(1);}
.cat-desc{
  font-size:11.5px;line-height:1.4;font-weight:500;color:var(--panel-ink-faint);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.cat-arrow{
  position:relative;z-index:1;flex:0 0 auto;
  width:32px;height:32px;border-radius:999px;
  background:var(--amber);color:var(--on-amber);
  display:grid;place-items:center;
  transform:translateX(-4px);opacity:.85;
  transition:transform .25s cubic-bezier(.22,.61,.36,1), opacity .25s ease, background .2s ease;
}
.cat-arrow svg{width:15px;height:15px;}
.cat-card:hover .cat-arrow{transform:translateX(0);opacity:1;background:var(--amber-light);}

/* ---------- the shelves, as a window under the tile ----------
   Only where there is a pointer to open it with and room to open it in.
   Below that the tile is simply a link to the shelf, which is where the
   catalogue lists them anyway. The gap between tile and window is bridged
   by the window's own ::before, so the pointer can cross it. */
/* nothing at all without a pointer and the room: on a phone the markup is
   there but the window never is, and the tile is simply a link to the shelf */
.cat-menu{display:none;}
@media (hover: hover) and (min-width:901px){
  .cat-menu{
    display:block;
    position:absolute;left:0;top:100%;z-index:6;
    min-width:100%;width:max-content;max-width:320px;
    padding-top:10px;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .16s ease, transform .2s cubic-bezier(.22,.61,.36,1),
               visibility .16s;
  }
  .cat-menu::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;}
  .cat-slot:hover > .cat-menu,
  .cat-slot:focus-within > .cat-menu{
    opacity:1;visibility:visible;transform:none;transition-delay:.13s;
  }
  .cat-menu-in{
    padding:14px 16px;border-radius:16px;
    background:var(--surface);border:1px solid var(--border);
    box-shadow:0 28px 64px rgba(4,16,46,.3);
    display:flex;flex-direction:column;gap:14px;
  }
  .cat-menu-group{display:flex;flex-direction:column;gap:5px;}
  .cat-menu-head{
    font-family:"Noto Sans Georgian","Plus Jakarta Sans",sans-serif;
    font-size:12px;font-weight:800;letter-spacing:-.02em;line-height:1.3;
    color:var(--text);
  }
  .cat-menu-head:hover{color:var(--amber-dark);}
  :root[data-theme="dark"] .cat-menu-head:hover{color:var(--amber-light);}
  .cat-menu-list{display:flex;flex-direction:column;gap:2px;margin-left:9px;padding-left:10px;
    border-left:1px solid var(--border);}
  .cat-menu-list a{
    display:block;padding:3px 0;
    font-size:11.5px;line-height:1.4;color:var(--text-muted);
    transition:color .18s ease;
  }
  .cat-menu-list a:hover{color:var(--text);}
}
@media (prefers-reduced-motion:reduce){
  .cat-menu{transition:none;}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .cat-panel{padding:48px 18px 44px;}
  .cat-grid{grid-template-columns:repeat(6,1fr);gap:10px;}
  .cat-slot{grid-column:span 3;}
  .cat-card{padding:13px;gap:11px;}
  .cat-img{width:52px;height:52px;border-radius:10px;}
  .cat-name{font-size:12.5px;}
  .cat-desc{display:none;}
  .cat-arrow{width:28px;height:28px;}
  .cat-arrow svg{width:13px;height:13px;}
}
/* A phone keeps the tiles two across and carries the name alone: the blurb
   doubled every tile and nineteen of them made a very long page. The arrow
   goes with it — the whole tile is the link, and at this width the name
   needs the room more than the sign does.

   The picture sits above the name rather than beside it. Side by side, a
   163px tile left the name 87px, and the long Georgian ones measure 88 to
   127 — every one of them broke mid-word. Stacked, the name has the tile.
   break-word rather than anywhere for the same reason: split a word only
   when it truly cannot fit, never drop one letter onto its own line. */
@media (max-width:560px){
  .cat-grid{gap:8px;}
  .cat-card{
    flex-direction:column;align-items:flex-start;
    padding:11px 12px;gap:9px;
  }
  .cat-img{width:38px;height:38px;border-radius:9px;}
  .cat-body{flex:none;width:100%;}
  .cat-name{font-size:11.5px;padding-bottom:5px;overflow-wrap:break-word;}
  .cat-arrow{display:none;}
}

[hidden]{display:none!important;}