/* ---- one thing we sell ----
   The owner's layout, 24 September 2026: the photograph fills the top of the
   phone, the stones sit under it, then the words, the price and the buttons.
   Built for the telephone first and widened afterwards, because that is the
   screen somebody arrives on from Instagram. */

.shop-body{background:var(--paper,#f4f1e9);color:var(--ink,#1c1a17)}
.item-page{max-width:560px;margin:0 auto;padding:0 0 72px}

/* Still ours only. Said plainly, because a page that looks finished and is not
   published is exactly how something gets shown to a customer by accident. */
.item-draft{margin:0;padding:10px 16px;background:#1c1a17;color:#f4f1e9;
  font:600 12px/1.4 var(--sans,system-ui);letter-spacing:.12em;text-transform:uppercase;text-align:center}

/* The photograph, filling the top of the screen. A square on a telephone, so
   the stones are visible under it without scrolling -- the whole point of the
   chooser is that you can see the change. */
.item-stage{position:relative;aspect-ratio:4/3;background:#e7e1d6;overflow:hidden}
.item-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .25s ease}
.item-shot.is-shown{opacity:1}
@media (prefers-reduced-motion:reduce){.item-shot{transition:none}}

/* See it in your room. One button: a telephone is either iOS or Android, and
   the one it cannot use is hidden rather than shown and broken. */
.item-room{display:grid;padding:12px 16px 0}
.item-ar{display:none;align-items:center;justify-content:center;gap:9px;
  min-height:52px;border:1px solid var(--ink,#1c1a17);border-radius:999px;
  color:inherit;text-decoration:none;font:500 15px/1 var(--sans,system-ui)}
.item-ar::before{content:"";width:19px;height:19px;flex:0 0 auto;
  background:currentColor;-webkit-mask:var(--ar-mark) center/contain no-repeat;mask:var(--ar-mark) center/contain no-repeat}
:root{--ar-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 3 7.5v9L12 21l9-4.5v-9L12 3Z'/%3E%3Cpath d='m3 7.5 9 4.5 9-4.5M12 12v9'/%3E%3C/svg%3E")}
.item-ar:active{background:#1c1a170d}
/* Which one this telephone gets. Safari on an iPhone is the only browser with
   AR Quick Look; everything else that can do this goes through Scene Viewer. */
@supports (-webkit-touch-callout:none){.item-ar[data-ar="ios"]{display:flex}}
@supports not (-webkit-touch-callout:none){.item-ar[data-ar="android"]{display:flex}}

/* The stones, as photographs of this table in that stone. */
.item-stones{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:14px 16px 4px;-webkit-overflow-scrolling:touch}
.item-stone{flex:0 0 auto;scroll-snap-align:start;display:grid;gap:6px;justify-items:center;
  width:74px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.item-stone img{width:60px;height:60px;border-radius:50%;object-fit:cover;
  border:2px solid transparent;transition:border-color .16s ease}
.item-stone span{font-size:11.5px;line-height:1.25;text-align:center;color:#6a6258}
.item-stone.is-picked img{border-color:var(--ink,#1c1a17)}
.item-stone.is-picked span{color:inherit}
.item-stone:focus-visible img{outline:2px solid var(--ink,#1c1a17);outline-offset:2px}

.item-name{margin:20px 16px 0;font:400 clamp(1.6rem,6vw,2.1rem)/1.15 var(--serif,Georgia,serif)}
.item-summary{margin:8px 16px 0;font-size:15.5px;line-height:1.55;color:#5a5348}

/* The price, and the way it is actually paid for here. */
.item-price{margin:18px 16px 0}
.item-total{margin:0;font:500 1.65rem/1.1 var(--sans,system-ui);font-variant-numeric:tabular-nums}
.item-monthly{margin:5px 0 0;font-size:14px;color:#6a6258;font-variant-numeric:tabular-nums}

.item-actions{display:grid;gap:9px;margin:18px 16px 0}
.item-buy,.item-kaspi{display:flex;align-items:center;justify-content:center;
  min-height:54px;border-radius:999px;font:500 15.5px/1 var(--sans,system-ui);
  text-decoration:none;cursor:pointer;border:1px solid var(--ink,#1c1a17)}
.item-buy{background:var(--ink,#1c1a17);color:var(--paper,#f4f1e9)}
.item-kaspi{background:#f14635;border-color:#f14635;color:#fff}


.item-words{margin:26px 16px 0;display:grid;gap:12px}
.item-words p{margin:0;font-size:15px;line-height:1.7}

.item-facts{margin:24px 16px 0;padding:16px 0 0;border-top:1px solid var(--line,#e3dccf);
  display:grid;gap:10px}
.item-facts>div{display:flex;justify-content:space-between;gap:16px;font-size:14.5px}
.item-facts dt{color:#6a6258}
.item-facts dd{margin:0;font-variant-numeric:tabular-nums}

.item-back{margin:30px 16px 0;font-size:14px}
.item-back a{color:inherit}

/* ---- the list, and the services ---- */
.shop-list{max-width:1080px;margin:0 auto;padding:24px 16px 72px}
.shop-list h1{margin:0 0 6px;font:400 clamp(1.7rem,5vw,2.4rem)/1.15 var(--serif,Georgia,serif)}
.shop-list .shop-lede{margin:0 0 26px;color:#6a6258;line-height:1.6}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:22px;padding:0;margin:0;list-style:none}
.shop-grid a{display:grid;gap:9px;color:inherit;text-decoration:none}
.shop-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:3px;background:#e7e1d6}
.shop-grid strong{font:500 1rem/1.3 var(--serif,Georgia,serif)}
.shop-grid span{font-size:14px;color:#6a6258;font-variant-numeric:tabular-nums}

.service-list{display:grid;gap:1px;margin:26px 0 0;padding:0;list-style:none;
  background:var(--line,#e3dccf);border:1px solid var(--line,#e3dccf);border-radius:3px;overflow:hidden}
.service-row{display:grid;gap:5px;padding:20px;background:var(--paper,#f4f1e9)}
.service-row h2{margin:0;font:500 1.05rem/1.3 var(--serif,Georgia,serif)}
.service-row p{margin:0;font-size:14.5px;line-height:1.55;color:#6a6258}
.service-price{font:500 1.15rem/1.2 var(--sans,system-ui);font-variant-numeric:tabular-nums}
.service-note{font-size:13px;color:#6a6258}

/* ---- the store, 28 September 2026 ----
   "Make it look like a real online store with proper dimensions and choices
   and buttons to add to cart." The header is a solid band on these pages:
   the mark is white, and over a pale photograph it disappeared. */
.shop-body .site-header{position:sticky;top:0;background:#1c1a17;color:#f4f1e9;
  padding-block:max(12px,env(safe-area-inset-top)) 12px}
.item-page{max-width:1180px;padding:0 0 88px}
.item-layout{display:grid}
.item-gallery{min-width:0}
.item-buybox{padding:0 16px;min-width:0}
.item-crumbs{margin:18px 0 0;font-size:13px;letter-spacing:.04em}
.item-crumbs a{color:#6a6258;text-decoration:none}
.item-crumbs a::before{content:"\2190\00a0"}
.item-buybox .item-name{margin:8px 0 0}
.item-buybox .item-summary,.item-buybox .item-price{margin-inline:0}
.item-total.is-open{font-size:1.2rem;color:#6a6258}

.item-choice{margin:22px 0 0}
.item-choice-label{margin:0 0 10px;font-size:13.5px;color:#6a6258}
.item-choice-label b{color:var(--ink,#1c1a17);font-weight:600}
.item-buybox .item-stones{padding:0 0 4px}
.item-sizes{display:flex;flex-wrap:wrap;gap:8px}
.item-size{display:grid;gap:3px;min-width:110px;min-height:52px;padding:10px 14px;border:1px solid #cfc6b8;border-radius:14px;
  background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.item-size b{font-weight:600;font-size:14.5px}
.item-size span{font-size:12.5px;color:#6a6258;font-variant-numeric:tabular-nums}
.item-size.is-picked{border-color:var(--ink,#1c1a17);box-shadow:inset 0 0 0 1px var(--ink,#1c1a17)}

.item-specs{margin:22px 0 0}
.item-specs[hidden]{display:none}
.item-buybox .item-facts{margin:0;padding:14px 16px;border:1px solid var(--line,#e3dccf);border-radius:14px;gap:9px}
.item-facts>div[hidden]{display:none}
.item-lead{margin:12px 0 0;font-size:14px;color:#6a6258}

.item-buybox .item-actions{margin:24px 0 0}
.item-cart-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px}
.item-qty{display:inline-flex;align-items:center;min-height:54px;border:1px solid #cfc6b8;border-radius:999px;overflow:hidden}
.item-qty button{width:46px;height:52px;border:0;background:transparent;color:inherit;font:500 20px/1 system-ui;cursor:pointer}
.item-qty input,.item-qty span{width:38px;border:0;background:transparent;text-align:center;font:600 16px/1 system-ui;
  font-variant-numeric:tabular-nums;color:inherit;-moz-appearance:textfield}
.item-qty input::-webkit-inner-spin-button,.item-qty input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.item-add{min-height:54px;border:0;border-radius:999px;background:var(--ink,#1c1a17);color:var(--paper,#f4f1e9);
  font:600 15.5px/1 var(--sans,system-ui);cursor:pointer}
.item-add:hover{background:#3a3733}
/* Beside Add to cart, WhatsApp is the quiet one. */
.item-cart-row~.item-buy{background:transparent;color:var(--ink,#1c1a17)}
.item-buybox .item-words{margin:30px 0 0;padding-top:22px;border-top:1px solid var(--line,#e3dccf)}

@media (min-width:900px){
  .item-page{padding:28px 32px 96px}
  .item-layout{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:start}
  .item-gallery{position:sticky;top:96px}
  .item-stage{border-radius:18px}
  .item-buybox{padding:0}
  .item-crumbs{margin-top:0}
}

/* ---- the list: a real catalogue ---- */
.shop-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:28px 22px}
.shop-card{display:grid;gap:10px;color:inherit;text-decoration:none}
.shop-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px;background:#e7e1d6;transition:transform .3s ease}
.shop-card:hover img{transform:scale(1.02)}
.shop-card strong{font:500 1.1rem/1.3 var(--serif,Georgia,serif)}
.shop-card .shop-card-price{font:600 15px/1 var(--sans,system-ui);color:var(--ink,#1c1a17);font-variant-numeric:tabular-nums}
.shop-card .shop-card-meta{font-size:13px;color:#6a6258}
.shop-dots{display:flex;gap:6px}
.shop-dots i{width:18px;height:18px;border-radius:50%;background-size:cover;background-position:center;box-shadow:0 0 0 1px #0002}

/* ---- the cart ---- */
.cart-page{max-width:1180px;margin:0 auto;padding:24px 16px 96px}
.cart-title{margin:0 0 22px;font:400 clamp(1.7rem,5vw,2.4rem)/1.15 var(--serif,Georgia,serif)}
.cart-empty{display:grid;gap:18px;justify-items:start;color:#6a6258}
.cart-button{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 26px;border:0;border-radius:999px;
  background:var(--ink,#1c1a17);color:var(--paper,#f4f1e9);font:600 15.5px/1 var(--sans,system-ui);text-decoration:none;cursor:pointer}
.cart-button:disabled{opacity:.45;cursor:default}
.cart-layout{display:grid;gap:28px}
.cart-lines{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--line,#e3dccf)}
.cart-line{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:14px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line,#e3dccf)}
.cart-photo img{display:block;width:88px;height:88px;object-fit:cover;border-radius:12px;background:#e7e1d6}
.cart-words{display:grid;gap:6px;min-width:0}
.cart-name{color:inherit;text-decoration:none;font:500 1.05rem/1.3 var(--serif,Georgia,serif)}
.cart-detail{margin:0;font-size:13.5px;color:#6a6258}
.cart-controls{display:flex;align-items:center;gap:14px;margin-top:4px}
.cart-qty{min-height:40px}
.cart-qty button{width:38px;height:38px}
.cart-remove{border:0;background:none;color:#6a6258;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit;font-size:13.5px}
.cart-cost{margin:0;font:600 15px/1.3 var(--sans,system-ui);font-variant-numeric:tabular-nums;white-space:nowrap}
.cart-addons{margin:22px 0 0;padding:16px;border:1px solid var(--line,#e3dccf);border-radius:16px;display:grid;gap:10px}
.cart-addons legend{padding:0 6px;font-size:13.5px;color:#6a6258}
.cart-addon{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;font-size:14.5px}
.cart-addon input{width:20px;height:20px}
.cart-side{display:grid;gap:18px;align-content:start;padding:20px;border-radius:20px;background:#fffdf9;box-shadow:0 1px 3px #0001}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;font-size:15px}
.cart-total b{font:600 1.6rem/1 var(--sans,system-ui);font-variant-numeric:tabular-nums}
.cart-problem,.cart-status:not(:empty){margin:0;color:#903b29;font-size:14px}
.cart-form{display:grid;gap:12px}
.cart-form h2{margin:6px 0 0;font:500 1.1rem/1.3 var(--serif,Georgia,serif)}
.cart-field{display:grid;gap:6px;font-size:13px;color:#6a6258}
.cart-field[hidden]{display:none}
.cart-field input,.cart-field textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid #cfc6b8;border-radius:12px;background:#faf8f2;
  font:16px/1.3 var(--sans,system-ui);color:var(--ink,#1c1a17)}
.cart-field textarea{min-height:80px;resize:vertical}
.cart-how{display:grid;gap:8px;margin:4px 0;padding:0;border:0}
.cart-radio{display:flex;align-items:center;gap:10px;font-size:14.5px}
.cart-radio input{width:20px;height:20px}
.cart-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cart-paid{margin:0;font-size:13px;line-height:1.5;color:#6a6258}
.cart-done{display:grid;gap:16px;justify-items:start;max-width:640px}
.cart-done p{margin:0;line-height:1.6}
@media (min-width:900px){
  .cart-page{padding:32px 32px 96px}
  .cart-layout{grid-template-columns:minmax(0,1fr) 400px;gap:40px;align-items:start}
  .cart-side{position:sticky;top:96px}
}