:root{ --ink:#131210; --paper:#FAF9F7; --stone:#8B887F; --charcoal:#2B2A27; --mist:#E9E7E2; }
*{box-sizing:border-box;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Work Sans',-apple-system,Helvetica,Arial,sans-serif;}
.serif{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;margin:0;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}

.wrap{max-width:1280px;margin:0 auto;padding:0 56px;}
.wrap.narrow{max-width:900px;}
.wrap.copy{max-width:820px;}

.hr{border:none;border-top:1px solid var(--mist);}

/* header / nav */
header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--mist);}
header .bar{display:flex;align-items:center;justify-content:space-between;height:84px;}
nav.mainnav{display:flex;gap:40px;font-size:17px;}
nav.mainnav a{cursor:pointer;padding-bottom:4px;border-bottom:1px solid transparent;}
nav.mainnav a.active{border-bottom:1px solid var(--ink);}
.iconrow{display:flex;align-items:center;gap:24px;}
.iconrow svg{width:24px;height:24px;}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:15px 32px;font-family:'Work Sans',sans-serif;font-size:13px;letter-spacing:.03em;cursor:pointer;transition:background .2s,color .2s,border-color .2s;border:1px solid var(--ink);background:none;}
.btn-fill{background:var(--ink);color:var(--paper);border:1px solid var(--ink);}
.btn-fill:hover{background:var(--charcoal);}
.btn-fill.added{background:var(--stone);border-color:var(--stone);}
.btn-outline-dark{background:transparent;color:var(--ink);border:1px solid var(--ink);}
.btn-outline-dark:hover{background:var(--ink);color:var(--paper);}
.btn-outline-light{background:transparent;color:var(--paper);border:1px solid var(--paper);}
.btn-outline-light:hover{background:var(--paper);color:var(--ink);}

/* small admin-style button */
.btn-sm{border:1px solid var(--ink);background:none;color:var(--ink);padding:8px 16px;font-size:12.5px;cursor:pointer;}
.btn-sm:hover{background:var(--ink);color:var(--paper);}
.btn-sm-fill{background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:10px 22px;font-size:12.5px;cursor:pointer;}
.btn-sm-fill:hover{background:var(--charcoal);}
.btn-danger{border-color:var(--stone);color:var(--stone);}
.btn-danger:hover{background:var(--stone);color:var(--paper);}

/* shop */
.eyebrow{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:16px;color:var(--stone);}
.chip{padding:9px 18px;font-size:13px;border:1px solid var(--mist);cursor:pointer;background:none;color:var(--charcoal);}
.chip.on{border-color:var(--ink);color:var(--ink);}
.size{min-width:32px;padding:0 8px;box-sizing:border-box;white-space:nowrap;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid var(--mist);font-size:12px;cursor:pointer;}
.size.on{border-color:var(--ink);background:var(--ink);color:var(--paper);}
.size.error{border-color:#a33;}
.size-error-msg{color:#a33;font-size:11px;margin-top:6px;display:none;}
.size-error-msg.show{display:block;}
.cardimg{position:relative;aspect-ratio:3/4;background:var(--mist);display:flex;align-items:center;justify-content:center;color:var(--charcoal);overflow:hidden;cursor:pointer;}
.cardimg img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;}
/* equal-width card columns; the hairline divider sits in the middle of the column gap */
.r-grid4.ruled{column-gap:48px;}
.r-grid4.ruled > .rule-r::after{content:'';position:absolute;top:0;bottom:0;right:-24px;border-right:1px solid var(--mist);pointer-events:none;}
.cartbadge{position:absolute;top:-8px;right:-10px;background:var(--ink);color:var(--paper);font-size:11px;width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;}

/* whatsapp order button */
.wa-float{position:fixed;bottom:22px;right:22px;width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.25);z-index:60;transition:transform .15s;}
.wa-float:hover{transform:scale(1.06);}

/* cell hover reveal (home) */
.cell{position:relative;}
.rev{position:absolute;left:0;bottom:-2px;height:1px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .3s;}
.cell:hover .rev{transform:scaleX(1);}

