/* SDG recommendations: "Complete the look" at the end of the product summary (look.js draws it; docs/spec-recommend.md §8).
   The shop's look: the theme's font, black and #191919, the beige of Fit (#cab29f) for the size that fits the dog, and
   one button in the main Add to cart's own design (the theme's .button.alt; look.js copies its computed style, the
   values below are the staging's, measured 15 Oct 2026). Computers: the products in columns whose rows line up (photo,
   name, price, size, colour, what to add) through a subgrid; phones: one under the other, the same rows in order.
   Every rule starts at .sdg-look so the theme's list, heading, label and button rules never win. */
.sdg-look-mount[hidden]{display:none!important}
.sdg-look{--ink:#191919;--line:#d7d7d7;--soft:#f6f4f1;--beige:#cab29f;--beige-d:#a48878;--red:#e32c2b;clear:both;margin:28px 0 8px;padding:20px 20px 18px;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);font-family:inherit;text-align:left}
.sdg-look *{box-sizing:border-box}
.sdg-look .sdg-look__head{margin:0 0 16px}
.sdg-look .sdg-look__title{margin:0;padding:0;color:var(--ink);font-family:inherit;font-size:18px;font-weight:700;line-height:1.25;letter-spacing:0;text-align:left;text-transform:none}
.sdg-look .sdg-look__sub{margin:3px 0 0;padding:0;color:#5f5f5f;font-size:13px;line-height:1.45}
.sdg-look .sdg-look__dog{all:unset;color:var(--ink);font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sdg-look .sdg-look__dog:hover{color:var(--red);background:none}
.sdg-look .sdg-look__dog:focus-visible{outline:2px solid #000;outline-offset:2px;border-radius:3px}

/* the columns: six rows shared by every product (subgrid), so sizes, colours and choices sit on one line */
.sdg-look .sdg-look__items{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));grid-auto-rows:auto;column-gap:28px;row-gap:9px;margin:0;padding:0;list-style:none}
.sdg-look .sdg-look__item{position:relative;display:grid;grid-row:span 6;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);align-items:start;margin:0;padding:0;min-width:0;list-style:none}
@supports not (grid-template-rows:subgrid){.sdg-look .sdg-look__item{display:flex;flex-direction:column;gap:9px}}
.sdg-look .sdg-look__item:not(.is-on)>:not(.sdg-look__check){opacity:.45}
.sdg-look .sdg-look__item+.sdg-look__item::before{content:'+';position:absolute;top:0;left:-21px;width:14px;height:0;padding-top:calc(50% - 10px);color:#9a9a9a;font-size:20px;font-weight:600;line-height:1;text-align:center;box-sizing:content-box}
.sdg-look .sdg-look__check{position:absolute;z-index:2;top:8px;left:8px;display:block;width:24px;height:24px;margin:0;cursor:pointer}
.sdg-look .sdg-look__check input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.sdg-look .sdg-look__tick{display:block;width:24px;height:24px;border:1.5px solid #191919;border-radius:7px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12);transition:background-color .15s}
.sdg-look .sdg-look__check input:checked+.sdg-look__tick{background:#191919 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.sdg-look .sdg-look__check input:focus-visible+.sdg-look__tick{outline:2px solid #000;outline-offset:2px}
.sdg-look .sdg-look__pic{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:12px;background:var(--soft)}
.sdg-look .sdg-look__pic img{display:block;width:100%;height:100%;max-width:none;margin:0;object-fit:cover}
.sdg-look .sdg-look__name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em;margin-top:3px;color:var(--ink);font-size:13px;font-weight:600;line-height:1.35;text-decoration:none}
.sdg-look .sdg-look__name:hover{color:var(--ink);text-decoration:underline}
.sdg-look .sdg-look__price{color:var(--ink);font-size:14px;font-weight:700;line-height:1.3}
.sdg-look .sdg-look__price ins{color:var(--red);background:none;text-decoration:none}
.sdg-look .sdg-look__price del{color:#8a8a8a;font-weight:500}

/* size and what-to-add: full-width pills over native selects (the phone's own picker), text left, caret right */
.sdg-look .sdg-look__pill{position:relative;display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;min-height:36px;margin:0;padding:0 10px 0 13px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;transition:border-color .15s,background-color .15s}
.sdg-look .sdg-look__pill:hover{border-color:#191919}
.sdg-look .sdg-look__pill.is-fit{border-color:var(--beige);background:var(--beige)}
.sdg-look .sdg-look__pill.is-fit:hover{border-color:var(--beige-d)}
.sdg-look .sdg-look__pill.is-empty .sdg-look__pilltxt{color:#5f5f5f}
.sdg-look .sdg-look__pill.is-miss{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.sdg-look .sdg-look__pilltxt{overflow:hidden;text-overflow:ellipsis}
.sdg-look .sdg-look__caret{flex:0 0 auto;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sdg-look .sdg-look__pill select{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:pointer;font-size:16px;appearance:none;-webkit-appearance:none}
.sdg-look .sdg-look__pill:focus-within{outline:2px solid #000;outline-offset:2px}
.sdg-look .sdg-look__others{display:flex;flex-direction:column;gap:7px}

/* colour: the dots and the name of the one picked */
.sdg-look .sdg-look__colors{display:flex;flex-wrap:wrap;align-items:center;gap:7px;min-height:26px;padding:0 2px}
.sdg-look .sdg-look__dot{all:unset;box-sizing:border-box;flex:0 0 auto;width:22px;height:22px;border-radius:999px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);cursor:pointer}
.sdg-look .sdg-look__dot:hover{background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 0 0 2px #fff,0 0 0 3.5px #9a9a9a}
.sdg-look .sdg-look__dot[aria-pressed=true],.sdg-look .sdg-look__dot[aria-pressed=true]:hover{box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 0 0 2px #fff,0 0 0 3.5px #191919}
.sdg-look .sdg-look__dot.is-off{background:linear-gradient(to top right,transparent calc(50% - 1px),rgba(25,25,25,.55) calc(50% - 1px),rgba(25,25,25,.55) calc(50% + 1px),transparent calc(50% + 1px)),var(--c)}
.sdg-look .sdg-look__dot.is-only,.sdg-look .sdg-look__dot.is-only:hover{cursor:default;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.sdg-look .sdg-look__dot:focus-visible{outline:2px solid #000;outline-offset:3px}
.sdg-look .sdg-look__cname{margin-left:2px;color:#5f5f5f;font-size:12px;font-weight:600}
.sdg-look .sdg-look__none{display:block;min-height:0}

/* the total and the button */
.sdg-look .sdg-look__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 18px;margin-top:20px;padding-top:16px;border-top:1px solid #ececec}
.sdg-look .sdg-look__total{display:flex;flex-direction:column;gap:2px;min-width:0}
.sdg-look .sdg-look__totlabel{color:#5f5f5f;font-size:12px;font-weight:600}
.sdg-look .sdg-look__amt{display:flex;align-items:baseline;gap:8px}
.sdg-look .sdg-look__amt strong{font-size:22px;font-weight:700;line-height:1.1}
.sdg-look .sdg-look__amt del{color:#8a8a8a;font-size:14px}
.sdg-look .sdg-look__save{color:var(--red);font-size:12px;font-weight:600}
/* the theme's .button.alt draws it; the same box as the main Add to cart, full width under the total */
.sdg-look .button.sdg-look__add{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin:0;padding:0 24px;border:1px solid #fff;border-radius:3px;background:#e32c2b;color:#fff;font-size:20px;font-weight:700;line-height:1.2;letter-spacing:normal;text-align:center;text-transform:none;box-shadow:none;cursor:pointer;float:none}
.sdg-look .button.sdg-look__add:hover,.sdg-look .button.sdg-look__add:focus{background:#e32c2b;color:#fff}
.sdg-look .button.sdg-look__add:focus-visible{outline:2px solid #000;outline-offset:2px}
.sdg-look .button.sdg-look__add:disabled{opacity:.5;cursor:default}
.sdg-look .button.sdg-look__add.is-done{background:#191919!important;color:#fff!important;opacity:1}
.sdg-look .sdg-look__msg{margin:10px 0 0;padding:0;color:var(--red);font-size:13px;font-weight:600}
.sdg-look .sdg-look__msg:empty{display:none}

/* one product on a computer: a row (photo at the left), not one column as wide as the summary */
@media (min-width:768px){
  .sdg-look .sdg-look__items.is-one{display:block}
  .sdg-look .sdg-look__items.is-one .sdg-look__item{grid-row:auto;grid-template-columns:132px minmax(0,1fr);grid-template-rows:none;column-gap:16px;row-gap:7px}
  .sdg-look .sdg-look__items.is-one .sdg-look__item>*{grid-column:2}
  .sdg-look .sdg-look__items.is-one .sdg-look__pic{grid-column:1;grid-row:1 / span 5;width:132px}
  .sdg-look .sdg-look__items.is-one .sdg-look__item>.sdg-look__check{grid-column:1;grid-row:1;top:6px;left:6px} /* an absolute grid child sits in its own cell: the photo's */
  .sdg-look .sdg-look__items.is-one .sdg-look__name{min-height:0;margin:0}
  .sdg-look .sdg-look__items.is-one .sdg-look__pill{max-width:280px}
  .sdg-look .sdg-look__items.is-one .sdg-look__none{display:none}
}

/* phones: one under the other, the same rows in the same order (photo at the left, the tick at the right) */
@media (max-width:767px){
  .sdg-look{margin:22px 0 4px;padding:16px 14px 14px;border-radius:14px}
  .sdg-look .sdg-look__items{display:block}
  .sdg-look .sdg-look__item{display:grid;grid-row:auto;grid-template-columns:84px minmax(0,1fr);grid-template-rows:none;column-gap:12px;row-gap:7px;padding:14px 0;border-top:1px solid #f0f0f0}
  .sdg-look .sdg-look__item:first-child{border-top:0;padding-top:2px}
  .sdg-look .sdg-look__item+.sdg-look__item::before{display:none}
  .sdg-look .sdg-look__item>*{grid-column:2}
  .sdg-look .sdg-look__pic{grid-column:1;grid-row:1 / span 5;width:84px;border-radius:10px}
  .sdg-look .sdg-look__check{top:14px;left:auto;right:0}
  .sdg-look .sdg-look__item:first-child .sdg-look__check{top:2px}
  .sdg-look .sdg-look__name{min-height:0;margin:0;padding-right:34px}
  .sdg-look .sdg-look__pill{max-width:240px}
  .sdg-look .sdg-look__none{display:none}
  .sdg-look .sdg-look__foot{flex-direction:column;align-items:stretch;margin-top:8px}
  .sdg-look .sdg-look__total{flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px}
  .sdg-look .sdg-look__save{flex-basis:100%;text-align:right}
}
@media (prefers-reduced-motion:reduce){.sdg-look *{transition:none!important}}