/*
  Familiar interaction patterns adapted from Apple HIG principles.
  JAYA's logo, Montserrat typography, and brand palette remain unchanged.
*/
:root{
  --jaya-control:44px;
  --jaya-radius:18px;
  --jaya-card-radius:24px;
  --jaya-shadow:0 12px 34px rgba(18,18,18,.08);
  --jaya-shadow-raised:0 18px 48px rgba(18,18,18,.14);
}

html{-webkit-text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* Controls are large enough for touch and always show interaction feedback. */
button,a,.filter,summary{-webkit-tap-highlight-color:transparent}
button,.button,.filter,.round-link,.text-link,.mobile-nav a,.desktop-nav a,.footer-bottom a,.footer-bottom button{min-height:var(--jaya-control)}
button,.button,.filter,.round-link,.collection-tile,.product-image-button,.jaya-choices button,.jaya-view-all,summary{
  transition:transform .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease,opacity .18s ease;
}
button:active,.button:active,.filter:active,.round-link:active,.collection-tile:active,.product-image-button:active,.jaya-choices button:active,.jaya-view-all:active{transform:scale(.97)}
button:disabled,[aria-disabled="true"]{opacity:.48;cursor:not-allowed}

.button{border-radius:999px;padding-inline:24px;box-shadow:0 1px 0 rgba(255,255,255,.18) inset}
.button:hover{transform:translateY(-1px);box-shadow:0 9px 24px rgba(18,18,18,.12)}
.button:active{transform:scale(.98)}
.icon-button,.bag-button,.round-link,.quick-add,.dialog-close,.quantity button{border-radius:999px}
.icon-button:hover,.bag-button:hover{background:rgba(255,255,255,.1)}

/* Navigation stays predictable while content moves beneath it. */
.header{
  background:rgba(18,18,18,.9);
  -webkit-backdrop-filter:saturate(160%) blur(20px);
  backdrop-filter:saturate(160%) blur(20px);
  box-shadow:0 1px 0 rgba(255,255,255,.08),0 10px 28px rgba(0,0,0,.12);
}
.desktop-nav a{display:inline-flex;align-items:center;position:relative}
.desktop-nav a::after{content:"";position:absolute;left:50%;right:50%;bottom:6px;height:2px;border-radius:2px;background:#E74C3C;transition:left .2s ease,right .2s ease}
.desktop-nav a:hover::after,.desktop-nav a:focus-visible::after{left:0;right:0}
.mobile-nav{padding-bottom:max(20px,env(safe-area-inset-bottom));box-shadow:0 20px 50px rgba(0,0,0,.28)}
.mobile-nav a{display:flex;align-items:center;border-radius:12px;padding-inline:14px}
.mobile-nav a:active{background:#242424}

/* Selection controls read like familiar segmented and capsule controls. */
.jaya-filters,.brand-filters{gap:8px}
.filter{min-height:44px;border-radius:999px;padding:10px 17px;background:#fff;border-color:#d8dcdd}
.filter:hover{background:#f0f5f5;border-color:#b9c6c8}
.filter.active{background:#287C8C;border-color:#287C8C;color:#fff;box-shadow:0 5px 14px rgba(40,124,140,.22)}
.search-box{min-height:46px;padding:0 15px;border:1px solid #d8dcdd;border-radius:999px;background:#fff}
.search-box:focus-within{border-color:#287C8C;box-shadow:0 0 0 4px rgba(40,124,140,.14)}
.search-box input{min-height:44px}
.sort-label select{min-height:46px;border:1px solid #d8dcdd;border-radius:999px;background:#fff;padding:0 38px 0 15px}

/* Cards make every tappable area obvious without changing JAYA's editorial look. */
.product-card{background:#fff;border:1px solid #e4e7e7;border-radius:var(--jaya-card-radius);padding:10px 10px 18px;box-shadow:0 3px 12px rgba(18,18,18,.035);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.product-card:hover{transform:translateY(-3px);border-color:#d3dadb;box-shadow:var(--jaya-shadow)}
.product-image-button{border-radius:16px}
.card-bottom{padding-inline:5px}
.card-title{min-height:44px;display:flex;align-items:flex-start}
.quick-add{width:44px;height:44px;background:#f3f6f6;border-color:#d8dcdd;font-weight:500}
.quick-add:hover{background:#121212;color:#fff;border-color:#121212}
.product-badge{border-radius:999px;box-shadow:0 3px 10px rgba(18,18,18,.08)}
.jaya-style-card,.collection-tile{border-radius:28px;box-shadow:var(--jaya-shadow)}
.jaya-choices button{min-height:64px;border-radius:16px}
.jaya-view-all{min-height:48px}
.collection-tile:focus-visible{outline:3px solid #287C8C;outline-offset:4px}
.collection-tile:hover{box-shadow:var(--jaya-shadow-raised)}

/* Familiar grouped disclosure list. */
.faq-list{background:#fff;border:1px solid #e2e5e5;border-radius:24px;padding:0 24px;box-shadow:0 5px 18px rgba(18,18,18,.04)}
.faq-list details{padding:0}
.faq-list summary{align-items:center;padding:20px 0}
.faq-list details:first-child summary{padding-top:20px}
.faq-list p{margin-top:-3px;padding-bottom:22px}

/* Product details feel like a sheet, with clear close and action controls. */
dialog{border-radius:26px;box-shadow:0 30px 90px rgba(0,0,0,.32)}
dialog::backdrop{background:rgba(0,0,0,.48);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.dialog-close{background:rgba(250,249,246,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 3px 12px rgba(0,0,0,.1)}
.detail-thumbs button{min-width:64px;min-height:64px;border-radius:12px;overflow:hidden}
.quantity button{min-width:44px;height:44px}
.checkout-card,.order-success{border-radius:20px}
.checkout-field input,.checkout-field textarea{min-height:48px;border-radius:12px}

.toast{border-radius:999px;background:rgba(18,18,18,.92);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 12px 40px rgba(0,0,0,.22);padding:13px 22px}

/* The customer header begins with JAYA. The former announcement now lives as a footer brand statement. */
.footer-top{align-items:center}
.footer-wordmark .shop-logo{width:180px;height:36px;max-width:none;object-fit:contain}
.footer-top>.footer-brand-copy{display:grid;gap:4px;margin-left:0}
.footer-brand-copy p{margin:0;color:#fff;font-size:12px;font-weight:700;letter-spacing:.12em}
.footer-brand-copy small{color:#9ea6a0;font-size:12px}
.footer-top>.footer-socials{margin-left:auto;display:flex;gap:30px;font-size:13px}
.footer-bottom{align-items:center}
.footer-bottom>span,.footer-bottom>a,.footer-bottom>button{display:inline-flex;align-items:center;min-height:44px;line-height:1.35}
.footer-bottom>.footer-copyright{gap:4px}
.footer-bottom button{appearance:none}

@media(max-width:800px){
  .product-card{border-radius:20px}
  .jaya-style-card,.collection-tile{border-radius:22px}
}

@media(max-width:600px){
  :root{--jaya-card-radius:18px}
  .section,.collections-section{padding-left:max(5%,env(safe-area-inset-left));padding-right:max(5%,env(safe-area-inset-right))}
  .header{padding-left:max(5%,env(safe-area-inset-left));padding-right:max(5%,env(safe-area-inset-right))}
  .filter{min-height:44px;padding:9px 15px}
  .search-sort{align-items:stretch}
  .search-box{min-height:48px}
  .sort-label select{height:48px;max-width:145px}
  .product-card{padding:7px 7px 14px;border-radius:18px}
  .product-image-button{border-radius:13px}
  .card-bottom{padding-inline:3px}
  .jaya-style-card{border-radius:22px}
  .collection-tile{border-radius:22px}
  dialog:not(.bag-dialog){width:calc(100% - 12px);margin-bottom:6px;border-radius:26px 26px 12px 12px}
  .bag-dialog{padding-bottom:max(40px,env(safe-area-inset-bottom));border-radius:26px 0 0 26px}
  .toast{bottom:max(20px,env(safe-area-inset-bottom));max-width:calc(100% - 28px);white-space:normal;width:max-content}
  footer{padding-bottom:max(28px,env(safe-area-inset-bottom))}
  .footer-top>.footer-brand-copy{margin:20px 0}
  .footer-top>.footer-socials{margin-left:0}
  .footer-bottom>span,.footer-bottom>a,.footer-bottom>button{min-height:36px}
}

@media(prefers-reduced-motion:reduce){
  button,.button,.filter,.round-link,.collection-tile,.product-card,.product-image-button,.jaya-choices button,.jaya-view-all,summary{transition:none!important}
  button:active,.button:active,.filter:active,.round-link:active,.collection-tile:active,.product-image-button:active,.jaya-choices button:active,.jaya-view-all:active{transform:none}
}

/* Responsive media geometry: collection artwork keeps its complete wide composition. */
.collection-tile{
  height:auto;
  aspect-ratio:16/9;
  min-height:0;
}
.collection-tile>img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

@media(max-width:900px){
  .collection-tiles{gap:16px}
  .collection-tile>div{left:20px;right:58px;bottom:18px}
  .collection-tile .eyebrow{font-size:9px;margin-bottom:5px;line-height:1.3}
  .collection-tile h3{font-size:clamp(18px,2.8vw,23px);margin-bottom:2px;line-height:1.15}
  .collection-tile p{font-size:11px;line-height:1.35;max-width:none}
  .tile-arrow{right:18px;bottom:18px;font-size:24px}
}

@media(max-width:600px){
  .collection-tiles{grid-template-columns:1fr;gap:18px}
  .collection-tile{width:100%;height:auto;aspect-ratio:auto;border-radius:20px;background:#121212}
  .collection-tile>img{height:auto;object-fit:contain}
  .collection-tile>div{left:18px;right:54px;bottom:16px}
  .collection-tile .eyebrow{font-size:8px;margin-bottom:4px}
  .collection-tile h3{font-size:clamp(18px,5.3vw,23px);margin-bottom:2px}
  .collection-tile p{font-size:11px;line-height:1.3}
  .tile-arrow{right:16px;bottom:16px;font-size:22px}
}

@media(max-width:380px){
  .collection-tile>div{left:15px;right:48px;bottom:13px}
  .collection-tile p{font-size:10px}
  .tile-arrow{right:14px;bottom:13px;font-size:20px}
}