/* forms */
.field{width:100%;border:none;border-bottom:1px solid var(--mist);background:transparent;padding:12px 2px;font-size:15px;font-family:'Work Sans',sans-serif;color:var(--ink);outline:none;}
.field:focus{border-color:var(--ink);}
.field.error{border-color:#a33;}
textarea.field{resize:none;min-height:110px;font-family:'Work Sans',sans-serif;}

/* services tabs */
.tab{padding-bottom:16px;font-family:'Cormorant Garamond',serif;font-size:24px;cursor:pointer;color:var(--stone);border-bottom:1px solid transparent;}
.tab.on{color:var(--ink);border-bottom:1px solid var(--ink);}

/* portfolio */
.thumb{cursor:pointer;opacity:.55;transition:opacity .2s;}
.thumb.on{opacity:1;}
.thumb:hover{opacity:1;}

/* faq */
.q{padding:26px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:18px;font-family:'Cormorant Garamond',serif;}
.plus{font-size:20px;color:var(--stone);transition:transform .2s;}
.plus.open{transform:rotate(45deg);}

/* pricing toggle */
.toggle{display:inline-flex;border:1px solid var(--ink);}
.toggle span{padding:11px 26px;font-size:13px;cursor:pointer;}
.toggle span.on{background:var(--ink);color:var(--paper);}
.row{display:flex;justify-content:space-between;align-items:baseline;padding:24px 0;}

/* size guide / long copy */
table{width:100%;border-collapse:collapse;margin-top:8px;}
.copytable th{text-align:left;font-weight:400;font-size:13px;color:var(--stone);padding:14px 12px;border-bottom:1px solid var(--ink);}
.copytable td{padding:16px 12px;font-size:15px;border-bottom:1px solid var(--mist);}
.copytable th:first-child,.copytable td:first-child{padding-left:0;}
.copy h2{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:22px;margin:0 0 12px;}
.copy p{font-size:15px;line-height:1.75;color:var(--charcoal);margin:0 0 28px;}
.copy h3{font-size:15px;font-weight:500;margin:0 0 8px;}
.copy ul{font-size:15px;line-height:1.75;color:var(--charcoal);margin:0 0 28px;padding-left:20px;}
/* footer */
footer{border-top:1px solid var(--mist);padding:72px 0 28px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;}
.foot-col{font-size:14px;}
.foot-col .label{color:var(--stone);margin-bottom:14px;}
.foot-links{display:flex;flex-direction:column;gap:10px;}
.foot-bottom{margin-top:56px;padding-top:24px;border-top:1px solid var(--mist);display:flex;justify-content:space-between;font-size:12.5px;color:var(--stone);flex-wrap:wrap;gap:10px;}

/* cart table */
.carttable{width:100%;border-collapse:collapse;}
.carttable th{text-align:left;font-weight:400;font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--stone);padding:0 0 14px;border-bottom:1px solid var(--ink);}
.carttable td{padding:20px 0;border-bottom:1px solid var(--mist);vertical-align:middle;}
.carttable td.num,.carttable th.num{text-align:right;}
.cart-thumb{width:64px;height:80px;background:var(--mist);overflow:hidden;flex-shrink:0;}
.cart-thumb img{width:100%;height:100%;object-fit:cover;}
.cart-item-row{display:flex;align-items:center;gap:16px;}

/* admin */
.admin-layout{display:grid;grid-template-columns:220px 1fr;min-height:100vh;}
.admin-side{border-right:1px solid var(--mist);padding:32px 24px;}
.admin-navi{padding:11px 0;font-size:14px;color:var(--charcoal);cursor:default;}
.admin-navi.on{color:var(--ink);border-bottom:1px solid var(--ink);width:fit-content;cursor:pointer;}
.admin-main{padding:40px 48px;}
.admintable th{text-align:left;font-weight:400;font-size:12px;letter-spacing:.02em;color:var(--stone);padding:12px 10px;border-bottom:1px solid var(--ink);}
.admintable td{padding:16px 10px;border-bottom:1px solid var(--mist);vertical-align:middle;}
.tag{padding:4px 10px;font-size:11.5px;border:1px solid var(--mist);display:inline-block;cursor:pointer;}
.tag.out{border-color:var(--stone);color:var(--stone);}
.priceEdit{border:none;border-bottom:1px solid var(--ink);background:transparent;font-size:14px;width:70px;font-family:'Work Sans',sans-serif;outline:none;}

/* ================= responsive ================= */

/* mobile nav */
.burger{display:none;background:none;border:none;padding:6px;cursor:pointer;color:var(--ink);}
.burger svg{display:block;}
.mobile-nav{display:none;flex-direction:column;border-top:1px solid var(--mist);}
.mobile-nav a{padding:16px 0;font-size:15px;border-bottom:1px solid var(--mist);}
.mobile-nav a.active{color:var(--stone);}
.mobile-nav.open{display:flex;}

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}

