/* PDP accessory add-on shelves: circle-first (owner 2026-08-04), mobile-first
   at 390. Brand v1.0: Ink #111111, pills, radius 16. Self-contained
   box-sizing; min-height reserves space so hydration causes no layout shift. */
.gld-addons,.gld-addons *,.gld-addons *::before,.gld-addons *::after{box-sizing:border-box}
.gld-addons{margin:22px 0 8px;min-height:150px}
.gld-addons__head{font-family:'Archivo',sans-serif;font-weight:800;font-size:17px;letter-spacing:-.01em;margin:0 0 12px;color:#111111}
.gld-addons__row{display:flex;overflow-x:auto;scroll-snap-type:x proximity;gap:14px;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:6px}
.gld-addons__row::-webkit-scrollbar{display:none}

.gld-addon{flex:0 0 auto;width:104px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:#111111}
.gld-addon__circle{width:72px;height:72px;border-radius:50%;overflow:hidden;border:1.5px solid #ECECEA;background:#F5F5F3;display:block;cursor:pointer}
.gld-addon__circle img{width:100%;height:100%;object-fit:cover;display:block}
.gld-addon.is-open .gld-addon__circle{border-color:#111111;box-shadow:0 0 0 2px #111111}
.gld-addon__name{font-size:11.5px;line-height:1.3;height:30px;overflow:hidden}
.gld-addon__price{font-family:'Archivo',sans-serif;font-weight:700;font-size:12.5px}
.gld-addon__price s{color:#9A9A94;font-weight:400;font-size:11px;margin-left:2px}
.gld-addon__add{margin-top:auto;min-height:32px;padding:6px 14px;background:transparent;color:#111111;border:1.5px solid #111111;border-radius:999px;font-size:12px;font-weight:700;line-height:1.2;cursor:pointer;font-family:inherit;text-transform:none;letter-spacing:0;white-space:nowrap;transition:background .15s,color .15s}
.gld-addon__add:hover{background:#111111;color:#fff}
.gld-addon__add:disabled{opacity:.45;cursor:default}

.gld-addons__opts{margin-top:12px;padding:14px;background:#F7F7F5;border:1px solid #ECECEA;border-radius:14px}
.gld-addons__opts[hidden]{display:none}
.gld-addons__optstitle{margin:0 0 10px;font-size:13px;font-weight:700}
/* Even 3-per-row option grid (owner r20: the flex wrap left a ragged
   right edge on the big clip-on list). */
.gld-addons__optrow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 10px;margin-bottom:12px}
.gld-addons__opt{display:flex;flex-direction:column;align-items:center;gap:4px;width:auto;padding:4px;border:none;background:none;cursor:pointer;font:inherit}
.gld-addons__opt img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:1.5px solid #ECECEA;background:#fff}
.gld-addons__opt.is-on img{border-color:#111111;box-shadow:0 0 0 2px #111111}
.gld-addons__opt.is-text{width:auto;padding:8px 14px;border:1.5px solid #ECECEA;border-radius:999px;background:#fff;min-height:36px;justify-content:center}
.gld-addons__opt.is-text.is-on{border-color:#111111;background:#111111}
.gld-addons__opt.is-text.is-on .gld-addons__optlabel{color:#fff}
.gld-addons__optlabel{font-size:10.5px;line-height:1.25;color:#6B6B66;max-width:70px;overflow:hidden}
.gld-addons__opt.is-text .gld-addons__optlabel{font-size:12px;color:#111111;max-width:none}
.gld-addons__go{width:100%;min-height:44px;padding:11px 18px;background:#111111;color:#fff;border:1px solid #111111;border-radius:999px;font-size:14px;font-weight:700;line-height:1.2;cursor:pointer;font-family:inherit;text-transform:none;letter-spacing:0}
.gld-addons__go:disabled{background:#fff;color:#9A9A94;border-color:#ECECEA;cursor:default}
.gld-addons__note{margin:8px 0 0;font-size:12px;color:#E4002B;min-height:1px}

/* tablet keeps the swipe row; desktop wraps into a grid shelf and caps the
   option panel so it reads well inside the summary column */
@media (min-width:1025px){
  .gld-addons{min-height:0}
  .gld-addons__row{flex-wrap:wrap;overflow:visible;gap:16px 18px}
  .gld-addons__opts{max-width:520px}
}

/* Post-add confirmation (mirrors the combos card treatment). */
.gld-addons__note .gld-added{display:block;color:#111111;font-size:13px;line-height:1.5;margin-top:6px;padding:12px 14px;background:#F7F7F5;border:1px solid #ECECEA;border-radius:12px;text-align:left}
.gld-addons__note .gld-added b{display:block;font-weight:700}
.gld-addons__note .gld-added .gld-added__save{display:block;color:#1a7f37;font-weight:700;margin-top:2px}
.gld-addons__note .gld-added a{display:inline-block;margin-top:6px;font-weight:700;color:#111111;text-decoration:underline}
.gld-addons .added_to_cart{display:none !important}

/* Once-per-order (owner 2026-08-04 r2: no explainer text): a claimed circle
   simply loses the strike and shows the normal price. */
.gld-addon.is-used .gld-addon__price s{display:none}

/* Inside the cart form (rendered above the Buy Now button) the module must
   never shrink if the theme flexes the button row. */
.gld-addons{width:100%;flex:0 0 100%;min-width:0}

/* Quantity tier teaser (owner r20, Stylink clip-ons): picked thumbnails plus
   dashed + circles counting up to the next tier. Brand tone: Ink text, the
   title flips red once a tier is active. */
.gld-tier{margin:0 0 14px;padding:10px 12px;background:#fff;border:1px solid #ECECEA;border-radius:12px}
.gld-tier__title{margin:0 0 8px;font-size:13px;font-weight:700;color:#111111}
.gld-tier.is-on .gld-tier__title{color:#E4002B}
.gld-tier__slots{display:flex;flex-wrap:wrap;gap:8px}
.gld-tier__slot{width:40px;height:40px;border-radius:50%;overflow:hidden;border:1.5px solid #ECECEA;background:#F5F5F3;flex:0 0 auto}
.gld-tier__slot img{width:100%;height:100%;object-fit:cover;display:block}
.gld-tier__plus{width:40px;height:40px;border-radius:50%;border:2px dashed #C9C9C4;display:flex;align-items:center;justify-content:center;color:#9A9A94;font-size:18px;font-weight:600;background:#fff;flex:0 0 auto}