@media (max-width:900px){
  .wrap{padding:0 32px;}
  .hero-copy{padding:64px 32px !important;}
  .r-grid4{grid-template-columns:repeat(2,1fr) !important;gap:32px 24px !important;}
  .r-grid4 > .cell,.r-grid4 > .product{padding:0 !important;border:none !important;}
  .r-grid4.ruled > .rule-r::after{display:none;}
  .r-grid6{grid-template-columns:repeat(3,1fr) !important;}
  .foot-grid{grid-template-columns:1fr 1fr !important;row-gap:36px;}
}

@media (max-width:860px){
  nav.mainnav{display:none;}
  .burger{display:inline-flex;align-items:center;justify-content:center;}
}

/* home hero: photos cross-fade, each zooming in very slightly while shown */
.hero-slides{position:relative;overflow:hidden;background:var(--mist);}
.hero-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transform:scale(1);transition:opacity 1.6s ease, transform 7s linear;}
.hero-slides img.on{opacity:1;transform:scale(1.06);}
.hero-dots{position:absolute;left:24px;bottom:22px;display:flex;gap:10px;z-index:2;}
.hero-dots button{width:28px;height:2px;padding:0;border:0;background:rgba(250,249,247,.45);cursor:pointer;}
.hero-dots button.on{background:var(--paper);}
@media (prefers-reduced-motion: reduce){.hero-slides img{transition:none;}.hero-slides img.on{transform:none;}}

@media (max-width:760px){
  .hero-slides{aspect-ratio:4/5;}
  header .bar{height:72px;}
  .r-hero,.r-2col{grid-template-columns:1fr !important;}
  .contact-aside{border-left:none !important;padding-left:0 !important;border-top:1px solid var(--mist);padding-top:32px;margin-top:8px;}
  .r-grid3{grid-template-columns:1fr !important;}
  .r-grid3 > div{padding:0 0 32px 0 !important;border:none !important;}
  .r-grid3b{grid-template-columns:1fr !important;}
  .admintable{min-width:640px;}
}

@media (max-width:640px){
  .wa-float{width:48px;height:48px;bottom:16px;right:16px;}
  .wrap{padding:0 20px;}
  .hero-copy{padding:56px 24px 56px 24px !important;}
  .r-grid6{grid-template-columns:repeat(2,1fr) !important;}
  .foot-grid{grid-template-columns:1fr !important;}
  .admin-layout{grid-template-columns:1fr !important;}
  .admin-side{border-right:none !important;border-bottom:1px solid var(--mist);padding:24px 20px !important;}
  .admin-main{padding:28px 20px !important;}
  .r-addform{grid-template-columns:1fr 1fr !important;}
  .r-grid4step{grid-template-columns:1fr 1fr !important;}
}

@media (max-width:420px){
  /* Shop and Featured stay two per row on phones, with slightly tighter cards. */
  .r-grid4{grid-template-columns:1fr 1fr !important;gap:32px 14px !important;}
  .r-grid4 .card-name{font-size:14px !important;}
  .r-grid4 .sizes{flex-wrap:wrap;}
  .r-grid4 .sizes .size{min-width:30px;height:30px;padding:0 6px;}
  .r-grid4 .addbtn{font-size:12.5px !important;padding:12px 0 !important;}
  .r-grid4 .product a[data-wa-kind="product"]{width:40px !important;}
  .r-addform{grid-template-columns:1fr !important;}
  .r-grid4step{grid-template-columns:1fr !important;}
}


/* ---------- Mobile QA fixes ---------- */

/* Admin: let the content column shrink so wide tables scroll inside their own
   .table-wrap instead of stretching the whole page sideways. */
.admin-layout{grid-template-columns:220px minmax(0,1fr);}
.admin-main{min-width:0;}

/* Larger hit areas without changing how things look. */
.hero-dots button{height:24px;background:linear-gradient(rgba(250,249,247,.45),rgba(250,249,247,.45)) center/100% 2px no-repeat;}
.hero-dots button.on{background:linear-gradient(var(--paper),var(--paper)) center/100% 2px no-repeat;}
.carttable th{font-size:12px;}

@media (max-width:900px){
  .wrap{padding-left:32px !important;padding-right:32px !important;}
}

/* Touch screens of any size (phones and tablets): bigger tap targets, and
   16px form fields because iOS zooms into anything smaller when tapped. */
@media (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea, .field{font-size:16px !important;}
  input[type=checkbox]{width:20px;height:20px;}
  label:has(> input[type=checkbox]){padding:10px 0;}

  .iconrow{gap:2px;}
  .iconrow > button, .iconrow > a{min-width:44px;min-height:44px;display:inline-flex !important;align-items:center;justify-content:center;}
  .iconrow .cartbadge{top:5px;right:3px;}

  .foot-links{gap:0;}
  .foot-links a{display:block;padding:12px 0;}
  .foot-bottom a, a[data-wa-show-number]{display:inline-block;padding:12px 0;}
  a[data-ig-link], a[data-tiktok-link]{display:inline-flex;padding:10px;margin:-10px;}

  #backLink{padding:12px 0;}
  #productWrap a[href*="shop"], .sec-head a{display:inline-block;padding:12px 0;}
  #productWrap a[href*="size-guide"], .product a[href*="size-guide"]{padding:10px 0;font-size:12.5px !important;}
  #logoutLink{display:inline-block;padding:10px 0;}

  /* Nothing below 12px on touch screens. */
  [style*="font-size:11px"], [style*="font-size:11.5px"], .tag, .channel{font-size:12px !important;}
}

@media (max-width:760px){

  /* Homepage section headings stack instead of squeezing. */
  .sec-head{flex-direction:column;align-items:flex-start !important;gap:8px;}

  /* WhatsApp float: hidden where the page already has its own WhatsApp buttons. */
  body.has-wa-cta .wa-float{display:none;}

  #logoutLink{display:inline-block;padding:10px 0;}
}

@media (max-width:640px){
  .wrap{padding-left:20px !important;padding-right:20px !important;}
  .home-services{padding-top:56px !important;padding-bottom:40px !important;}
}

/* ---------- UI audit pass (styling only) ---------- */

/* Buttons and form controls use the site font instead of the browser default (Arial). */
button, input, select, textarea{font-family:inherit;letter-spacing:inherit;}
/* Button labels are centred, including full-width buttons. */
.btn{justify-content:center;text-align:center;}
/* Cormorant's old-style figures make "01" read as "OI" and "€180" as "€I80". */
.serif{font-variant-numeric:lining-nums;}
input[type=checkbox]{accent-color:var(--ink);}
h1.serif{text-wrap:balance;}
p{text-wrap:pretty;}
/* Logo PNGs and the measuring diagram have an off-white box; blend it into the paper. */
img[src*="niidl-mark"], img[src*="how-to-measure"]{mix-blend-mode:multiply;}

/* Sold-out product buttons: palette outline instead of a flat grey block. */
.addbtn:disabled{background:transparent !important;color:var(--charcoal) !important;border:1px solid var(--mist) !important;opacity:1 !important;}

/* Shop cards: actions line up across a row even when a title wraps. */
.r-grid4 > .product{display:flex;flex-direction:column;}
.r-grid4 > .product > div:has(> .addbtn){margin-top:auto !important;padding-top:14px;}

/* Readable copy. */
#pDescription{color:var(--charcoal) !important;}
.plus{color:var(--charcoal);font-size:22px;}

/* Size guide tables: columns line up between tables, figures align. */
.copytable{table-layout:fixed;}
.copytable td, .copytable th{font-variant-numeric:lining-nums tabular-nums;}

/* Dark quote bands: no stray hairline + paper strip above/below. */
hr.hr:has(+ section[style*="background:var(--charcoal)"]), section[style*="background:var(--charcoal)"] + hr.hr{display:none;}

/* Footer bottom row: the section padding rule was cancelling its top spacing. */
.wrap.foot-bottom{padding-top:24px;align-items:baseline;}

/* Portfolio grid: fill tiles instead of letterboxing portrait videos. */
#thumbs video{object-fit:cover !important;}

/* Admin tables: keep short values on one line; hint that wide tables scroll. */
.admintable .tag, .admintable .channel{white-space:nowrap;}
.table-wrap{background:linear-gradient(to right, var(--paper) 30%, rgba(250,249,247,0)) left/40px 100% no-repeat local, linear-gradient(to left, var(--paper) 30%, rgba(250,249,247,0)) right/40px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(19,18,16,.12), transparent) left/12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(19,18,16,.12), transparent) right/12px 100% no-repeat scroll;}

/* Tablet and below: admin sidebar becomes a top bar (it squeezed tables to ~450px). */
@media (max-width:1024px){
  .admin-layout{grid-template-columns:minmax(0,1fr) !important;align-content:start;}
  .admin-side{display:grid;grid-template-columns:repeat(4,max-content);justify-content:start;align-items:center;column-gap:22px;padding:12px 20px !important;border-right:none !important;border-bottom:1px solid var(--mist);}
  .admin-side > img{grid-column:1 / -1;height:26px !important;margin:2px 0 4px;}
  .admin-side > img + div, .admin-side > div[style*="margin-top:64px"]{display:none;}
  .admin-side > div[style*="margin-top:24px"]{margin:0 !important;}
  .admin-side .admin-navi{display:inline-block !important;padding:10px 0 !important;}
  .admin-main{padding:28px 32px !important;}
  .admintable{min-width:720px;}
  .admintable td:last-child{white-space:nowrap;}
  .admintable .itemsCell, .admintable .notesCell, .admintable .reviewBody{min-width:180px;}
}

/* Tablet: two- and three-column text layouts are too cramped at ~768px. */
@media (max-width:900px){
  .r-2col{grid-template-columns:1fr !important;gap:40px !important;}
  .r-grid3{grid-template-columns:1fr !important;}
  .r-grid3 > div{padding:0 0 28px 0 !important;border:none !important;}
  .contact-aside{border-left:none !important;padding-left:0 !important;border-top:1px solid var(--mist);padding-top:32px;}
  .wrap h1.serif{font-size:44px !important;}
  .copy p, .copy ul{max-width:62ch;}
  .copy h2:not(:first-child){margin-top:40px;}
}

/* Tablet only: the product page keeps image and details side by side. */
@media (min-width:761px) and (max-width:900px){
  #productWrap .r-2col{grid-template-columns:1fr 1fr !important;gap:32px !important;}
}

@media (max-width:640px){
  /* One page-title size and top spacing on phones. */
  .wrap h1.serif{font-size:38px !important;line-height:1.08;}
  #pName{font-size:32px !important;}
  header + section.wrap{padding-top:48px !important;}
  .hero-copy{padding:48px 20px 48px 20px !important;}

  /* Tighter vertical rhythm (desktop paddings of 96–120px are too tall on a phone). */
  section[style*="padding:96px"], section[style*="padding:80px"]{padding-top:56px !important;padding-bottom:56px !important;}
  section[style*="padding:110px 0"], section[style*="padding:100px 0"]{padding-top:64px !important;padding-bottom:64px !important;}
  section[style*="120px;"], section[style*="110px;"], section[style*="100px;"]{padding-bottom:72px !important;}
  section[style*="background:var(--charcoal)"] .serif{font-size:24px !important;}

  /* Services tabs: one scrollable row instead of wrapping onto two lines. */
  section:has(> .tab){flex-wrap:nowrap !important;overflow-x:auto;gap:20px !important;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent);}
  section:has(> .tab)::-webkit-scrollbar{display:none;}
  .tab{font-size:17px;white-space:nowrap;flex:none;}
  .admin-main{padding:24px 20px !important;}

  /* Booking card, contact form and checkout: full-width controls, less inner padding. */
  div[style*="border:1px solid var(--mist);padding:36px"]{padding:24px 20px !important;}
  div:has(> div > #bookDate){grid-template-columns:1fr !important;}
  #submitBooking, #bookingWhatsapp, #rentalWhatsapp, #submitContact{width:100% !important;}
  #deliveryOptions{display:grid !important;grid-template-columns:1fr;}
  #deliveryOptions .chip{text-align:left;}
  .qtybox span{min-width:18px;text-align:center;}

  /* Footer: brand on top, link columns side by side (saves ~300px of scrolling). */
  .foot-grid{grid-template-columns:1fr 1fr !important;}
  .foot-grid > div:first-child{grid-column:1 / -1;}
}

@media (max-width:420px){
  .admin-side{column-gap:14px;}
}

/* About page hero: the brand logo image. Its white background
   is blended into the paper colour. */
.about-film{display:flex;align-items:center;justify-content:center;padding:48px;background:var(--paper);}
.about-film img{width:100%;max-width:520px;height:auto;aspect-ratio:1 / 1;display:block;mix-blend-mode:multiply;}
@media (max-width:760px){ .about-film{padding:0 20px 32px;} .about-film img{max-width:360px;} }

/* Phones: About values and homepage service blocks. The number/icon sits
   close to its heading, and items are separated by hairlines with even
   spacing instead of large empty gaps. */
@media (max-width:640px){
  .r-grid3 > div{padding:24px 0 !important;border:none !important;border-top:1px solid var(--mist) !important;}
  .r-grid3 > div:first-child{padding-top:0 !important;border-top:none !important;}
  .r-grid3 > div:last-child{padding-bottom:0 !important;}
  .r-grid3 > div > .serif:first-child{font-size:24px !important;line-height:1;}
  .r-grid3 > div > .serif:first-child + h3, .r-grid3 > div > svg:first-child + h3{margin-top:8px !important;}
  .r-grid3 > div > p{margin-top:8px !important;margin-bottom:0;}
}

/* Spam-trap form field: off-screen for people, still visible to form-filling bots. */
.hp-field{position:absolute !important;left:-10000px !important;width:1px;height:1px;opacity:0;pointer-events:none;}